Initial commit
11
.gitignore
vendored
Normal 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
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"jsx": "react"
|
||||||
|
},
|
||||||
|
"include": ["src/**/*"]
|
||||||
|
}
|
||||||
7
next.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
30
package.json
Normal 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
|
|
@ -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
|
|
@ -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
|
After Width: | Height: | Size: 31 KiB |
BIN
public/images/mark.jpg
Normal file
|
After Width: | Height: | Size: 113 KiB |
1
public/next.svg
Normal 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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
103
src/components/home/Contact.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
48
src/components/home/Hero.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
78
src/components/home/Services.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
src/components/layout/Footer.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
128
src/components/layout/Header.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/components/layout/Navigation.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export default function Navigation() {
|
||||||
|
return (
|
||||||
|
<nav className="w-full">
|
||||||
|
{/* Navigation content will go here */}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/components/ui/Button.tsx
Normal 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
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
25
tailwind.config.ts
Normal 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
|
|
@ -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"]
|
||||||
|
}
|
||||||