Untitled

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, PlayCircle, ShieldCheck, Users } from "lucide-react";
import { motion } from "framer-motion";

export default function BuilderAllyLandingPage() {
  return (
    <div className="max-w-6xl mx-auto p-6 space-y-12">
      {/* Hero Section */}
      <section className="text-center space-y-6">
        <h1 className="text-4xl font-bold">The Smarter Way to Manage Your Custom Home Build</h1>
        <p className="text-lg text-gray-600">
          Track progress, manage budgets, and stay compliant—all in one place.
        </p>
        <div className="flex justify-center space-x-4">
          <Button className="px-6 py-3 text-lg">Get Started Free</Button>
          <Button variant="outline" className="px-6 py-3 text-lg flex items-center">
            <PlayCircle className="mr-2" /> Watch Demo
          </Button>
        </div>
      </section>

      {/* Features Section */}
      <section className="grid md:grid-cols-2 gap-6">
        {["Track Projects in Real-Time", "Budget Transparency", "Seamless Communication", "OSHA Compliance Built-In"].map((feature) => (
          <Card key={feature} className="p-4 flex items-center space-x-4">
            <CheckCircle className="text-blue-500 w-6 h-6" />
            <p className="text-lg font-semibold">{feature}</p>
          </Card>
        ))}
      </section>

      {/* Impact Stats Section */}
      <section className="text-center space-y-4">
        <h2 className="text-2xl font-bold">The Numbers Speak for Themselves</h2>
        <div className="grid grid-cols-3 gap-6 text-center">
          {[{ stat: "30%", label: "Faster Project Completion" },
            { stat: "50%", label: "Fewer Communication Delays" },
            { stat: "$X Million", label: "Managed in Home Projects" }].map(({ stat, label }) => (
            <div key={stat} className="p-4 bg-gray-100 rounded-lg">
              <p className="text-3xl font-bold text-blue-500">{stat}</p>
              <p className="text-gray-600">{label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Testimonials */}
      <section className="text-center space-y-6">
        <h2 className="text-2xl font-bold">What Homeowners & Builders Say</h2>
        <div className="grid md:grid-cols-2 gap-6">
          {["BuilderAlly cut our communication time in half!", "Now I always know where my project stands!"].map((quote, index) => (
            <Card key={index} className="p-4">
              <p className="text-lg italic">“{quote}”</p>
              <p className="text-gray-600">- John, Project Manager</p>
            </Card>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="text-center space-y-4">
        <h2 className="text-2xl font-bold">Ready to Build with Confidence?</h2>
        <Button className="px-6 py-3 text-lg">Get Started Free</Button>
      </section>
    </div>
  );
}