Initial commit

This commit is contained in:
TheMaddax 2024-11-27 10:17:51 -06:00
commit 087cb985a2
26 changed files with 776 additions and 0 deletions

11
.gitignore vendored Normal file
View file

@ -0,0 +1,11 @@
node_modules/
.next/
.env*
.DS_Store
*.pem
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
.vercel

10
jsconfig.json Normal file
View file

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"jsx": "react"
},
"include": ["src/**/*"]
}

7
next.config.ts Normal file
View file

@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

30
package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "finlion-website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"lucide-react": "^0.462.0",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106"
},
"devDependencies": {
"@types/next": "^8.0.7",
"@types/node": "^22.10.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/parser": "^8.16.0",
"eslint": "^9.15.0",
"eslint-config-next": "15.0.3",
"eslint-plugin-import": "^2.31.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.7.2"
}
}

1
public/file.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 391 B

1
public/globe.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 1 KiB

BIN
public/images/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/images/mark.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

1
public/next.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vercel.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 128 B

1
public/window.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

After

Width:  |  Height:  |  Size: 385 B

37
src/app/about/page.tsx Normal file
View file

@ -0,0 +1,37 @@
import Image from 'next/image';
export default function AboutPage() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto px-6 py-24 lg:px-8">
<div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
<div>
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
About FINLION
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
A business & financial consulting firm since 1978
</p>
<div className="mt-8 space-y-6 text-base leading-7 text-gray-600">
<p>
FINLION has been serving the needs of individuals and small businesses since 1978. Originally formed as an income tax practice in Los Angeles, California, the firm specializes in business startups, accounting and income taxes, financial management, and personal financial planning.
</p>
<p>
Led by Mark Apodaca, MBA, PRP, our firm combines decades of experience with modern financial tools and methodologies to deliver exceptional service to our clients.
</p>
</div>
</div>
<div className="relative">
<Image
src="/images/mark.jpg"
alt="Mark Apodaca, MBA, PRP"
width={600}
height={400}
className="rounded-2xl object-cover"
/>
</div>
</div>
</div>
</div>
);
}

23
src/app/contact/page.tsx Normal file
View file

@ -0,0 +1,23 @@
import Contact from '@/components/home/Contact';
export default function ContactPage() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto px-6 py-24 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Contact Us
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
Our contact form is coming soon. In the meantime, you can reach us at:
</p>
<div className="mt-10 flex flex-col items-center gap-4 text-base text-gray-600">
<p>Phone: (123) 456-7890</p>
<p>Email: contact@finlion.com</p>
<p>Location: Santa Fe, New Mexico</p>
</div>
</div>
</div>
</div>
);
}

51
src/app/layout.tsx Normal file
View file

@ -0,0 +1,51 @@
import type { Metadata } from "next";
import { Playfair_Display, Inter } from "next/font/google";
import Header from '../components/layout/Header';
import Footer from '../components/layout/Footer';
import '../styles/globals.css';
const playfair = Playfair_Display({
subsets: ["latin"],
display: 'swap',
});
const inter = Inter({
subsets: ["latin"],
display: 'swap',
});
export const metadata: Metadata = {
title: "FINLION | Mark Apodaca, MBA, PRP - Financial & Business Consulting",
description: "Professional financial consulting, accounting, and nonprofit organization services. Specializing in QuickBooks, Xero, tax services, and strategic planning since 1978.",
keywords: [
"financial consulting",
"nonprofit consulting",
"QuickBooks",
"Xero",
"tax services",
"business planning",
"Mark Apodaca",
"FINLION"
],
authors: [{ name: "Mark Apodaca, MBA, PRP" }],
creator: "Mark Apodaca",
publisher: "FINLION",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Header />
<main className="min-h-screen pt-16">
{children}
</main>
<Footer />
</body>
</html>
);
}

13
src/app/page.tsx Normal file
View file

@ -0,0 +1,13 @@
import Hero from '../components/home/Hero';
import Services from '../components/home/Services';
import Contact from '../components/home/Contact';
export default function Home() {
return (
<>
<Hero />
<Services />
<Contact />
</>
);
}

