Update components/story.tsx

components/story.tsx

@@ -0,0 +1,64 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import Image from "next/image";
+
+export function Story() {
+  return (
+    <section id="story" className="py-24 bg-stone-100">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="order-2 lg:order-1 relative h-[600px] rounded-2xl overflow-hidden">
+            <Image 
+              src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?q=80&w=2078&auto=format&fit=crop"
+              alt="Coffee Plantation in Quindío"
+              fill
+              className="object-cover"
+            />
+            <div className="absolute bottom-8 left-8 right-8 bg-white/90 backdrop-blur p-6 rounded-xl shadow-lg">
+              <p className="text-stone-800 font-medium italic">
+                "It started in a small house with three people and a dream to share the soul of Quindío."
+              </p>
+              <p className="text-stone-500 text-sm mt-2">— Nubia Motta Camargo, Founder</p>
+            </div>
+          </div>
+          
+          <div className="order-1 lg:order-2">
+            <Heading className="mb-6">30 Years of Heritage</Heading>
+            <Subheading className="text-stone-600 mb-8">
+              Founded in Armenia, Quindío, Café Quindío is more than just a coffee brand. 
+              It's a tribute to the coffee-growing culture of Colombia.
+            </Subheading>
+            
+            <div className="space-y-6">
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">1</div>
+                <div>
+                  <h4 className="text-xl font-bold text-stone-900">Direct from Origin</h4>
+                  <p className="text-stone-600">We ship directly from our roasting facilities in Colombia to ensure maximum freshness and quality.</p>
+                </div>
+              </div>
+              
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">2</div>
+                <div>
+                  <h4 className="text-xl font-bold text-stone-900">Sustainable Innovation</h4>
+                  <p className="text-stone-600">From biodegradable pods to eco-conscious roasting, we honor the land that gives us our beans.</p>
+                </div>
+              </div>
+              
+              <div className="flex gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold">3</div>
+                <div>
+                  <h4 className="text-xl font-bold text-stone-900">Social Responsibility</h4>
+                  <p className="text-stone-600">Supporting local growers and their families is at the core of every cup we serve.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}