Build Greg Knopp CPA website
This commit is contained in:
gpt-engineer-app[bot]
parent
9d0a9264b1
commit
44ab7d09fd
37
index.html
37
index.html
|
|
@ -3,18 +3,39 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>clarity-crafted-site</title>
|
<title>Corpus Christi CPA | Greg Knopp, P.C. – Tax & Business Advisory</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Trusted CPA services in Corpus Christi, TX: tax preparation and planning, bookkeeping, payroll, IRS representation, and business advisory. 20+ years helping businesses and families achieve financial clarity." />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="Greg Knopp, P.C." />
|
||||||
|
|
||||||
|
<!-- Local Business Schema -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "LocalBusiness",
|
||||||
|
"name": "Greg Knopp, P.C.",
|
||||||
|
"description": "Certified Public Accountant providing tax preparation, accounting, and business advisory services",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "Corpus Christi",
|
||||||
|
"addressLocality": "Corpus Christi",
|
||||||
|
"addressRegion": "TX",
|
||||||
|
"addressCountry": "US"
|
||||||
|
},
|
||||||
|
"telephone": "(361) 854-3711",
|
||||||
|
"priceRange": "$$"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<meta property="og:title" content="clarity-crafted-site" />
|
<meta property="og:title" content="Corpus Christi CPA | Greg Knopp, P.C." />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Trusted CPA services: tax preparation, bookkeeping, IRS representation. 20+ years serving Corpus Christi businesses and families." />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content="@lovable_dev" />
|
|
||||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 836 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
10
src/App.tsx
10
src/App.tsx
|
|
@ -4,6 +4,11 @@ import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Index from "./pages/Index";
|
import Index from "./pages/Index";
|
||||||
|
import About from "./pages/About";
|
||||||
|
import ServicesPage from "./pages/ServicesPage";
|
||||||
|
import Resources from "./pages/Resources";
|
||||||
|
import TestimonialsPage from "./pages/TestimonialsPage";
|
||||||
|
import Contact from "./pages/Contact";
|
||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
@ -16,6 +21,11 @@ const App = () => (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Index />} />
|
<Route path="/" element={<Index />} />
|
||||||
|
<Route path="/about" element={<About />} />
|
||||||
|
<Route path="/services" element={<ServicesPage />} />
|
||||||
|
<Route path="/resources" element={<Resources />} />
|
||||||
|
<Route path="/testimonials" element={<TestimonialsPage />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ArrowRight, Phone } from "lucide-react";
|
||||||
|
|
||||||
|
const CtaSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-hero">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-cream mb-6">
|
||||||
|
Ready to get started?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-cream/90 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Schedule your free consultation today and discover how we can bring clarity to your financial picture.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="bg-cream text-forest hover:bg-cream/90 border-cream btn-shadow text-lg px-8 py-3 rounded-2xl"
|
||||||
|
>
|
||||||
|
Schedule Free Consultation
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="mr-2 w-5 h-5" />
|
||||||
|
Call (361) 854-3711
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-cream/70 text-sm mt-6">
|
||||||
|
Same-day response for urgent IRS matters
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CtaSection;
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="bg-forest text-cream py-16">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{/* Company Info */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<h3 className="text-2xl font-display font-semibold mb-4">
|
||||||
|
Greg Knopp, P.C.
|
||||||
|
</h3>
|
||||||
|
<p className="text-cream/80 mb-6 leading-relaxed">
|
||||||
|
Certified Public Accountant providing trusted tax, accounting, and business advisory services to Corpus Christi families and businesses since 2003.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<MapPin className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<span className="text-cream/80">Corpus Christi, TX</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Phone className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<a href="tel:+13618543711" className="text-cream/80 hover:text-cream gentle-transition">
|
||||||
|
(361) 854-3711
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Mail className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<a href="mailto:info@gregknopp.com" className="text-cream/80 hover:text-cream gentle-transition">
|
||||||
|
info@gregknopp.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Clock className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<span className="text-cream/80">Mon-Fri: 8:00 AM - 6:00 PM</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-display font-semibold mb-4">Services</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Tax Preparation</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Accounting & Bookkeeping</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Payroll Solutions</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">IRS Representation</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Business Consulting</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resources */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-display font-semibold mb-4">Resources</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Tax Guides</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Calculators</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">FAQs</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Client Login</a></li>
|
||||||
|
<li><a href="#" className="text-cream/80 hover:text-cream gentle-transition">Newsletter</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Certifications */}
|
||||||
|
<div className="border-t border-cream/20 mt-12 pt-8">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
<div className="flex flex-wrap gap-6 text-sm text-cream/70">
|
||||||
|
<span>CPA • AICPA Member • IRS Enrolled Agent</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-6 text-sm text-cream/70">
|
||||||
|
<a href="#" className="hover:text-cream gentle-transition">Privacy Policy</a>
|
||||||
|
<a href="#" className="hover:text-cream gentle-transition">Accessibility</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center text-cream/60 text-sm mt-6">
|
||||||
|
© {currentYear} Greg Knopp, P.C. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { CheckCircle2, Phone, ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="relative min-h-screen flex items-center justify-center text-center px-4"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('/lovable-uploads/f8f08a1a-0132-4376-af8a-c5bb86f0627e.png')",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 hero-overlay"></div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative z-10 max-w-4xl mx-auto">
|
||||||
|
<h1 className="text-display-xl md:text-6xl lg:text-7xl font-display font-bold text-cream mb-6 leading-tight">
|
||||||
|
Trusted CPA Services in Corpus Christi, TX
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-body-lg md:text-xl text-cream/90 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
From tax planning to business advisory, we provide discreet, tailored guidance for long-term financial confidence.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTAs */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-cream text-forest hover:bg-cream/90 btn-shadow text-lg px-8 py-3 rounded-2xl"
|
||||||
|
>
|
||||||
|
Schedule Free Consultation
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="mr-2 w-5 h-5" />
|
||||||
|
Call (361) 854-3711
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trust Badges */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center text-cream/80 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-brass" />
|
||||||
|
<span>20+ Years Experience</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-brass" />
|
||||||
|
<span>500+ Clients</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-brass" />
|
||||||
|
<span>IRS Representation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Microcopy */}
|
||||||
|
<p className="text-cream/60 text-sm mt-6">
|
||||||
|
No obligation • Same-day response • Confidential
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Download } from "lucide-react";
|
||||||
|
|
||||||
|
const LeadMagnet = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-16">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-cream border-2 border-brass/30 rounded-2xl p-8 md:p-12 text-center card-elevation">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Download className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-display-md font-display font-semibold text-forest mb-4">
|
||||||
|
Download the 2025 Tax Prep Checklist
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
|
||||||
|
Get organized early with our comprehensive checklist covering all essential documents and deadlines for the upcoming tax season.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="btn-shadow text-lg px-8 py-3 rounded-2xl"
|
||||||
|
>
|
||||||
|
<Download className="mr-2 w-5 h-5" />
|
||||||
|
Get the PDF
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<p className="text-sm text-sage/80 mt-4">
|
||||||
|
Free download • No spam • Unsubscribe anytime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LeadMagnet;
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Menu, X, Phone } from "lucide-react";
|
||||||
|
|
||||||
|
const Navigation = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: "Home", href: "/" },
|
||||||
|
{ name: "About", href: "/about" },
|
||||||
|
{ name: "Services", href: "/services" },
|
||||||
|
{ name: "Resources", href: "/resources" },
|
||||||
|
{ name: "Testimonials", href: "/testimonials" },
|
||||||
|
{ name: "Contact", href: "/contact" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-card/95 backdrop-blur-sm border-b border-sage/20">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<h1 className="text-xl font-display font-semibold text-forest">
|
||||||
|
Greg Knopp, P.C.
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="ml-10 flex items-baseline space-x-8">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className="text-sage hover:text-forest gentle-transition px-3 py-2 text-sm font-medium"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop CTA */}
|
||||||
|
<div className="hidden md:flex items-center space-x-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-sage hover:text-forest gentle-transition text-sm"
|
||||||
|
>
|
||||||
|
Client Login
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="btn-shadow"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-2" />
|
||||||
|
Schedule Consultation
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="text-sage hover:text-forest gentle-transition p-2"
|
||||||
|
>
|
||||||
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1 bg-card border-t border-sage/20">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className="text-sage hover:text-forest block px-3 py-2 text-base font-medium gentle-transition"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
<div className="pt-4 pb-2 space-y-2">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-sage hover:text-forest block px-3 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Client Login
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="ml-3 btn-shadow"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-2" />
|
||||||
|
Schedule Consultation
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
import { ArrowRight, Calculator, FileText, Users, Shield, Building } from "lucide-react";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
|
||||||
|
const Services = () => {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: "Tax Preparation & Planning",
|
||||||
|
description: "Maximize deductions with proactive quarterly planning and audit-ready documentation.",
|
||||||
|
image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
|
||||||
|
alt: "Abstract illustration of IRS documents and magnifier"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: "Accounting & Bookkeeping",
|
||||||
|
description: "Monthly books, financial statements, and cash-flow management for clear business insights.",
|
||||||
|
image: "/lovable-uploads/1260e5db-df42-4f32-89c2-eecc054d669d.png",
|
||||||
|
alt: "Abstract financial charts and calculator"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Payroll Solutions",
|
||||||
|
description: "Full compliance, filings, and benefits coordination to keep your team paid accurately.",
|
||||||
|
image: null,
|
||||||
|
alt: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "IRS Representation",
|
||||||
|
description: "Expert audit defense, penalty negotiations, and payment plan arrangements.",
|
||||||
|
image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
|
||||||
|
alt: "Abstract illustration of IRS documents and magnifier"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Building,
|
||||||
|
title: "Business Consulting & Formation",
|
||||||
|
description: "Entity selection, business valuation partners, and operating agreement guidance.",
|
||||||
|
image: null,
|
||||||
|
alt: null
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-4">
|
||||||
|
Our CPA Services
|
||||||
|
</h2>
|
||||||
|
<p className="text-body-lg text-sage max-w-2xl mx-auto">
|
||||||
|
Comprehensive financial solutions tailored to your business and personal needs
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{services.map((service, index) => {
|
||||||
|
const Icon = service.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index} className="card-elevation hover:shadow-lg gentle-transition group cursor-pointer rounded-2xl overflow-hidden">
|
||||||
|
{service.image && (
|
||||||
|
<div className="aspect-video overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={service.image}
|
||||||
|
alt={service.alt || ""}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 smooth-transition"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-display-md font-display font-medium text-forest mb-4">
|
||||||
|
{service.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-sage mb-6 leading-relaxed">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center text-forest group-hover:text-brass gentle-transition">
|
||||||
|
<span className="font-medium">Learn more</span>
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 gentle-transition" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Services;
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Star } from "lucide-react";
|
||||||
|
|
||||||
|
const Testimonials = () => {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
quote: "Greg's expertise saved us thousands during our audit. His calm approach and deep knowledge gave us complete confidence throughout the process.",
|
||||||
|
initials: "M.R.",
|
||||||
|
role: "Small Business Owner"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Twenty years of working with Greg, and he still finds new ways to optimize our tax strategy. Truly a partner in our business success.",
|
||||||
|
initials: "D.S.",
|
||||||
|
role: "Real Estate Developer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Professional, responsive, and incredibly thorough. Greg handles our family's complex tax situation with expertise we trust completely.",
|
||||||
|
initials: "L.T.",
|
||||||
|
role: "Family Client"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-4">
|
||||||
|
What Clients Say
|
||||||
|
</h2>
|
||||||
|
<p className="text-body-lg text-sage max-w-2xl mx-auto">
|
||||||
|
Trusted by Corpus Christi families and businesses for over two decades
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{testimonials.map((testimonial, index) => (
|
||||||
|
<Card key={index} className="card-elevation rounded-2xl bg-card">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
{/* Stars */}
|
||||||
|
<div className="flex gap-1 mb-6">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="w-5 h-5 fill-brass text-brass" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quote */}
|
||||||
|
<blockquote className="text-sage mb-6 leading-relaxed italic">
|
||||||
|
"{testimonial.quote}"
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
{/* Attribution */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-full flex items-center justify-center">
|
||||||
|
<span className="font-display font-semibold text-brass">
|
||||||
|
{testimonial.initials}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">{testimonial.initials}</div>
|
||||||
|
<div className="text-sm text-sage">{testimonial.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Testimonials;
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import { Award, Users, Briefcase } from "lucide-react";
|
||||||
|
|
||||||
|
const WhyChooseUs = () => {
|
||||||
|
const pillars = [
|
||||||
|
{
|
||||||
|
icon: Award,
|
||||||
|
title: "Proven Expertise",
|
||||||
|
description: "Two decades of CPA experience with deep knowledge of Texas tax law and federal regulations."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Personalized Service",
|
||||||
|
description: "Every client receives direct access to Greg Knopp with customized strategies for their unique situation."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Briefcase,
|
||||||
|
title: "Comprehensive Solutions",
|
||||||
|
description: "From tax prep to business formation, we handle all aspects of your financial and accounting needs."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-subtle">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
{/* Image */}
|
||||||
|
<div className="relative">
|
||||||
|
<img
|
||||||
|
src="/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png"
|
||||||
|
alt="Professional desk details in warm tones"
|
||||||
|
className="rounded-2xl card-elevation w-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-8">
|
||||||
|
Why Choose Greg Knopp, P.C.?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{pillars.map((pillar, index) => {
|
||||||
|
const Icon = pillar.icon;
|
||||||
|
return (
|
||||||
|
<div key={index} className="flex gap-4">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center">
|
||||||
|
<Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-display-md font-display font-medium text-forest mb-2">
|
||||||
|
{pillar.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-body-lg text-sage leading-relaxed">
|
||||||
|
{pillar.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhyChooseUs;
|
||||||
137
src/index.css
137
src/index.css
|
|
@ -8,51 +8,56 @@ All colors MUST be HSL.
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
/* Greg Knopp CPA Brand Colors - Armonia-inspired soft earth tones */
|
||||||
--foreground: 222.2 84% 4.9%;
|
--background: 42 28% 96%; /* Cream/Warm Sand #F6F3EA */
|
||||||
|
--foreground: 180 7% 5%; /* Ink #0E1111 */
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
--card: 42 28% 98%; /* Slightly lighter cream for cards */
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 180 7% 5%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
--popover: 42 28% 98%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover-foreground: 180 7% 5%;
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
--primary: 150 28% 18%; /* Deep Forest Green #1C3A2E */
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary-foreground: 42 28% 96%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 150 8% 55%; /* Sage #7E8F87 */
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary-foreground: 180 7% 5%;
|
||||||
|
|
||||||
--muted: 210 40% 96.1%;
|
--muted: 150 8% 90%; /* Very light sage for muted backgrounds */
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted-foreground: 150 8% 45%;
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
--accent: 40 35% 60%; /* Brass/Gold Accent #C8A96A */
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 180 7% 5%;
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
--destructive: 0 84.2% 60.2%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 42 28% 96%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
--border: 150 8% 85%; /* Soft sage border */
|
||||||
--input: 214.3 31.8% 91.4%;
|
--input: 150 8% 90%;
|
||||||
--ring: 222.2 84% 4.9%;
|
--ring: 150 28% 18%;
|
||||||
|
|
||||||
--radius: 0.5rem;
|
--radius: 1.5rem; /* 24px rounded corners - Armonia style */
|
||||||
|
|
||||||
--sidebar-background: 0 0% 98%;
|
/* Custom Brand Variables */
|
||||||
|
--cream: 42 28% 96%; /* #F6F3EA */
|
||||||
--sidebar-foreground: 240 5.3% 26.1%;
|
--forest: 150 28% 18%; /* #1C3A2E */
|
||||||
|
--sage: 150 8% 55%; /* #7E8F87 */
|
||||||
--sidebar-primary: 240 5.9% 10%;
|
--brass: 40 35% 60%; /* #C8A96A */
|
||||||
|
--ink: 180 7% 5%; /* #0E1111 */
|
||||||
--sidebar-primary-foreground: 0 0% 98%;
|
|
||||||
|
/* Gradients */
|
||||||
--sidebar-accent: 240 4.8% 95.9%;
|
--gradient-hero: linear-gradient(135deg, hsl(var(--forest) / 0.8), hsl(var(--forest) / 0.6));
|
||||||
|
--gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
|
||||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
||||||
|
/* Shadows - Soft, low elevation */
|
||||||
--sidebar-border: 220 13% 91%;
|
--shadow-card: 0 2px 8px hsl(var(--forest) / 0.05);
|
||||||
|
--shadow-hover: 0 4px 12px hsl(var(--forest) / 0.08);
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
--shadow-button: 0 1px 3px hsl(var(--forest) / 0.1);
|
||||||
|
|
||||||
|
/* Transitions - Gentle, Armonia-style */
|
||||||
|
--transition-gentle: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-smooth: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
@ -100,6 +105,68 @@ All colors MUST be HSL.
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground font-body;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
@apply font-display;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
/* Armonia-inspired utilities */
|
||||||
|
.hero-overlay {
|
||||||
|
background: var(--gradient-hero);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-elevation {
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
transition: var(--transition-gentle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-elevation:hover {
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-shadow {
|
||||||
|
box-shadow: var(--shadow-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gentle-transition {
|
||||||
|
transition: var(--transition-gentle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.smooth-transition {
|
||||||
|
transition: var(--transition-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-hero {
|
||||||
|
background: var(--gradient-hero);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-subtle {
|
||||||
|
background: var(--gradient-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography scales */
|
||||||
|
.text-display-xl {
|
||||||
|
font-size: 4rem; /* 64px */
|
||||||
|
line-height: 4.5rem; /* 72px */
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-display-lg {
|
||||||
|
font-size: 2.5rem; /* 40px */
|
||||||
|
line-height: 3rem; /* 48px */
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-display-md {
|
||||||
|
font-size: 1.75rem; /* 28px */
|
||||||
|
line-height: 2.25rem; /* 36px */
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-body-lg {
|
||||||
|
font-size: 1.125rem; /* 18px */
|
||||||
|
line-height: 1.75rem; /* 28px */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Award, Users, Shield, CheckCircle2 } from "lucide-react";
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
const stats = [
|
||||||
|
{ number: "20+", label: "Years Experience" },
|
||||||
|
{ number: "500+", label: "Clients Served" },
|
||||||
|
{ number: "99%", label: "Client Retention" },
|
||||||
|
{ number: "24hr", label: "Response Time" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const credentials = [
|
||||||
|
"Certified Public Accountant (CPA)",
|
||||||
|
"American Institute of CPAs (AICPA) Member",
|
||||||
|
"IRS Enrolled Agent",
|
||||||
|
"Texas State Board of Public Accountancy Licensed",
|
||||||
|
"QuickBooks ProAdvisor Certified"
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<main className="pt-16">
|
||||||
|
{/* Hero Banner */}
|
||||||
|
<section
|
||||||
|
className="relative py-32 flex items-center justify-center text-center"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('/lovable-uploads/bea5e6b1-7510-4876-955e-a265f2600ec5.png')",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-forest/60"></div>
|
||||||
|
<div className="relative z-10 max-w-4xl mx-auto px-4">
|
||||||
|
<h1 className="text-display-xl font-display font-bold text-cream mb-6">
|
||||||
|
Your Financial Partner Since 2003
|
||||||
|
</h1>
|
||||||
|
<p className="text-body-lg text-cream/90 max-w-2xl mx-auto">
|
||||||
|
Building lasting relationships through trusted expertise, personalized service, and unwavering commitment to your financial success.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Story Section */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="grid lg:grid-cols-3 gap-12 items-start">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-8">
|
||||||
|
About Greg Knopp, P.C.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="prose prose-lg text-sage space-y-6">
|
||||||
|
<p className="text-body-lg leading-relaxed">
|
||||||
|
For over two decades, Greg Knopp has been the trusted CPA partner for Corpus Christi's families and businesses. What started as a commitment to provide honest, expert financial guidance has grown into a practice built on lasting relationships and proven results.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="text-body-lg leading-relaxed">
|
||||||
|
Our approach is simple: we believe every client deserves personalized attention, clear communication, and strategies tailored to their unique situation. Whether you're navigating complex tax issues, planning for business growth, or seeking peace of mind with your personal finances, we're here to guide you every step of the way.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="text-body-lg leading-relaxed">
|
||||||
|
Greg's expertise spans individual and business tax preparation, full-service accounting, payroll management, IRS representation, and strategic business consulting. Our commitment to staying current with ever-changing tax laws and regulations ensures you always receive the most effective and compliant solutions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<div className="bg-card rounded-2xl p-8 card-elevation">
|
||||||
|
<h3 className="font-display font-semibold text-forest mb-6 text-center">
|
||||||
|
By the Numbers
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<div key={index} className="text-center">
|
||||||
|
<div className="text-3xl font-display font-bold text-brass mb-1">
|
||||||
|
{stat.number}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-sage">
|
||||||
|
{stat.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Credentials Section */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-8">
|
||||||
|
Credentials & Certifications
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||||
|
{credentials.map((credential, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-3 bg-card rounded-2xl p-6 card-elevation">
|
||||||
|
<CheckCircle2 className="w-6 h-6 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<span className="text-sage font-medium">{credential}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sage mt-8 max-w-2xl mx-auto text-body-lg">
|
||||||
|
Continuous education and professional development ensure we stay at the forefront of tax law, accounting standards, and best practices in financial planning.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Values Section */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
|
||||||
|
Our Core Values
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Shield className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-display-md font-display font-medium text-forest mb-4">
|
||||||
|
Integrity
|
||||||
|
</h3>
|
||||||
|
<p className="text-sage leading-relaxed">
|
||||||
|
Honest, transparent communication and ethical practices in every client interaction.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Award className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-display-md font-display font-medium text-forest mb-4">
|
||||||
|
Excellence
|
||||||
|
</h3>
|
||||||
|
<p className="text-sage leading-relaxed">
|
||||||
|
Meticulous attention to detail and commitment to delivering the highest quality results.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Users className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-display-md font-display font-medium text-forest mb-4">
|
||||||
|
Partnership
|
||||||
|
</h3>
|
||||||
|
<p className="text-sage leading-relaxed">
|
||||||
|
Building long-term relationships based on trust, reliability, and mutual success.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
MapPin,
|
||||||
|
Phone,
|
||||||
|
Mail,
|
||||||
|
Clock,
|
||||||
|
AlertTriangle,
|
||||||
|
MessageSquare,
|
||||||
|
Calendar
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const Contact = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<main className="pt-16">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="py-24 bg-gradient-subtle">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-display-xl font-display font-bold text-forest mb-6">
|
||||||
|
Get in Touch
|
||||||
|
</h1>
|
||||||
|
<p className="text-body-lg text-sage max-w-3xl mx-auto">
|
||||||
|
Ready to take control of your financial future? Contact us today for a free consultation and discover how we can help you achieve your goals.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Form & Info */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16">
|
||||||
|
{/* Contact Form */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-8">
|
||||||
|
Schedule Your Free Consultation
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<Card className="rounded-2xl card-elevation">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<form className="space-y-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="firstName" className="text-forest font-medium">
|
||||||
|
First Name *
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="firstName"
|
||||||
|
className="mt-2 rounded-xl"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="lastName" className="text-forest font-medium">
|
||||||
|
Last Name *
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="lastName"
|
||||||
|
className="mt-2 rounded-xl"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email" className="text-forest font-medium">
|
||||||
|
Email Address *
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
className="mt-2 rounded-xl"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="phone" className="text-forest font-medium">
|
||||||
|
Phone Number
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="phone"
|
||||||
|
type="tel"
|
||||||
|
className="mt-2 rounded-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="service" className="text-forest font-medium">
|
||||||
|
Service Needed *
|
||||||
|
</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger className="mt-2 rounded-xl">
|
||||||
|
<SelectValue placeholder="Select a service" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="tax-prep">Tax Preparation & Planning</SelectItem>
|
||||||
|
<SelectItem value="accounting">Accounting & Bookkeeping</SelectItem>
|
||||||
|
<SelectItem value="payroll">Payroll Solutions</SelectItem>
|
||||||
|
<SelectItem value="irs-rep">IRS Representation</SelectItem>
|
||||||
|
<SelectItem value="business">Business Consulting</SelectItem>
|
||||||
|
<SelectItem value="other">Other / Multiple Services</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="message" className="text-forest font-medium">
|
||||||
|
Message
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="message"
|
||||||
|
placeholder="Tell us about your situation and how we can help..."
|
||||||
|
className="mt-2 rounded-xl min-h-[120px] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button size="lg" className="w-full btn-shadow rounded-xl">
|
||||||
|
<MessageSquare className="mr-2 w-5 h-5" />
|
||||||
|
Send Message
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<p className="text-sm text-sage text-center">
|
||||||
|
We'll get back to you within one business day
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Office Info */}
|
||||||
|
<Card className="rounded-2xl card-elevation">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<h3 className="font-display font-semibold text-forest mb-6 flex items-center gap-3">
|
||||||
|
<MapPin className="w-6 h-6 text-brass" strokeWidth={1.5} />
|
||||||
|
Office Information
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<MapPin className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">Address</div>
|
||||||
|
<div className="text-sage">Corpus Christi, TX</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Phone className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">Phone</div>
|
||||||
|
<a href="tel:+13618543711" className="text-sage hover:text-forest gentle-transition">
|
||||||
|
(361) 854-3711
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Mail className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">Email</div>
|
||||||
|
<a href="mailto:info@gregknopp.com" className="text-sage hover:text-forest gentle-transition">
|
||||||
|
info@gregknopp.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Clock className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">Office Hours</div>
|
||||||
|
<div className="text-sage">
|
||||||
|
<div>Monday - Friday: 8:00 AM - 6:00 PM</div>
|
||||||
|
<div>Saturday: By appointment</div>
|
||||||
|
<div>Sunday: Closed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Urgent IRS Alert */}
|
||||||
|
<Card className="rounded-2xl bg-destructive/10 border-destructive/20">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-destructive flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<div>
|
||||||
|
<h4 className="font-display font-semibold text-destructive mb-2">
|
||||||
|
Urgent IRS Matter?
|
||||||
|
</h4>
|
||||||
|
<p className="text-sage mb-4 text-sm">
|
||||||
|
If you're facing an IRS audit, notice, or other urgent tax matter, don't wait. Call us immediately for same-day response.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
className="rounded-xl"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
Call Now: (361) 854-3711
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full rounded-xl"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="mr-2 w-5 h-5" />
|
||||||
|
Call (361) 854-3711
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full rounded-xl"
|
||||||
|
>
|
||||||
|
<Calendar className="mr-2 w-5 h-5" />
|
||||||
|
Schedule Online
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<p className="text-center text-sm text-sage">
|
||||||
|
<strong>Response Time:</strong> Within 1 business day<br />
|
||||||
|
<strong>Consultation:</strong> Always free and confidential
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Map Section */}
|
||||||
|
<section className="py-16 bg-muted/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-8">
|
||||||
|
Visit Our Corpus Christi Office
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Placeholder for map - would integrate with Google Maps */}
|
||||||
|
<div className="bg-sage/20 rounded-2xl h-80 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<MapPin className="w-12 h-12 text-sage mx-auto mb-4" strokeWidth={1.5} />
|
||||||
|
<p className="text-sage">
|
||||||
|
Google Maps integration would go here<br />
|
||||||
|
Showing our Corpus Christi location
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sage mt-6">
|
||||||
|
Conveniently located to serve Corpus Christi and surrounding areas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contact;
|
||||||
|
|
@ -1,14 +1,27 @@
|
||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Hero from "@/components/Hero";
|
||||||
|
import WhyChooseUs from "@/components/WhyChooseUs";
|
||||||
|
import Services from "@/components/Services";
|
||||||
|
import Testimonials from "@/components/Testimonials";
|
||||||
|
import LeadMagnet from "@/components/LeadMagnet";
|
||||||
|
import CtaSection from "@/components/CtaSection";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
<div className="min-h-screen">
|
||||||
<div className="text-center">
|
<Navigation />
|
||||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
<main>
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
<Hero />
|
||||||
</div>
|
<WhyChooseUs />
|
||||||
|
<Services />
|
||||||
|
<Testimonials />
|
||||||
|
<LeadMagnet />
|
||||||
|
<CtaSection />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Home, ArrowLeft } from "lucide-react";
|
||||||
|
|
||||||
const NotFound = () => {
|
const NotFound = () => {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
@ -9,13 +11,41 @@ const NotFound = () => {
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-gray-100">
|
<div className="min-h-screen flex items-center justify-center bg-background px-4">
|
||||||
<div className="text-center">
|
<div className="text-center max-w-2xl mx-auto">
|
||||||
<h1 className="mb-4 text-4xl font-bold">404</h1>
|
<div className="mb-8">
|
||||||
<p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
|
<h1 className="text-9xl font-display font-bold text-brass mb-4">404</h1>
|
||||||
<a href="/" className="text-blue-500 underline hover:text-blue-700">
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-4">
|
||||||
Return to Home
|
Page Not Found
|
||||||
</a>
|
</h2>
|
||||||
|
<p className="text-body-lg text-sage mb-8 max-w-md mx-auto">
|
||||||
|
Sorry, we couldn't find the page you're looking for. It might have been moved or doesn't exist.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
onClick={() => window.history.back()}
|
||||||
|
variant="outline"
|
||||||
|
className="btn-shadow rounded-2xl"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="mr-2 w-5 h-5" />
|
||||||
|
Go Back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
onClick={() => window.location.href = '/'}
|
||||||
|
className="btn-shadow rounded-2xl"
|
||||||
|
>
|
||||||
|
<Home className="mr-2 w-5 h-5" />
|
||||||
|
Return Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sage/70 text-sm mt-8">
|
||||||
|
Need help? <a href="/contact" className="text-forest hover:text-brass gentle-transition underline">Contact us</a> or call <a href="tel:+13618543711" className="text-forest hover:text-brass gentle-transition underline">(361) 854-3711</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
BookOpen,
|
||||||
|
HelpCircle,
|
||||||
|
Calculator,
|
||||||
|
Newspaper,
|
||||||
|
Download,
|
||||||
|
ArrowRight,
|
||||||
|
Search
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const Resources = () => {
|
||||||
|
const resourceCategories = [
|
||||||
|
{
|
||||||
|
icon: BookOpen,
|
||||||
|
title: "Tax Guides",
|
||||||
|
description: "Comprehensive guides to help you understand tax requirements and opportunities.",
|
||||||
|
items: [
|
||||||
|
"2025 Tax Changes for Individuals",
|
||||||
|
"Small Business Tax Deduction Guide",
|
||||||
|
"Quarterly Tax Planning Checklist",
|
||||||
|
"Year-End Tax Strategies"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HelpCircle,
|
||||||
|
title: "Frequently Asked Questions",
|
||||||
|
description: "Quick answers to the most common tax and accounting questions.",
|
||||||
|
items: [
|
||||||
|
"When should I file my taxes?",
|
||||||
|
"What business expenses are deductible?",
|
||||||
|
"How do I handle an IRS audit?",
|
||||||
|
"Should I incorporate my business?"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: "Financial Calculators",
|
||||||
|
description: "Interactive tools to help you plan and make informed financial decisions.",
|
||||||
|
items: [
|
||||||
|
"Tax Withholding Calculator",
|
||||||
|
"Self-Employment Tax Calculator",
|
||||||
|
"Business Loan Payment Calculator",
|
||||||
|
"Retirement Savings Calculator"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Newspaper,
|
||||||
|
title: "Tax Insights & Updates",
|
||||||
|
description: "Stay informed with the latest tax law changes and strategic insights.",
|
||||||
|
items: [
|
||||||
|
"IRS Announces 2025 Tax Brackets",
|
||||||
|
"New Business Tax Credits Available",
|
||||||
|
"Estate Planning Updates",
|
||||||
|
"Cryptocurrency Tax Guidelines"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<main className="pt-16">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="py-24 bg-gradient-subtle relative overflow-hidden">
|
||||||
|
{/* Background watermark */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-5"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('/lovable-uploads/1a07e78f-6231-4fe2-af77-441f6a6ead7a.png')",
|
||||||
|
backgroundSize: "400px",
|
||||||
|
backgroundPosition: "center right",
|
||||||
|
backgroundRepeat: "no-repeat"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 relative z-10">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-display-xl font-display font-bold text-forest mb-6">
|
||||||
|
Resources & Updates
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-sage mb-8 leading-relaxed">
|
||||||
|
Access our comprehensive library of tax guides, calculators, FAQs, and the latest insights to help you stay informed and make confident financial decisions.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Newsletter Signup */}
|
||||||
|
<div className="bg-card rounded-2xl p-6 card-elevation max-w-md">
|
||||||
|
<h3 className="font-display font-semibold text-forest mb-4">
|
||||||
|
Get Monthly Tax Updates
|
||||||
|
</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Enter your email"
|
||||||
|
className="rounded-xl"
|
||||||
|
/>
|
||||||
|
<Button size="sm" className="rounded-xl">
|
||||||
|
Subscribe
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-sage mt-2">
|
||||||
|
No spam • Unsubscribe anytime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div className="bg-card rounded-2xl p-8 card-elevation">
|
||||||
|
<h3 className="font-display font-semibold text-forest mb-6 text-center">
|
||||||
|
Search Resources
|
||||||
|
</h3>
|
||||||
|
<div className="relative mb-6">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-sage w-5 h-5" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search guides, FAQs, calculators..."
|
||||||
|
className="pl-10 rounded-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm text-sage">Popular searches:</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{["Tax deadlines", "Deductions", "IRS audit", "Business formation"].map((term) => (
|
||||||
|
<button key={term} className="px-3 py-1 bg-muted rounded-full text-sm text-sage hover:bg-brass/20 hover:text-brass gentle-transition">
|
||||||
|
{term}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Resource Categories */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid md:grid-cols-2 gap-12">
|
||||||
|
{resourceCategories.map((category, index) => {
|
||||||
|
const Icon = category.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index} className="rounded-2xl card-elevation hover:shadow-lg gentle-transition">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center">
|
||||||
|
<Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-display-md font-display font-semibold text-forest">
|
||||||
|
{category.title}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sage mb-6 leading-relaxed">
|
||||||
|
{category.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
{category.items.map((item, itemIndex) => (
|
||||||
|
<div key={itemIndex} className="flex items-center justify-between group cursor-pointer">
|
||||||
|
<span className="text-sage group-hover:text-forest gentle-transition">
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
<ArrowRight className="w-4 h-4 text-sage group-hover:text-forest group-hover:translate-x-1 gentle-transition" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="outline" className="w-full">
|
||||||
|
View All {category.title}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Download */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-cream border-2 border-brass/30 rounded-2xl p-8 md:p-12 text-center card-elevation">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Download className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-display-lg font-display font-semibold text-forest mb-4">
|
||||||
|
2025 Tax Preparation Checklist
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
|
||||||
|
Get organized early with our comprehensive 15-page checklist covering all essential documents, deadlines, and new tax law changes for the 2025 filing season.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-6">
|
||||||
|
<Button size="lg" className="btn-shadow text-lg px-8 py-3 rounded-2xl">
|
||||||
|
<Download className="mr-2 w-5 h-5" />
|
||||||
|
Download Free PDF
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="lg" className="text-lg px-8 py-3 rounded-2xl">
|
||||||
|
Preview Checklist
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center gap-6 text-sm text-sage">
|
||||||
|
<span>✓ Individual & Business Items</span>
|
||||||
|
<span>✓ New 2025 Changes</span>
|
||||||
|
<span>✓ Important Deadlines</span>
|
||||||
|
<span>✓ Deduction Tracker</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* FAQ Schema would go here for SEO */}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Resources;
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
Calculator,
|
||||||
|
Users,
|
||||||
|
Shield,
|
||||||
|
Building,
|
||||||
|
CheckCircle2,
|
||||||
|
ArrowRight,
|
||||||
|
Phone
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const ServicesPage = () => {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: "Tax Preparation & Planning",
|
||||||
|
description: "Comprehensive tax services designed to maximize your deductions and minimize your liability.",
|
||||||
|
image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
|
||||||
|
features: [
|
||||||
|
"Individual and business tax returns",
|
||||||
|
"Quarterly estimated tax planning",
|
||||||
|
"Tax strategy optimization",
|
||||||
|
"Multi-state tax compliance",
|
||||||
|
"Audit-ready documentation",
|
||||||
|
"Year-round tax consultation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: "Accounting & Bookkeeping",
|
||||||
|
description: "Professional accounting services to keep your financial records accurate and up-to-date.",
|
||||||
|
image: "/lovable-uploads/1260e5db-df42-4f32-89c2-eecc054d669d.png",
|
||||||
|
features: [
|
||||||
|
"Monthly bookkeeping services",
|
||||||
|
"Financial statement preparation",
|
||||||
|
"Cash flow analysis and reporting",
|
||||||
|
"Bank reconciliation",
|
||||||
|
"Accounts payable/receivable management",
|
||||||
|
"QuickBooks setup and training"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Payroll Solutions",
|
||||||
|
description: "Complete payroll management ensuring compliance and accuracy for your team.",
|
||||||
|
features: [
|
||||||
|
"Full-service payroll processing",
|
||||||
|
"Tax withholding and remittance",
|
||||||
|
"Benefits administration support",
|
||||||
|
"Compliance with federal and state regulations",
|
||||||
|
"Employee self-service portals",
|
||||||
|
"Year-end reporting and W-2 preparation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: "IRS Representation",
|
||||||
|
description: "Expert advocacy and representation for all IRS matters and disputes.",
|
||||||
|
image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
|
||||||
|
features: [
|
||||||
|
"Audit representation and defense",
|
||||||
|
"Penalty abatement negotiations",
|
||||||
|
"Installment payment agreements",
|
||||||
|
"Offer in compromise submissions",
|
||||||
|
"Tax lien and levy resolution",
|
||||||
|
"Innocent spouse relief assistance"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Building,
|
||||||
|
title: "Business Consulting & Formation",
|
||||||
|
description: "Strategic guidance for business formation, growth, and operational optimization.",
|
||||||
|
features: [
|
||||||
|
"Entity selection and formation",
|
||||||
|
"Business valuation services",
|
||||||
|
"Operating agreement preparation",
|
||||||
|
"Strategic business planning",
|
||||||
|
"Merger and acquisition support",
|
||||||
|
"Financial analysis and projections"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<main className="pt-16">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="py-24 bg-gradient-subtle">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-display-xl font-display font-bold text-forest mb-6">
|
||||||
|
Comprehensive CPA Services for Your Financial Success
|
||||||
|
</h1>
|
||||||
|
<p className="text-body-lg text-sage max-w-3xl mx-auto mb-8">
|
||||||
|
From tax preparation to strategic business consulting, we provide the expertise and personalized service you need to achieve your financial goals.
|
||||||
|
</p>
|
||||||
|
<Button size="lg" className="btn-shadow">
|
||||||
|
<Phone className="mr-2 w-5 h-5" />
|
||||||
|
Schedule Free Consultation
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Grid */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="space-y-24">
|
||||||
|
{services.map((service, index) => {
|
||||||
|
const Icon = service.icon;
|
||||||
|
const isEven = index % 2 === 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={index} className={`grid lg:grid-cols-2 gap-16 items-center ${isEven ? '' : 'lg:grid-flow-dense'}`}>
|
||||||
|
{/* Image */}
|
||||||
|
{service.image && (
|
||||||
|
<div className={`${isEven ? '' : 'lg:col-start-2'}`}>
|
||||||
|
<img
|
||||||
|
src={service.image}
|
||||||
|
alt={`${service.title} illustration`}
|
||||||
|
className="rounded-2xl card-elevation w-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className={`${service.image ? (isEven ? '' : 'lg:col-start-1') : 'lg:col-span-2 max-w-4xl mx-auto'}`}>
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center">
|
||||||
|
<Icon className="w-8 h-8 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest">
|
||||||
|
{service.title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-sage mb-8 leading-relaxed">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-4 mb-8">
|
||||||
|
{service.features.map((feature, featureIndex) => (
|
||||||
|
<div key={featureIndex} className="flex items-center gap-3">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
|
||||||
|
<span className="text-sage">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button variant="outline" className="group">
|
||||||
|
Learn More
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 gentle-transition" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-24 bg-gradient-hero">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-cream mb-6">
|
||||||
|
Ready to Optimize Your Financial Strategy?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
|
||||||
|
Let's discuss how our comprehensive CPA services can help you achieve your business and personal financial goals.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="bg-cream text-forest hover:bg-cream/90 border-cream btn-shadow text-lg px-8 py-3 rounded-2xl"
|
||||||
|
>
|
||||||
|
Schedule Free Consultation
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
<Phone className="mr-2 w-5 h-5" />
|
||||||
|
Call (361) 854-3711
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServicesPage;
|
||||||
|
|
@ -0,0 +1,247 @@
|
||||||
|
import Navigation from "@/components/Navigation";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Star, Quote } from "lucide-react";
|
||||||
|
|
||||||
|
const TestimonialsPage = () => {
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
quote: "Greg's expertise saved us thousands during our audit. His calm approach and deep knowledge gave us complete confidence throughout the process. We couldn't have asked for better representation.",
|
||||||
|
initials: "M.R.",
|
||||||
|
name: "Michael R.",
|
||||||
|
role: "Small Business Owner",
|
||||||
|
business: "Construction Company",
|
||||||
|
rating: 5,
|
||||||
|
featured: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Twenty years of working with Greg, and he still finds new ways to optimize our tax strategy. Truly a partner in our business success. His proactive approach has saved us countless hours and dollars.",
|
||||||
|
initials: "D.S.",
|
||||||
|
name: "David S.",
|
||||||
|
role: "Real Estate Developer",
|
||||||
|
business: "Property Development",
|
||||||
|
rating: 5,
|
||||||
|
featured: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Professional, responsive, and incredibly thorough. Greg handles our family's complex tax situation with expertise we trust completely. He explains everything clearly and makes tax season stress-free.",
|
||||||
|
initials: "L.T.",
|
||||||
|
name: "Linda T.",
|
||||||
|
role: "Family Client",
|
||||||
|
business: "Personal Taxes",
|
||||||
|
rating: 5,
|
||||||
|
featured: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "When the IRS came knocking, Greg was our knight in shining armor. His representation was exceptional, and he negotiated a settlement we never thought possible.",
|
||||||
|
initials: "R.M.",
|
||||||
|
name: "Robert M.",
|
||||||
|
role: "Restaurant Owner",
|
||||||
|
business: "Food Service",
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Greg helped us choose the right business structure from day one. His guidance on entity selection and tax planning set us up for success from the start.",
|
||||||
|
initials: "S.P.",
|
||||||
|
name: "Sarah P.",
|
||||||
|
role: "Tech Entrepreneur",
|
||||||
|
business: "Software Startup",
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "The monthly bookkeeping service has been a game-changer for our practice. Clean books, timely reports, and valuable insights that help us make better business decisions.",
|
||||||
|
initials: "J.H.",
|
||||||
|
name: "Dr. Jennifer H.",
|
||||||
|
role: "Medical Practice Owner",
|
||||||
|
business: "Healthcare",
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Greg's payroll service is seamless and reliable. Never a missed deadline, always compliant, and frees us to focus on growing our business instead of paperwork.",
|
||||||
|
initials: "T.W.",
|
||||||
|
name: "Thomas W.",
|
||||||
|
role: "Manufacturing Manager",
|
||||||
|
business: "Manufacturing",
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "After years of doing our own taxes, switching to Greg was the best decision we made. His attention to detail caught deductions we'd been missing for years.",
|
||||||
|
initials: "A.K.",
|
||||||
|
name: "Andrea K.",
|
||||||
|
role: "Retired Couple",
|
||||||
|
business: "Personal Taxes",
|
||||||
|
rating: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote: "Greg's business consulting helped us navigate a complex acquisition. His financial analysis and strategic advice were invaluable throughout the entire process.",
|
||||||
|
initials: "M.D.",
|
||||||
|
name: "Mark D.",
|
||||||
|
role: "Business Owner",
|
||||||
|
business: "Retail Chain",
|
||||||
|
rating: 5
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const featuredTestimonials = testimonials.filter(t => t.featured);
|
||||||
|
const regularTestimonials = testimonials.filter(t => !t.featured);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Navigation />
|
||||||
|
<main className="pt-16">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="py-24 bg-gradient-subtle">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h1 className="text-display-xl font-display font-bold text-forest mb-6">
|
||||||
|
Client Success Stories
|
||||||
|
</h1>
|
||||||
|
<p className="text-body-lg text-sage max-w-3xl mx-auto mb-8">
|
||||||
|
For over 20 years, we've helped Corpus Christi families and businesses achieve financial clarity and success. Here's what our clients have to say about their experience.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Trust Stats */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-8 justify-center items-center text-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-display font-bold text-brass mb-1">500+</div>
|
||||||
|
<div className="text-sage">Happy Clients</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-display font-bold text-brass mb-1">99%</div>
|
||||||
|
<div className="text-sage">Client Retention</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-4xl font-display font-bold text-brass mb-1">20+</div>
|
||||||
|
<div className="text-sage">Years Experience</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Testimonials */}
|
||||||
|
<section className="py-24 bg-background">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
|
||||||
|
Featured Client Stories
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-8 mb-16">
|
||||||
|
{featuredTestimonials.map((testimonial, index) => (
|
||||||
|
<Card key={index} className="rounded-2xl card-elevation hover:shadow-lg gentle-transition">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
{/* Quote Icon */}
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Quote className="w-6 h-6 text-brass" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stars */}
|
||||||
|
<div className="flex gap-1 mb-6">
|
||||||
|
{[...Array(testimonial.rating)].map((_, i) => (
|
||||||
|
<Star key={i} className="w-5 h-5 fill-brass text-brass" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quote */}
|
||||||
|
<blockquote className="text-sage mb-6 leading-relaxed italic">
|
||||||
|
"{testimonial.quote}"
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
{/* Attribution */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-12 h-12 bg-brass/20 rounded-full flex items-center justify-center">
|
||||||
|
<span className="font-display font-semibold text-brass">
|
||||||
|
{testimonial.initials}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest">{testimonial.name}</div>
|
||||||
|
<div className="text-sm text-sage">{testimonial.role}</div>
|
||||||
|
<div className="text-xs text-sage/70">{testimonial.business}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* All Testimonials Grid */}
|
||||||
|
<section className="py-24 bg-muted/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
|
||||||
|
More Client Reviews
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{regularTestimonials.map((testimonial, index) => (
|
||||||
|
<Card key={index} className="rounded-2xl card-elevation bg-card">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* Stars */}
|
||||||
|
<div className="flex gap-1 mb-4">
|
||||||
|
{[...Array(testimonial.rating)].map((_, i) => (
|
||||||
|
<Star key={i} className="w-4 h-4 fill-brass text-brass" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quote */}
|
||||||
|
<blockquote className="text-sage mb-4 leading-relaxed text-sm italic">
|
||||||
|
"{testimonial.quote}"
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
{/* Attribution */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-brass/20 rounded-full flex items-center justify-center">
|
||||||
|
<span className="font-display font-semibold text-brass text-sm">
|
||||||
|
{testimonial.initials}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-forest text-sm">{testimonial.name}</div>
|
||||||
|
<div className="text-xs text-sage">{testimonial.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-24 bg-gradient-hero">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-display-lg font-display font-semibold text-cream mb-6">
|
||||||
|
Ready to Join Our Success Stories?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
|
||||||
|
Experience the same level of professional service and personalized attention that has earned us these testimonials for over 20 years.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<button className="bg-cream text-forest hover:bg-cream/90 btn-shadow text-lg px-8 py-3 rounded-2xl gentle-transition font-medium">
|
||||||
|
Schedule Free Consultation
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="border border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl gentle-transition"
|
||||||
|
onClick={() => window.open('tel:+13618543711')}
|
||||||
|
>
|
||||||
|
Call (361) 854-3711
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-cream/70 text-sm mt-6">
|
||||||
|
Join hundreds of satisfied clients • Same-day response guaranteed
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestimonialsPage;
|
||||||
|
|
@ -13,6 +13,10 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
'display': ['Playfair Display', 'serif'],
|
||||||
|
'body': ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
border: "hsl(var(--border))",
|
border: "hsl(var(--border))",
|
||||||
input: "hsl(var(--input))",
|
input: "hsl(var(--input))",
|
||||||
|
|
@ -47,16 +51,12 @@ export default {
|
||||||
DEFAULT: "hsl(var(--card))",
|
DEFAULT: "hsl(var(--card))",
|
||||||
foreground: "hsl(var(--card-foreground))",
|
foreground: "hsl(var(--card-foreground))",
|
||||||
},
|
},
|
||||||
sidebar: {
|
// Custom brand colors
|
||||||
DEFAULT: "hsl(var(--sidebar-background))",
|
cream: "hsl(var(--cream))",
|
||||||
foreground: "hsl(var(--sidebar-foreground))",
|
forest: "hsl(var(--forest))",
|
||||||
primary: "hsl(var(--sidebar-primary))",
|
sage: "hsl(var(--sage))",
|
||||||
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
|
brass: "hsl(var(--brass))",
|
||||||
accent: "hsl(var(--sidebar-accent))",
|
ink: "hsl(var(--ink))",
|
||||||
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
|
|
||||||
border: "hsl(var(--sidebar-border))",
|
|
||||||
ring: "hsl(var(--sidebar-ring))",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
lg: "var(--radius)",
|
lg: "var(--radius)",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue