From 4a5f1edc7a8d7d881ae4cb7bc2da3959b1f323cd Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:29:44 +0000
Subject: [PATCH] Update components/highlights.tsx

---
 components/highlights.tsx | 48 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/highlights.tsx

diff --git a/components/highlights.tsx b/components/highlights.tsx
new file mode 100644
index 0000000..61ee061
--- /dev/null
+++ b/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>
+  );
+}