Update components/highlights.tsx

components/highlights.tsx

@@ -0,0 +1,48 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Utensils, Heart, Users, Clock } from "lucide-react";
+
+const highlights = [
+  {
+    title: "Fresh & Authentic",
+    description: "Traditional Jamaican cuisine prepared daily with the freshest ingredients.",
+    icon: <Utensils className="h-8 w-8 text-[#ff8c00]" />,
+  },
+  {
+    title: "Famous Curry Goat",
+    description: "Our signature dish, slow-cooked to perfection with bold island spices.",
+    icon: <Heart className="h-8 w-8 text-[#ff8c00]" />,
+  },
+  {
+    title: "Loved by Locals",
+    description: "A trusted favorite for years, serving both our community and visitors.",
+    icon: <Users className="h-8 w-8 text-[#ff8c00]" />,
+  },
+  {
+    title: "Years of Flavor",
+    description: "Decades of experience in crafting the perfect Jamaican curry experience.",
+    icon: <Clock className="h-8 w-8 text-[#ff8c00]" />,
+  },
+];
+
+export function Highlights() {
+  return (
+    <section className="py-20 bg-white">
+      <Container>
+        <Heading className="text-center mb-16">Why Sharmz Curry Pot?</Heading>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {highlights.map((item, index) => (
+            <Card key={index} className="border-none shadow-lg bg-neutral-50">
+              <CardHeader className="text-center">
+                <div className="flex justify-center mb-4">{item.icon}</div>
+                <CardTitle className="text-xl mb-2">{item.title}</CardTitle>
+                <CardDescription className="text-neutral-600">{item.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}