src/App.tsx

@@ -2,7 +2,7 @@ import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactFormMap from '@/components/sections/contact/ContactFormMap';
 import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
 import FooterBasic from '@/components/sections/footer/FooterBasic';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import ImageSlider from '@/components/sections/hero/ImageSlider';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
 import { Clock, Flame, Wheat } from "lucide-react";
@@ -27,20 +27,41 @@ export default function App() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          tag="Freshly Baked Every Morning"
-          title="Artisanal Breads & Pastries"
-          description="Experience the warmth of traditional baking. We use only organic, locally-sourced ingredients to craft our daily fresh sourdough, croissants, and gourmet desserts."
-          primaryButton={{
-            text: "Browse Menu",            href: "#features"}}
-          secondaryButton={{
-            text: "Visit Us",            href: "#contact"}}
-          imageSrcs={[
-            "https://images.unsplash.com/photo-1681838675911-625ee52549f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNHx8YmFrZXJ5JTIwd2luZG93JTIwd2l0aCUyMHdhcm0lMjBsaWdodGluZ3xlbnwxfDB8fHwxNzc2MjUzMTMzfDA&ixlib=rb-4.1.0&q=80&w=1080",
-            "https://images.unsplash.com/photo-1568254183919-78a4f43a2877?q=80&w=1080&auto=format&fit=crop",
-            "https://images.unsplash.com/photo-1555507036-ab1f4038808a?q=80&w=1080&auto=format&fit=crop"
-          ]}
-        />
+        <section className="py-20">
+          <div className="w-content-width mx-auto grid md:grid-cols-2 gap-12 items-center">
+            <div className="flex flex-col gap-4 items-start text-left">
+              <span className="px-3 py-1 text-sm card rounded">Freshly Baked Every Morning</span>
+              <h1 className="text-6xl font-medium text-balance">Artisanal Breads & Pastries</h1>
+              <p className="text-lg leading-tight">
+                Experience the warmth of traditional baking. We use only organic, locally-sourced ingredients to craft our daily fresh sourdough, croissants, and gourmet desserts.
+              </p>
+              <div className="flex flex-wrap gap-3 mt-2">
+                <a href="#features" className="primary-button px-6 py-3 rounded-lg text-primary-cta-text inline-block">
+                  Browse Menu
+                </a>
+                <a href="#contact" className="secondary-button px-6 py-3 rounded-lg text-secondary-cta-text inline-block">
+                  Visit Us
+                </a>
+              </div>
+            </div>
+            <div className="hero-image-container h-96 md:h-[500px]">
+              <div className="flip-card h-full">
+                <div className="flip-card-front">
+                  <ImageSlider
+                    imageSrcs={[
+                      "https://images.unsplash.com/photo-1681838675911-625ee52549f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNHx8YmFrZXJ5JTIwd2luZG93JTIwd2l0aCUyMHdhcm0lMjBsaWdodGluZ3xlbnwxfDB8fHwxNzc2MjUzMTMzfDA&ixlib=rb-4.1.0&q=80&w=1080",
+                      "https://images.unsplash.com/photo-1568254183919-78a4f43a2877?q=80&w=1080&auto=format&fit=crop",
+                      "https://images.unsplash.com/photo-1555507036-ab1f4038808a?q=80&w=1080&auto=format&fit=crop",
+                    ]}
+                  />
+                </div>
+                <div className="flip-card-back">
+                  <p className="font-medium">Artisan Bakery</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
       </div>
 
       <div id="about" data-section="about">

src/components/sections/hero/ImageSlider.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+type ImageSliderProps = {
+  imageSrcs: string[];
+  interval?: number;
+};
+
+const ImageSlider = ({ imageSrcs, interval = 3000 }: ImageSliderProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % imageSrcs.length);
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [imageSrcs.length, interval]);
+
+  return (
+    <div className="relative w-full h-full overflow-hidden">
+      {imageSrcs.map((src, index) => (
+        <img
+          key={src}
+          src={src}
+          alt={`Slide ${index + 1}`}
+          className={`absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out ${
+            index === currentIndex ? "opacity-100" : "opacity-0"
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ImageSlider;

src/index.css

@@ -142,6 +142,10 @@ body {
   overscroll-behavior-y: none;
 }
 
+.hero-image-container {
+  perspective: 1000px;
+}
+
 h1,
 h2,
 h3,

src/styles/animations.css

@@ -169,3 +169,37 @@
 .animate-slide {
   animation: slide 30s linear infinite;
 }
+
+/* Flip card effect */
+.flip-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.hero-image-container:hover .flip-card {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front,
+.flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+  background-color: var(--card);
+  color: var(--foreground);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--text-2xl);
+}