Update src/app/page.tsx

Merge version_2 into main

src/app/order/page.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Mail, Linkedin, ShoppingCart, Fish, Truck, Package } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+interface OrderItem {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+  image: string;
+}
+
+export default function OrderPage() {
+  const [orderItems, setOrderItems] = useState<OrderItem[]>([
+    {
+      id: "1",      name: "Goldfood Salmon Premium Loin - 200g",      price: 24.99,
+      quantity: 0,
+      image: "http://img.b2bpic.net/free-photo/close-up-picture-red-fish-slices_259150-58650.jpg?_wi=1"},
+    {
+      id: "2",      name: "Goldfood Salmon Portions - 150g x 4",      price: 18.99,
+      quantity: 0,
+      image: "http://img.b2bpic.net/free-photo/high-angle-fish-slate-with-cutlery_23-2148643612.jpg"},
+    {
+      id: "3",      name: "Premium Seafood Selection Box",      price: 34.99,
+      quantity: 0,
+      image: "http://img.b2bpic.net/free-photo/top-view-fish-ready-be-cooked_23-2150239066.jpg"},
+    {
+      id: "4",      name: "Chef Special - Sea Bass Fillets",      price: 29.99,
+      quantity: 0,
+      image: "http://img.b2bpic.net/free-photo/front-view-chef-apron-putting-raw-fish-chopping-board-pepper-grinder-pomegranate-seeds-bowl-table_179666-44288.jpg"},
+  ]);
+
+  const [email, setEmail] = useState("");
+  const [address, setAddress] = useState("");
+  const [city, setCity] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [phone, setPhone] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const updateQuantity = (id: string, quantity: number) => {
+    setOrderItems(
+      orderItems.map((item) =>
+        item.id === id ? { ...item, quantity: Math.max(0, quantity) } : item
+      )
+    );
+  };
+
+  const totalPrice = orderItems.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0
+  );
+
+  const handleSubmitOrder = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const orderData = {
+      email,
+      address,
+      city,
+      postalCode,
+      phone,
+      items: orderItems.filter((item) => item.quantity > 0),
+      totalPrice,
+    };
+
+    console.log("Order submitted:", orderData);
+    setSubmitted(true);
+
+    setTimeout(() => {
+      setSubmitted(false);
+      setEmail("");
+      setAddress("");
+      setCity("");
+      setPostalCode("");
+      setPhone("");
+      setOrderItems(orderItems.map((item) => ({ ...item, quantity: 0 })));
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Assortiment", id: "/" },
+            { name: "Waarom Goldfood", id: "/" },
+            { name: "Voor Wie", id: "/" },
+            { name: "Hoe het Werkt", id: "/" },
+            { name: "Bestellen", id: "/order" },
+            { name: "Contact", id: "/" },
+          ]}
+          button={{ text: "Vraag Prijs & Sample", href: "/" }}
+          brandName="Goldfood"
+        />
+      </div>
+
+      <main className="min-h-screen bg-[var(--background)] pt-20 pb-12">
+        <div className="max-w-7xl mx-auto px-4 md:px-6">
+          {/* Page Header */}
+          <div className="mb-12 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold text-[var(--foreground)] mb-4">
+              Direct Bestellen
+            </h1>
+            <p className="text-lg text-[var(--foreground)]/70">
+              Premium seafood direct naar uw deur. Kies uw producten en plaats uw bestelling.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 mb-12">
+            {/* Logo Display */}
+            <div className="md:col-span-3 flex justify-center mb-8">
+              <div className="bg-[var(--card)] rounded-lg p-8 w-full md:w-96">
+                <Image
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW4PXB76rZD9PAaiHKWMP6l5cV/uploaded-1772696602957-r2y45bmq.png"
+                  alt="Goldfood Logo"
+                  width={300}
+                  height={200}
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+
+            {/* Product Selection */}
+            <div className="md:col-span-2">
+              <div className="bg-[var(--card)] rounded-lg p-6 md:p-8">
+                <h2 className="text-2xl font-bold text-[var(--foreground)] mb-6 flex items-center gap-2">
+                  <ShoppingCart className="w-6 h-6" />
+                  Producten
+                </h2>
+                <div className="space-y-6">
+                  {orderItems.map((item) => (
+                    <div
+                      key={item.id}
+                      className="flex gap-4 pb-6 border-b border-[var(--accent)]/20 last:border-b-0 last:pb-0"
+                    >
+                      <div className="w-24 h-24 relative flex-shrink-0 rounded-lg overflow-hidden bg-[var(--background)]">
+                        <Image
+                          src={item.image}
+                          alt={item.name}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="font-semibold text-[var(--foreground)] mb-1">
+                          {item.name}
+                        </h3>
+                        <p className="text-lg font-bold text-[var(--primary-cta)] mb-3">
+                          €{item.price.toFixed(2)}
+                        </p>
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() =>
+                              updateQuantity(
+                                item.id,
+                                item.quantity - 1
+                              )
+                            }
+                            className="px-3 py-1 bg-[var(--background)] text-[var(--foreground)] rounded hover:bg-[var(--accent)]/10 transition"
+                          >
+                            −
+                          </button>
+                          <input
+                            type="number"
+                            value={item.quantity}
+                            onChange={(e) =>
+                              updateQuantity(
+                                item.id,
+                                parseInt(e.target.value) || 0
+                              )
+                            }
+                            className="w-12 text-center px-2 py-1 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20"
+                            min="0"
+                          />
+                          <button
+                            onClick={() =>
+                              updateQuantity(
+                                item.id,
+                                item.quantity + 1
+                              )
+                            }
+                            className="px-3 py-1 bg-[var(--background)] text-[var(--foreground)] rounded hover:bg-[var(--accent)]/10 transition"
+                          >
+                            +
+                          </button>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-bold text-[var(--foreground)]">
+                          €{(item.price * item.quantity).toFixed(2)}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Order Summary */}
+                <div className="mt-8 pt-6 border-t border-[var(--accent)]/20">
+                  <div className="flex justify-between items-center mb-4">
+                    <span className="text-[var(--foreground)]/70">Subtotaal:</span>
+                    <span className="font-semibold">€{totalPrice.toFixed(2)}</span>
+                  </div>
+                  <div className="flex justify-between items-center mb-4">
+                    <span className="text-[var(--foreground)]/70">Verzending:</span>
+                    <span className="font-semibold">Gratis (NL)</span>
+                  </div>
+                  <div className="flex justify-between items-center pt-4 border-t border-[var(--accent)]/20">
+                    <span className="font-bold text-lg">Totaal:</span>
+                    <span className="font-bold text-xl text-[var(--primary-cta)]">
+                      €{totalPrice.toFixed(2)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Delivery Information */}
+            <div className="md:col-span-1">
+              <div className="bg-[var(--card)] rounded-lg p-6">
+                <h3 className="text-lg font-bold text-[var(--foreground)] mb-4 flex items-center gap-2">
+                  <Truck className="w-5 h-5" />
+                  Levering
+                </h3>
+                <div className="space-y-3 text-sm text-[var(--foreground)]/70">
+                  <div>
+                    <p className="font-semibold text-[var(--foreground)]">Snelle bezorging</p>
+                    <p>Binnen 1-2 werkdagen</p>
+                  </div>
+                  <div>
+                    <p className="font-semibold text-[var(--foreground)]">Verzending</p>
+                    <p>Gekoeld & verzegeld</p>
+                  </div>
+                  <div>
+                    <p className="font-semibold text-[var(--foreground)]">Regio</p>
+                    <p>Heel Nederland</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Order Form */}
+          <div className="bg-[var(--card)] rounded-lg p-6 md:p-8">
+            <h2 className="text-2xl font-bold text-[var(--foreground)] mb-6 flex items-center gap-2">
+              <Package className="w-6 h-6" />
+              Afleveradres
+            </h2>
+            <form onSubmit={handleSubmitOrder}>
+              <div className="grid md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label className="block text-sm font-semibold text-[var(--foreground)] mb-2">
+                    E-mailadres *
+                  </label>
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]"
+                    placeholder="uw@email.com"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold text-[var(--foreground)] mb-2">
+                    Telefoonnummer *
+                  </label>
+                  <input
+                    type="tel"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    required
+                    className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]"
+                    placeholder="+31 6 12345678"
+                  />
+                </div>
+              </div>
+              <div className="grid md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label className="block text-sm font-semibold text-[var(--foreground)] mb-2">
+                    Adres *
+                  </label>
+                  <input
+                    type="text"
+                    value={address}
+                    onChange={(e) => setAddress(e.target.value)}
+                    required
+                    className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]"
+                    placeholder="Straatnaam 123"
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-semibold text-[var(--foreground)] mb-2">
+                      Postcode *
+                    </label>
+                    <input
+                      type="text"
+                      value={postalCode}
+                      onChange={(e) => setPostalCode(e.target.value)}
+                      required
+                      className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]"
+                      placeholder="1234 AB"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-semibold text-[var(--foreground)] mb-2">
+                      Plaats *
+                    </label>
+                    <input
+                      type="text"
+                      value={city}
+                      onChange={(e) => setCity(e.target.value)}
+                      required
+                      className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]"
+                      placeholder="Amsterdam"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={orderItems.filter((i) => i.quantity > 0).length === 0}
+                className="w-full bg-[var(--primary-cta)] text-[var(--primary-cta-text)] font-bold py-3 rounded hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {submitted ? "Bestelling verzonden! ✓" : "Bestelling plaatsen"}
+              </button>
+
+              <p className="text-xs text-[var(--foreground)]/50 text-center mt-4">
+                We respecteren je privacy. Je gegevens worden alleen gebruikt voor je bestelling.
+              </p>
+            </form>
+          </div>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Goldfood"
+          copyrightText="© 2025 Goldfood | Premium Seafood B2B. Alle rechten voorbehouden."
+          socialLinks={[
+            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
+            { icon: Mail, href: "mailto:info@goldfood.nl", ariaLabel: "Email" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -10,6 +10,7 @@ import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import { Sparkles, Fish, Zap, Star, Crown, ChefHat, Package, ShoppingCart, HelpCircle, Mail, Linkedin } from "lucide-react";
+import Image from "next/image";
 
 export default function LandingPage() {
   return (
@@ -32,6 +33,7 @@ export default function LandingPage() {
             { name: "Waarom Goldfood", id: "why" },
             { name: "Voor Wie", id: "audiences" },
             { name: "Hoe het Werkt", id: "how-it-works" },
+            { name: "Bestellen", id: "/order" },
             { name: "Contact", id: "contact" },
           ]}
           button={{ text: "Vraag Prijs & Sample", href: "contact" }}
@@ -48,23 +50,24 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
           leftCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/fresh-salmon-fillets-ice-with-rosemary-spices_84443-74003.jpg", imageAlt: "Premium salmon selection" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW4PXB76rZD9PAaiHKWMP6l5cV/uploaded-1772696602957-r2y45bmq.png", imageAlt: "Goldfood branding" },
             { imageSrc: "http://img.b2bpic.net/free-photo/drone-photo-lake-trees-khao-sok-national-park-daytime_181624-18901.jpg?_wi=1", imageAlt: "Quality sourcing process" },
             { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-fish-slate-with-cutlery_23-2148643612.jpg?_wi=1", imageAlt: "Premium seafood display" },
             { imageSrc: "http://img.b2bpic.net/free-photo/professional-technologist-white-protective-uniform-controlling-industrial-process-production-plant_342744-1227.jpg?_wi=1", imageAlt: "Professional handling" },
           ]}
           rightCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/front-view-chef-apron-putting-raw-fish-chopping-board-pepper-grinder-pomegranate-seeds-bowl-table_179666-44288.jpg?_wi=1", imageAlt: "Professional culinary preparation" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW4PXB76rZD9PAaiHKWMP6l5cV/uploaded-1772696602957-vjaajyqj.png", imageAlt: "Product packaging" },
             { imageSrc: "http://img.b2bpic.net/free-photo/man-chef-cooking-asian-chicken-cafe-kitchen_1303-32155.jpg?_wi=1", imageAlt: "Horeca kitchen setting" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/close-up-japanese-street-food_23-2149287807.jpg?_wi=1", imageAlt: "Premium retail presentation" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW4PXB76rZD9PAaiHKWMP6l5cV/uploaded-1772696602957-o0ppoo4q.png", imageAlt: "Premium retail presentation" },
             { imageSrc: "http://img.b2bpic.net/free-photo/close-up-picture-red-fish-slices_259150-58650.jpg?_wi=1", imageAlt: "Premium salmon cuts" },
           ]}
           carouselPosition="right"
           buttons={[
-            { text: "Bekijk Assortiment", href: "assortment" },
             { text: "Vraag Prijs & Sample", href: "contact" },
+            { text: "Bekijk Assortiment", href: "assortment" },
           ]}
           buttonAnimation="slide-up"
+          buttonClassName="px-8 py-3 font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300"
         />
       </div>
 
@@ -116,7 +119,7 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           buttons={[
-            { text: "Bekijk Volledig Assortiment", href: "contact" },
+            { text: "Bekijk Volledig Assortiment", href: "/order" },
           ]}
           buttonAnimation="slide-up"
         />