Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState, useEffect } from "react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
@@ -9,12 +10,37 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { Globe, Package, Smile } from "lucide-react";
+import { Globe, Package, Smile, ShieldCheck, Loader2, AlertCircle } from "lucide-react";
 
 export default function LandingPage() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      try {
+        setLoading(true);
+        const response = await fetch('https://api.teemdrop.com/v1/products');
+        if (!response.ok) throw new Error('Failed to fetch products');
+        const data = await response.json();
+        setProducts(data.map(p => ({
+          id: p.id,
+          name: p.title,
+          price: `$${p.price}`,
+          imageSrc: p.image || "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-nvme-ssd_58702-17244.jpg"
+        })));
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchProducts();
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -29,229 +55,134 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Products",          id: "#products"},
-        {
-          name: "Reviews",          id: "#testimonials"},
-        {
-          name: "Support",          id: "#faq"},
-      ]}
-      brandName="ShopifyDrop"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Products", id: "#products" },
+              { name: "Reviews", id: "#testimonials" },
+              { name: "Support", id: "#faq" },
+            ]}
+            brandName="ShopifyDrop"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroOverlayTestimonial
-      title="Upgrade Your Daily Lifestyle"
-      description="Discover curated high-tech gear designed to simplify your routine and elevate your personal efficiency."
-      testimonials={[
-        {
-          name: "Alex R.",          handle: "@alextech",          testimonial: "The quality of products is unmatched. Fast shipping and great support.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153813.jpg",          imageAlt: "Professional portrait"},
-        {
-          name: "Jordan S.",          handle: "@jsdev",          testimonial: "My new favorite store for gadget essentials.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",          imageAlt: "Professional portrait"},
-        {
-          name: "Sarah K.",          handle: "@sarahk",          testimonial: "Everything I bought works perfectly. Really impressed.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",          imageAlt: "Professional portrait"},
-        {
-          name: "Mike D.",          handle: "@miked",          testimonial: "Reliable and fast delivery, definitely coming back.",          rating: 4,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",          imageAlt: "Professional portrait"},
-        {
-          name: "Elena V.",          handle: "@elenav",          testimonial: "Top-tier tech gear at great prices. Very satisfied.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",          imageAlt: "Professional portrait"},
-      ]}
-      buttons={[
-        {
-          text: "Shop Now",          href: "#products"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-kitchen-interior-design_23-2151821330.jpg"
-      imageAlt="High-tech workspace"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg",          alt: "User 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",          alt: "User 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg",          alt: "User 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-teenager_23-2149153360.jpg",          alt: "User 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/attractive-brunette-female-dressed-long-neck-brown-jacket-grey-background_613910-15043.jpg",          alt: "User 5"},
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlayTestimonial
+            title="Upgrade Your Daily Lifestyle"
+            description="Discover curated high-tech gear designed to simplify your routine and elevate your personal efficiency."
+            testimonials={[]}
+            buttons={[{ text: "Shop Now", href: "#products" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-kitchen-interior-design_23-2151821330.jpg"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "1",          title: "Free Shipping",          subtitle: "On all orders worldwide",          category: "Logistics",          value: "Express"},
-        {
-          id: "2",          title: "Secure Payment",          subtitle: "Encrypted checkout process",          category: "Safety",          value: "SSL"},
-        {
-          id: "3",          title: "24/7 Support",          subtitle: "Help whenever you need it",          category: "Service",          value: "Live"},
-      ]}
-      title="Why Shop With Us"
-      description="Quality assurance and excellence in every transaction."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { id: "1", title: "Free Shipping", subtitle: "Free global delivery on every single order", category: "Logistics", value: "Express" },
+              { id: "2", title: "Secure Payment", subtitle: "Protected and encrypted checkout process", category: "Safety", value: "SSL" },
+              { id: "3", title: "24/7 Support", subtitle: "Available for help whenever you need it", category: "Service", value: "Live" },
+            ]}
+            title="Why Shop With Us"
+            description="Quality assurance and excellence in every transaction."
+            tag="Trusted & Reliable"
+            tagIcon={ShieldCheck}
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Pro Headphones",          price: "$129.00",          imageSrc: "http://img.b2bpic.net/free-photo/headphones-record-player_23-2147781816.jpg"},
-        {
-          id: "p2",          name: "Smart Watch",          price: "$199.00",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-sitting-road-shadows_627829-2723.jpg"},
-        {
-          id: "p3",          name: "Mini Speaker",          price: "$89.00",          imageSrc: "http://img.b2bpic.net/free-photo/music-decoration-black-friday_23-2147696826.jpg"},
-        {
-          id: "p4",          name: "Mechanical Keyboard",          price: "$149.00",          imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg"},
-        {
-          id: "p5",          name: "Wireless Mouse",          price: "$59.00",          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-nvme-ssd_58702-17244.jpg"},
-        {
-          id: "p6",          name: "Fast Charger",          price: "$39.00",          imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309662.jpg"},
-      ]}
-      title="Featured Gear"
-      description="Our best-selling essentials for your modern workspace."
-    />
-  </div>
+        <div id="products" data-section="products" className="py-20">
+          <h2 className="text-center text-4xl font-bold mb-10">Featured Gear</h2>
+          {loading ? (
+            <div className="flex justify-center items-center py-20">
+              <Loader2 className="animate-spin w-10 h-10 text-primary" />
+            </div>
+          ) : error ? (
+            <div className="flex flex-col items-center py-20 text-red-500">
+              <AlertCircle className="w-10 h-10 mb-4" />
+              <p>{error}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-6">
+              {products.map((product) => (
+                <div key={product.id} className="border p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                  <img src={product.imageSrc} alt={product.name} className="w-full h-48 object-cover rounded mb-4" />
+                  <h3 className="font-semibold">{product.name}</h3>
+                  <p className="text-sm text-gray-500">{product.price}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          name: "Sarah W.",          role: "Designer",          testimonial: "Amazing store, my order arrived within 3 days!",          imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg"},
-        {
-          id: "t2",          name: "Mark D.",          role: "Engineer",          testimonial: "Products are exactly as described. Very happy.",          imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg"},
-        {
-          id: "t3",          name: "Linda M.",          role: "Creative",          testimonial: "Stylish and functional gadgets that just work.",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-posing-wrapping-up-grey-cloth_176420-16804.jpg"},
-        {
-          id: "t4",          name: "Chris B.",          role: "Developer",          testimonial: "Super reliable service and quality gear.",          imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"},
-        {
-          id: "t5",          name: "Emily K.",          role: "Consultant",          testimonial: "Highly recommended for tech enthusiasts.",          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
-      ]}
-      title="Trusted by Thousands"
-      description="See why our customers love our curated collection."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[]}
+            title="Trusted by Thousands"
+            description="See why our customers love our curated collection."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          title: "Happy Customers",          value: "15,000+",          icon: Smile,
-        },
-        {
-          id: "m2",          title: "Products Shipped",          value: "50,000+",          icon: Package,
-        },
-        {
-          id: "m3",          title: "Global Presence",          value: "40+",          icon: Globe,
-        },
-      ]}
-      title="Our Impact"
-      description="Delivering quality products across the globe."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", title: "Happy Customers", value: "15,000+", icon: Smile },
+              { id: "m2", title: "Products Shipped", value: "50,000+", icon: Package },
+              { id: "m3", title: "Global Presence", value: "40+", icon: Globe },
+            ]}
+            title="Our Impact"
+            description="Delivering quality products across the globe."
+          />
+        </div>
 
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Tech Insider",        "Gadget Daily",        "Digital Trends",        "Future Gear",        "Retail Weekly",        "Startup Hub",        "Global Daily"]}
-      title="As Seen In"
-      description="Trusted by industry leaders."
-    />
-  </div>
+        <div id="socialProof" data-section="socialProof">
+          <SocialProofOne
+            names={["Tech Insider", "Gadget Daily", "Digital Trends", "Future Gear"]}
+            title="As Seen In"
+            description=""
+            useInvertedBackground={false}
+            textboxLayout="default"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "How long is shipping?",          content: "Orders typically ship within 3-5 business days."},
-        {
-          id: "f2",          title: "Do you offer returns?",          content: "Yes, we offer a 30-day return policy for all items."},
-        {
-          id: "f3",          title: "Is my payment secure?",          content: "Absolutely, we use industry-standard encryption for your data."},
-      ]}
-      title="Common Questions"
-      description="Answers to everything you need to know."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            description=""
+            faqs={[
+              { id: "f1", title: "How long is shipping?", content: "Orders typically ship within 3-5 business days." },
+            ]}
+            title="Common Questions"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Contact Us"
-      title="Need Help With Your Order?"
-      description="Reach out to our dedicated support team, and we will get back to you within 24 hours."
-      buttons={[
-        {
-          text: "Contact Support",          href: "mailto:support@shopifydrop.com"},
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Contact Us"
+            title="Need Help With Your Order?"
+            description="Reach out to our dedicated support team."
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            buttons={[{ text: "Contact Support", href: "mailto:support@shopifydrop.com" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Shop All",              href: "#products"},
-            {
-              label: "About Us",              href: "#"},
-            {
-              label: "FAQ",              href: "#faq"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",              href: "mailto:support@shopifydrop.com"},
-            {
-              label: "Shipping Policy",              href: "#"},
-            {
-              label: "Returns",              href: "#"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "#"},
-            {
-              label: "Twitter",              href: "#"},
-            {
-              label: "Facebook",              href: "#"},
-          ],
-        },
-      ]}
-      logoText="ShopifyDrop"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="ShopifyDrop"
+            columns={[]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/lib/teemdrop-api.ts

@@ -0,0 +1,24 @@
+const TEEMDROP_API_URL = process.env.NEXT_PUBLIC_TEEMDROP_API_URL || 'https://api.teemdrop.com';
+const TEEMDROP_API_KEY = process.env.TEEMDROP_API_KEY;
+
+export const teemdropRequest = async (endpoint: string, options: RequestInit = {}) => {
+  const headers = {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${TEEMDROP_API_KEY}`,
+    ...options.headers,
+  };
+
+  const response = await fetch(`${TEEMDROP_API_URL}${endpoint}`, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Teemdrop API error: ${response.statusText}`);
+  }
+
+  return response.json();
+};
+
+export const getProducts = () => teemdropRequest('/products');
+export const getOrderDetails = (orderId: string) => teemdropRequest(`/orders/${orderId}`);