Build Greg Knopp CPA website

src/components/CtaSection.tsx

@@ -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;

src/components/Footer.tsx

@@ -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;

src/components/Hero.tsx

@@ -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;

src/components/LeadMagnet.tsx

@@ -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;

src/components/Navigation.tsx

@@ -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;

src/components/Services.tsx

@@ -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;

src/components/Testimonials.tsx

@@ -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;

src/components/WhyChooseUs.tsx

@@ -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;