First commit

dev/b2in-layout-v10/src/components/SpotlightsSection.tsx

@@ -0,0 +1,55 @@
+import { MapPin, Star, Clock } from "lucide-react";
+
+const SpotlightsSection = () => {
+  const spotlights = [
+    {
+      icon: MapPin,
+      title: "Prime Locations",
+      description: "Strategically located properties in the heart of major cities and tourist destinations worldwide."
+    },
+    {
+      icon: Star,
+      title: "Premium Service",
+      description: "Exceptional hospitality with personalized service tailored to exceed your expectations every time."
+    },
+    {
+      icon: Clock,
+      title: "Instant Booking",
+      description: "Book instantly with real-time availability and immediate confirmation for a seamless experience."
+    }
+  ];
+
+  return (
+    <section className="py-16 lg:py-24 bg-muted/20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Title */}
+        <div className="text-center mb-16">
+          <h2 className="text-section-title">spotlights</h2>
+          <p className="text-muted-foreground text-lg mt-4 max-w-2xl mx-auto">
+            Discover what makes our accommodation service stand out from the rest
+          </p>
+        </div>
+        
+        {/* Spotlights Grid */}
+        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
+          {spotlights.map((spotlight, index) => (
+            <div key={index} className="text-center space-y-6 group">
+              <div className="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
+                <spotlight.icon className="w-10 h-10 text-secondary" />
+              </div>
+              
+              <div className="space-y-4">
+                <h3 className="text-xl font-medium">{spotlight.title}</h3>
+                <p className="text-muted-foreground leading-relaxed">
+                  {spotlight.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SpotlightsSection;