import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Phone, MessageCircle } from "lucide-react";

export default function Website() { return ( <div className="min-h-screen bg-gray-50 text-gray-800"> {/* Header */} <header className="bg-black text-white p-6 flex justify-between items-center"> <h1 className="text-2xl font-bold">Assured Drop Gates and Garage</h1> <div className="flex gap-4"> <a href="tel:0658123926"> <Button className="flex items-center gap-2"> <Phone size={16} /> Call Now </Button> </a> <a href="https://wa.me/27658123926"> <Button className="bg-green-600 flex items-center gap-2"> <MessageCircle size={16} /> WhatsApp </Button> </a> </div> </header>

{/* Hero Section */}
  <section className="text-center py-16 bg-gradient-to-r from-gray-900 to-gray-700 text-white">
    <h2 className="text-4xl font-bold mb-4">
      Professional Gate, Garage & CCTV Solutions
    </h2>
    <p className="text-lg mb-6">
      Installation & Repairs You Can Trust
    </p>
    <a href="https://wa.me/27658123926">
      <Button className="bg-green-500 text-lg px-6 py-3">
        Get a Free Quote
      </Button>
    </a>
  </section>

  {/* Services */}
  <section className="p-10 grid md:grid-cols-3 gap-6">
    <Card className="rounded-2xl shadow