72
src/app/services/page.tsx Normal file
View file

@ -0,0 +1,72 @@
import { Calculator, BookOpen, Building2, LineChart, PiggyBank, Users } from 'lucide-react';
const services = [
{
name: 'Accounting & Bookkeeping',
description: 'Professional accounting services using QuickBooks and Xero for accurate financial records.',
icon: Calculator,
details: 'Comprehensive bookkeeping and accounting services to maintain accurate financial records and ensure compliance with regulatory requirements.'
},
{
name: 'Income Tax Services',
description: 'Comprehensive tax planning and preparation for individuals and businesses.',
icon: BookOpen,
details: 'Strategic tax planning and preparation services to optimize your tax position while ensuring full compliance with current regulations.'
},
{
name: 'Business Consulting',
description: 'Strategic planning, business models, and financial analysis for growth.',
icon: Building2,
details: 'Expert guidance on business strategy, operational efficiency, and growth planning tailored to your specific industry and goals.'
},
{
name: 'Financial Analysis',
description: 'Detailed financial statements analysis, budgeting, and forecasting.',
icon: LineChart,
details: 'In-depth analysis of financial statements, performance metrics, and market trends to inform strategic decision-making.'
},
{
name: 'Financial Planning',
description: 'Comprehensive financial planning and modeling for sustainable growth.',
icon: PiggyBank,
details: 'Custom financial planning solutions to help you achieve your long-term business and personal financial objectives.'
},
{
name: 'Nonprofit Organization',
description: 'Specialized consulting services for nonprofit organizations.',
icon: Users,
details: 'Dedicated support for nonprofit organizations, including compliance, financial management, and strategic planning.'
}
];
export default function ServicesPage() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto px-6 py-24 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Our Services
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
Comprehensive financial and business consulting services tailored to your specific needs
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<div className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
{services.map((service) => (
<div key={service.name} id={service.name.toLowerCase().replace(/\s+/g, '-')} className="flex flex-col">
<div className="flex items-center gap-x-4">
<service.icon className="h-7 w-7 flex-none text-blue-800" aria-hidden="true" />
<h2 className="text-2xl font-bold tracking-tight text-gray-900">{service.name}</h2>
</div>
<p className="mt-4 text-base leading-7 text-gray-600">{service.description}</p>
<p className="mt-4 text-base leading-7 text-gray-600">{service.details}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
}

View file

@ -0,0 +1,103 @@
import { Phone, Mail, MapPin } from 'lucide-react';
export default function Contact() {
return (
<section className="relative bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl space-y-16 divide-y divide-gray-100 lg:mx-0 lg:max-w-none">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900">Get in Touch</h2>
<p className="mt-4 leading-7 text-gray-600">
Ready to elevate your financial strategy? Let's discuss how we can help you achieve your goals.
</p>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
<div className="rounded-2xl bg-gray-50 p-10">
<h3 className="text-base font-semibold leading-7 text-gray-900">Los Angeles Office</h3>
<dl className="mt-3 space-y-1 text-sm leading-6 text-gray-600">
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Address</span>
<MapPin className="h-5 w-5 text-gray-400" aria-hidden="true" />
</dt>
<dd>Los Angeles, California</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Phone</span>
<Phone className="h-5 w-5 text-gray-400" aria-hidden="true" />
</dt>
<dd>
<a className="hover:text-blue-800" href="tel:+1234567890">
(123) 456-7890
</a>
</dd>
</div>
<div className="flex gap-x-4">
<dt className="flex-none">
<span className="sr-only">Email</span>
<Mail className="h-5 w-5 text-gray-400" aria-hidden="true" />
</dt>
<dd>
<a className="hover:text-blue-800" href="mailto:contact@finlion.com">
contact@finlion.com
</a>
</dd>
</div>
</dl>
</div>
<form className="rounded-2xl bg-gray-50 p-10">
<div className="grid grid-cols-1 gap-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-900">
Name
</label>
<input
type="text"
name="name"
id="name"
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-900">
Email
</label>
<input
type="email"
name="email"
id="email"
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-900">
Message
</label>
<textarea
name="message"
id="message"
rows={4}
className="mt-2 block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-800 sm:text-sm sm:leading-6"
/>
</div>
<div>
<button
type="submit"
className="block w-full rounded-md bg-blue-800 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-800"
>
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
);
}

View file

@ -0,0 +1,48 @@
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
export default function Hero() {
return (
<div className="relative bg-white">
<div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
<div className="px-6 pb-24 pt-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-48 xl:col-span-6">
<div className="mx-auto max-w-2xl lg:mx-0">
<h1 className="mt-24 text-4xl font-bold tracking-tight text-gray-900 sm:mt-10 sm:text-6xl">
Financial Excellence Since 1978
</h1>
<p className="mt-6 text-lg leading-8 text-gray-600">
Specialized expertise in financial consulting, accounting, and nonprofit organization services.
Providing professional guidance for your business success.
</p>
<div className="mt-10 flex items-center gap-x-6">
<Link
href="/contact"
className="rounded-md bg-blue-800 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors flex items-center gap-2"
>
Schedule Consultation
<ArrowRight className="h-4 w-4" />
</Link>
<Link
href="/services"
className="text-sm font-semibold leading-6 text-gray-900 hover:text-blue-800 transition-colors"
>
View Services <span aria-hidden="true"></span>
</Link>
</div>
</div>
</div>
<div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
<Image
className="aspect-[3/2] w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
src="/images/mark.jpg"
alt="Mark Apodaca, MBA, PRP - Financial Consultant"
width={1000}
height={1000}
priority
/>
</div>
</div>
</div>
);
}

View file

@ -0,0 +1,78 @@
import { Calculator, BookOpen, Building2, LineChart, PiggyBank, Users } from 'lucide-react';
import Link from 'next/link';
const services = [
{
name: 'Accounting & Bookkeeping',
description: 'Professional accounting services using QuickBooks and Xero for accurate financial records.',
icon: Calculator,
href: '/services#accounting'
},
{
name: 'Income Tax Services',
description: 'Comprehensive tax planning and preparation for individuals and businesses.',
icon: BookOpen,
href: '/services#tax'
},
{
name: 'Business Consulting',
description: 'Strategic planning, business models, and financial analysis for growth.',
icon: Building2,
href: '/services#consulting'
},
{
name: 'Financial Analysis',
description: 'Detailed financial statements analysis, budgeting, and forecasting.',
icon: LineChart,
href: '/services#analysis'
},
{
name: 'Financial Planning',
description: 'Comprehensive financial planning and modeling for sustainable growth.',
icon: PiggyBank,
href: '/services#planning'
},
{
name: 'Nonprofit Organization',
description: 'Specialized consulting services for nonprofit organizations.',
icon: Users,
href: '/services#nonprofit'
}
];
export default function Services() {
return (
<section className="py-24 bg-gray-50">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Professional Services
</h2>
<p className="mt-6 text-lg leading-8 text-gray-600">
Comprehensive financial and business consulting services tailored to your needs
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
{services.map((service) => (
<Link key={service.name} href={service.href} className="group">
<div className="flex flex-col hover:bg-white rounded-2xl p-6 transition-colors">
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
<service.icon className="h-5 w-5 flex-none text-blue-800" aria-hidden="true" />
{service.name}
</dt>
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
<p className="flex-auto">{service.description}</p>
<p className="mt-6 text-sm font-semibold text-blue-800 group-hover:text-blue-600">
Learn more
</p>
</dd>
</div>
</Link>
))}
</dl>
</div>
</div>
</section>
);
}

View file

@ -0,0 +1,82 @@
'use client'
import Image from 'next/image';
import Link from 'next/link';
import { Phone, Mail, MapPin } from 'lucide-react';
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-blue-900 text-white">
<div className="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Brand Section */}
<div className="space-y-4">
<Link href="/" className="-m-1.5 p-1.5">
<span className="text-xl font-bold text-white">FINLION</span>
</Link>
<p className="text-sm">
A business & financial consulting firm since 1978
</p>
</div>
{/* Contact Information */}
<div className="space-y-4">
<h3 className="text-lg font-semibold">Contact Us</h3>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Phone size={18} />
<Link href="tel:+1234567890" className="hover:text-gold-400">
(123) 456-7890
</Link>
</div>
<div className="flex items-center gap-2">
<Mail size={18} />
<Link href="mailto:contact@finlion.com" className="hover:text-gold-400">
contact@finlion.com
</Link>
</div>
<div className="flex items-center gap-2">
<MapPin size={18} />
<p>Los Angeles, California</p>
</div>
</div>
</div>
{/* Quick Links */}
<div className="space-y-4">
<h3 className="text-lg font-semibold">Services</h3>
<ul className="space-y-2">
<li>
<Link href="/services#accounting" className="hover:text-gold-400">
Accounting & Bookkeeping
</Link>
</li>
<li>
<Link href="/services#tax" className="hover:text-gold-400">
Income Tax Services
</Link>
</li>
<li>
<Link href="/services#consulting" className="hover:text-gold-400">
Business Consulting
</Link>
</li>
<li>
<Link href="/services#nonprofit" className="hover:text-gold-400">
Nonprofit Organization
</Link>
</li>
</ul>
</div>
</div>
{/* Copyright */}
<div className="mt-8 pt-8 border-t border-blue-800 text-center text-sm">
<p>© {currentYear} FINLION. All rights reserved.</p>
</div>
</div>
</footer>
);
}

