Build Greg Knopp CPA website

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;