Merge version_2 into main #2
365
src/app/order/page.tsx
Normal file
365
src/app/order/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,15 +50,15 @@ 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"
|
||||
@@ -116,7 +118,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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user