View file

@ -0,0 +1,128 @@
'use client'
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Menu, X } from 'lucide-react';
const navigation = [
{ name: 'Home', href: '/' },
{ name: 'Services', href: '/services' },
{ name: 'About', href: '/about' },
{ name: 'Contact', href: '/contact' },
];
export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="fixed w-full bg-white/95 backdrop-blur-sm z-50 shadow-sm">
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div className="flex lg:flex-1">
<Link href="/" className="-m-1.5 p-1.5">
<span className="sr-only">FINLION</span>
<Image
className="h-12 w-auto"
src="/images/logo.jpg"
alt="FINLION Logo"
width={180}
height={48}
priority
/>
</Link>
</div>
{/* Mobile menu button */}
<div className="flex lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Menu className="h-6 w-6" aria-hidden="true" />
</button>
</div>
{/* Desktop navigation */}
<div className="hidden lg:flex lg:gap-x-12">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="text-sm font-semibold leading-6 text-gray-900 hover:text-blue-800 transition-colors"
>
{item.name}
</Link>
))}
</div>
{/* CTA Button */}
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<Link
href="/contact"
className="rounded-md bg-blue-800 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 transition-colors"
>
Get Started
</Link>
</div>
</nav>
{/* Mobile menu */}
{mobileMenuOpen && (
<div className="lg:hidden">
<div className="fixed inset-0 z-50">
<div className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="flex items-center justify-between">
<Link href="/" className="-m-1.5 p-1.5">
<span className="sr-only">FINLION</span>
<Image
className="h-8 w-auto"
src="/images/logo.jpg"
alt="FINLION Logo"
width={120}
height={32}
priority
/>
</Link>
<button
type="button"
className="-m-2.5 rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<X className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</Link>
))}
</div>
<div className="py-6">
<Link
href="/contact"
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white bg-blue-800 hover:bg-blue-700 text-center"
onClick={() => setMobileMenuOpen(false)}
>
Get Started
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</header>
);
}

View file

@ -0,0 +1,7 @@
export default function Navigation() {
return (
<nav className="w-full">
{/* Navigation content will go here */}
</nav>
);
}

View file

@ -0,0 +1,16 @@
interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
className?: string;
}
export default function Button({ children, onClick, className = "" }: ButtonProps) {
return (
<button
onClick={onClick}
className={`px-4 py-2 rounded-md ${className}`}
>
{children}
</button>
);
}

3
src/styles/globals.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

25
tailwind.config.ts Normal file
View file

@ -0,0 +1,25 @@
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
'blue': {
800: '#1e40af',
900: '#1e3a8a',
},
'gold': {
400: '#fbbf24',
},
},
},
},
plugins: [],
}
export default config

27
tsconfig.json Normal file
View file

@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}