[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Inter", "Inter Fallback"; /* Primary brand colors */ --color-primary: #0066cc; --color-primary-foreground: #ffffff; /* Neutral colors */ --color-background: #ffffff; --color-foreground: #1a1a1a; --color-muted: #f5f7fa; --color-muted-foreground: #6b7280; --color-border: #e5e7eb; /* Accent colors */ --color-accent: #0052a3; --color-accent-foreground: #ffffff; /* Card colors */ --color-card: #ffffff; --color-card-foreground: #1a1a1a; /* Semantic colors */ --color-destructive: #dc2626; --color-destructive-foreground: #ffffff; /* Border radius */ --radius: 0.5rem; } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } html { scroll-behavior: smooth; } } /* Custom animations */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; } .animate-fade-in { animation: fade-in 0.8s ease-out forwards; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { Inter } from "next/font/google" import "./globals.css" import { LanguageProvider } from "@/contexts/language-context" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "LOGO Fulfillment - Shop Anywhere. We Deliver Everywhere.", description: "Your global fulfillment partner — fast, reliable, and always on time.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import HeroSection from "@/components/hero-section" import AboutSection from "@/components/about-section" import ServicesSection from "@/components/services-section" import WhyChooseSection from "@/components/why-choose-section" import HowItWorksSection from "@/components/how-it-works-section" import PartnersSection from "@/components/partners-section" import TestimonialsSection from "@/components/testimonials-section" import FAQSection from "@/components/faq-section" import ContactSection from "@/components/contact-section" import Footer from "@/components/footer" import StickyHeader from "@/components/sticky-header" export default function Home() { return (

) } [V0_FILE]jpg:file="public/courier-delivering-package-global-logistics.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/courier-delivering-package-global-logistics-FKpFmOfkRFOir1GSIrd19cBLWm2geI.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-warehouse-team-working-with-packages.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-warehouse-team-working-with-packages-vglXKiMHssaJxab30Jvoq3gHtAduw9.jpg" isMerged="true" [V0_FILE]jpg:file="public/courier-delivering-parcel-international-shipping.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/courier-delivering-parcel-international-shipping-ATArWees20XQ2MHuNqBPTLpowG04pR.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-warehouse-shelves-organized-packages.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-warehouse-shelves-organized-packages-9bEo68TQmtV1UmMCjj0cNpA3HFpPqw.jpg" isMerged="true" [V0_FILE]jpg:file="public/packaging-sorting-process-consolidation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/packaging-sorting-process-consolidation-dD7mllvGwQhs7RLOFKpY71yV91yj9g.jpg" isMerged="true" [V0_FILE]jpg:file="public/customs-officer-documents-international-trade.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/customs-officer-documents-international-trade-rNNlG4iIMBFQ3QMZnrzAhGozl7Mxvc.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartphone-tracking-app-delivery-status.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartphone-tracking-app-delivery-status-SbIlrvrUVKv953QnXAB8BxP4KgjQmo.jpg" isMerged="true" [V0_FILE]jpg:file="public/express-delivery-van-fast-shipping.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/express-delivery-van-fast-shipping-i1thCicSBZukdWu1I37en2B3U1ZYoe.jpg" isMerged="true" [V0_FILE]jpg:file="public/airplane-cargo-delivery-van-fast-shipping.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/airplane-cargo-delivery-van-fast-shipping-HGC7FgbT8m5EeWsTtHdrjGDzxID9Ee.jpg" isMerged="true" [V0_FILE]jpg:file="public/calculator-payment-affordable-pricing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/calculator-payment-affordable-pricing-gkyUHbI0o2ANM4OALXaZxVyTZ94sAn.jpg" isMerged="true" [V0_FILE]jpg:file="public/hands-holding-parcel-safely-secure-delivery.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hands-holding-parcel-safely-secure-delivery-sH18q7WITc8PlbgY1jwgdUqLZ1xELE.jpg" isMerged="true" [V0_FILE]png:file="public/images/capacidad3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/capacidad3-qxPSZW8ouwQA5MhWomVN9dFUpfDTqZ.png" isMerged="true" [V0_FILE]jpg:file="public/person-shopping-online-laptop-ecommerce.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/person-shopping-online-laptop-ecommerce-yKwCoi33yESkuh0zFJH6qxNctxNRwn.jpg" isMerged="true" [V0_FILE]jpg:file="public/warehouse-receiving-packages-storage.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/warehouse-receiving-packages-storage-WIYd11rPvBNrxZeOblmnSyJJvyAD6Q.jpg" isMerged="true" [V0_FILE]jpg:file="public/packages-being-consolidated-together.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/packages-being-consolidated-together-9v0hw9QCk43uzrbqBz4jN8320C98YS.jpg" isMerged="true" [V0_FILE]jpg:file="public/international-shipping-cargo-plane.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/international-shipping-cargo-plane-7xXGhnHx3wF1I19k1ytuzaKmlMswMV.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/professional-airplane-flying-in-bright-blue-sky-wi.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-airplane-flying-in-bright-blue-sky-wi-RwJG7N6To6pco254tBdM4jR16ZLUpj.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-courier-delivering-package-to-custome.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-courier-delivering-package-to-custome-7OxJoOjTLGuqX8SygrJdFNPsKxpB1V.jpg" isMerged="true" [V0_FILE]typescriptreact:file="contexts/language-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" type Language = "de" | "en" interface LanguageContextType { language: Language setLanguage: (lang: Language) => void t: (key: string) => string } const LanguageContext = createContext(undefined) export function LanguageProvider({ children }: { children: React.ReactNode }) { const [language, setLanguage] = useState("de") useEffect(() => { const savedLang = localStorage.getItem("language") as Language if (savedLang) { setLanguage(savedLang) } }, []) const handleSetLanguage = (lang: Language) => { setLanguage(lang) localStorage.setItem("language", lang) } const t = (key: string) => { return translations[language][key] || key } return ( {children} ) } export function useLanguage() { const context = useContext(LanguageContext) if (!context) { throw new Error("useLanguage must be used within a LanguageProvider") } return context } const translations: Record> = { de: { // Header "nav.about": "Über uns", "nav.services": "Dienstleistungen", "nav.how": "So funktioniert's", "nav.partners": "Partner", "nav.testimonials": "Bewertungen", "nav.faq": "FAQ", "nav.contact": "Kontakt", // Hero "hero.title": "Globale Lieferung & Fulfillment", "hero.subtitle": "Wir helfen Ihnen, von jedem Online-Shop weltweit zu bestellen und liefern direkt zu Ihnen nach Hause", "hero.cta.primary": "Jetzt starten", "hero.cta.secondary": "Mehr erfahren", // About "about.title": "Über LOGO Fulfillment", "about.subtitle": "Ihr vertrauenswürdiger Partner für globale Lieferungen", "about.description": "LOGO Fulfillment ist ein führender Anbieter von internationalen Versand- und Fulfillment-Lösungen. Wir ermöglichen es Kunden weltweit, von ihren Lieblingsgeschäften zu bestellen und ihre Pakete schnell, sicher und kostengünstig zu erhalten.", "about.mission.title": "Unsere Mission", "about.mission.text": "Grenzenlose Einkaufsmöglichkeiten für jeden zugänglich zu machen", "about.vision.title": "Unsere Vision", "about.vision.text": "Die weltweit führende Fulfillment-Plattform zu werden", "about.values.title": "Unsere Werte", "about.values.text": "Zuverlässigkeit, Transparenz und Kundenzufriedenheit", // Services "services.title": "Unsere Dienstleistungen", "services.subtitle": "Umfassende Lösungen für alle Ihre Versandbedürfnisse", "services.global.title": "Weltweite Lieferung", "services.global.desc": "Schnelle und zuverlässige Lieferung in über 200 Länder weltweit", "services.warehouse.title": "Lagerung & Konsolidierung", "services.warehouse.desc": "Sichere Lagerung und intelligente Paketkonsolidierung zur Kostensenkung", "services.customs.title": "Zollabwicklung", "services.customs.desc": "Professionelle Zollabwicklung und Dokumentation", "services.tracking.title": "Echtzeit-Tracking", "services.tracking.desc": "Verfolgen Sie Ihre Sendungen in Echtzeit von der Abholung bis zur Zustellung", // Why Choose "why.title": "Warum LOGO Fulfillment?", "why.subtitle": "Die Vorteile unseres Services", "why.fast.title": "Schnelle Lieferung", "why.fast.desc": "Express-Versandoptionen verfügbar", "why.reliable.title": "Zuverlässig", "why.reliable.desc": "99,9% pünktliche Lieferquote", "why.affordable.title": "Günstig", "why.affordable.desc": "Wettbewerbsfähige Preise ohne versteckte Gebühren", "why.support.title": "24/7 Support", "why.support.desc": "Unser Team ist immer für Sie da", // How It Works "how.title": "So funktioniert's", "how.subtitle": "Einfach in 5 Schritten", "how.step1.title": "Registrieren", "how.step1.desc": "Erstellen Sie Ihr kostenloses Konto", "how.step2.title": "Bestellen", "how.step2.desc": "Kaufen Sie in Ihren Lieblingsgeschäften ein", "how.step3.title": "Versenden", "how.step3.desc": "Senden Sie Ihre Pakete an unser Lager", "how.step4.title": "Konsolidieren", "how.step4.desc": "Wir kombinieren Ihre Pakete", "how.step5.title": "Empfangen", "how.step5.desc": "Erhalten Sie Ihre Lieferung", // Partners "partners.title": "Unsere Partner", "partners.subtitle": "Vertrauenswürdige Marken weltweit", // Testimonials "testimonials.title": "Was unsere Kunden sagen", "testimonials.subtitle": "Echte Erfahrungen von echten Kunden", // FAQ "faq.title": "Häufig gestellte Fragen", "faq.subtitle": "Alles, was Sie wissen müssen", "faq.q1": "Wie lange dauert die Lieferung?", "faq.a1": "Die Lieferzeit variiert je nach Zielort und gewählter Versandmethode. Express-Lieferungen dauern in der Regel 3-5 Werktage, während Standardlieferungen 7-14 Werktage in Anspruch nehmen können.", "faq.q2": "Welche Länder beliefern Sie?", "faq.a2": "Wir liefern in über 200 Länder weltweit. Kontaktieren Sie uns für spezifische Informationen zu Ihrem Land.", "faq.q3": "Wie werden Zollgebühren gehandhabt?", "faq.a3": "Wir kümmern uns um alle Zolldokumente und informieren Sie über anfallende Gebühren, bevor Ihre Sendung verschickt wird.", "faq.q4": "Kann ich mehrere Pakete kombinieren?", "faq.a4": "Ja! Unser Konsolidierungsservice ermöglicht es Ihnen, mehrere Pakete zu kombinieren, um Versandkosten zu sparen.", "faq.q5": "Wie kann ich meine Sendung verfolgen?", "faq.a5": "Sie erhalten eine Tracking-Nummer per E-Mail, sobald Ihre Sendung verschickt wird. Sie können den Status jederzeit in Ihrem Konto überprüfen.", // Contact "contact.title": "Kontakt aufnehmen", "contact.subtitle": "Bereit zum Versenden? Kontaktieren Sie uns noch heute für ein kostenloses Angebot", "contact.form.name": "Vollständiger Name", "contact.form.email": "E-Mail-Adresse", "contact.form.phone": "Telefonnummer", "contact.form.type": "Art der Anfrage", "contact.form.type.quote": "Lieferangebot", "contact.form.type.partnership": "Partnerschaft", "contact.form.type.general": "Allgemeine Frage", "contact.form.message": "Nachricht", "contact.form.message.placeholder": "Erzählen Sie uns von Ihren Versandbedürfnissen...", "contact.form.submit": "Nachricht senden", "contact.form.success": "Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.", "contact.info.title": "Kontaktinformationen", "contact.info.email": "E-Mail", "contact.info.address": "Adresse", "contact.hours.title": "Geschäftszeiten", "contact.hours.weekday": "Montag - Freitag", "contact.hours.saturday": "Samstag", "contact.hours.sunday": "Sonntag", "contact.hours.closed": "Geschlossen", // Footer "footer.cta.title": "Bereit, Ihre erste Bestellung zu versenden?", "footer.cta.subtitle": "Schließen Sie sich Tausenden zufriedener Kunden weltweit an", "footer.cta.start": "Jetzt starten", "footer.cta.quote": "Kostenloses Angebot erhalten", "footer.description": "Ihr vertrauenswürdiger globaler Fulfillment-Partner für schnelle, zuverlässige Lieferungen weltweit.", "footer.links": "Schnelllinks", "footer.services": "Dienstleistungen", "footer.legal": "Rechtliches", "footer.privacy": "Datenschutzerklärung", "footer.cookie": "Cookie-Richtlinie", "footer.terms": "AGB", "footer.shipping": "Versandrichtlinie", "footer.copyright": "© 2025 LOGO Fulfillment. Alle Rechte vorbehalten.", "footer.service.global": "Globale Lieferung", "footer.service.warehouse": "Lagerung", "footer.service.consolidation": "Konsolidierung", "footer.service.tracking": "Tracking", // Privacy Policy "privacy.title": "Datenschutzerklärung", "privacy.updated": "Zuletzt aktualisiert", "privacy.intro": "Bei LOGO Fulfillment respektieren wir Ihre Privatsphäre und verpflichten uns, Ihre persönlichen Daten zu schützen.", // Cookie Policy "cookie.title": "Cookie-Richtlinie", "cookie.updated": "Zuletzt aktualisiert", "cookie.intro": "Diese Cookie-Richtlinie erklärt, wie LOGO Fulfillment Cookies und ähnliche Technologien verwendet.", }, en: { // Header "nav.about": "About", "nav.services": "Services", "nav.how": "How It Works", "nav.partners": "Partners", "nav.testimonials": "Testimonials", "nav.faq": "FAQ", "nav.contact": "Contact", // Hero "hero.title": "Global Delivery & Fulfillment", "hero.subtitle": "We help you shop from any online store worldwide and deliver directly to your doorstep", "hero.cta.primary": "Get Started", "hero.cta.secondary": "Learn More", // About "about.title": "About LOGO Fulfillment", "about.subtitle": "Your trusted partner for global deliveries", "about.description": "LOGO Fulfillment is a leading provider of international shipping and fulfillment solutions. We enable customers worldwide to order from their favorite stores and receive their packages quickly, safely, and affordably.", "about.mission.title": "Our Mission", "about.mission.text": "Making borderless shopping accessible to everyone", "about.vision.title": "Our Vision", "about.vision.text": "To become the world's leading fulfillment platform", "about.values.title": "Our Values", "about.values.text": "Reliability, transparency, and customer satisfaction", // Services "services.title": "Our Services", "services.subtitle": "Comprehensive solutions for all your shipping needs", "services.global.title": "Worldwide Delivery", "services.global.desc": "Fast and reliable delivery to over 200 countries worldwide", "services.warehouse.title": "Warehousing & Consolidation", "services.warehouse.desc": "Secure storage and smart package consolidation to reduce costs", "services.customs.title": "Customs Clearance", "services.customs.desc": "Professional customs clearance and documentation", "services.tracking.title": "Real-Time Tracking", "services.tracking.desc": "Track your shipments in real-time from pickup to delivery", // Why Choose "why.title": "Why LOGO Fulfillment?", "why.subtitle": "The benefits of our service", "why.fast.title": "Fast Delivery", "why.fast.desc": "Express shipping options available", "why.reliable.title": "Reliable", "why.reliable.desc": "99.9% on-time delivery rate", "why.affordable.title": "Affordable", "why.affordable.desc": "Competitive pricing with no hidden fees", "why.support.title": "24/7 Support", "why.support.desc": "Our team is always here for you", // How It Works "how.title": "How It Works", "how.subtitle": "Simple in 5 steps", "how.step1.title": "Register", "how.step1.desc": "Create your free account", "how.step2.title": "Order", "how.step2.desc": "Shop at your favorite stores", "how.step3.title": "Ship", "how.step3.desc": "Send your packages to our warehouse", "how.step4.title": "Consolidate", "how.step4.desc": "We combine your packages", "how.step5.title": "Receive", "how.step5.desc": "Get your delivery", // Partners "partners.title": "Our Partners", "partners.subtitle": "Trusted brands worldwide", // Testimonials "testimonials.title": "What Our Customers Say", "testimonials.subtitle": "Real experiences from real customers", // FAQ "faq.title": "Frequently Asked Questions", "faq.subtitle": "Everything you need to know", "faq.q1": "How long does delivery take?", "faq.a1": "Delivery time varies depending on destination and chosen shipping method. Express deliveries typically take 3-5 business days, while standard deliveries can take 7-14 business days.", "faq.q2": "Which countries do you deliver to?", "faq.a2": "We deliver to over 200 countries worldwide. Contact us for specific information about your country.", "faq.q3": "How are customs fees handled?", "faq.a3": "We handle all customs documentation and inform you of any applicable fees before your shipment is sent.", "faq.q4": "Can I combine multiple packages?", "faq.a4": "Yes! Our consolidation service allows you to combine multiple packages to save on shipping costs.", "faq.q5": "How can I track my shipment?", "faq.a5": "You will receive a tracking number via email once your shipment is sent. You can check the status anytime in your account.", // Contact "contact.title": "Get In Touch", "contact.subtitle": "Ready to start shipping? Contact us today for a free quote", "contact.form.name": "Full Name", "contact.form.email": "Email Address", "contact.form.phone": "Phone Number", "contact.form.type": "Type of Request", "contact.form.type.quote": "Delivery Quote", "contact.form.type.partnership": "Partnership", "contact.form.type.general": "General Question", "contact.form.message": "Message", "contact.form.message.placeholder": "Tell us about your shipping needs...", "contact.form.submit": "Send Message", "contact.form.success": "Thank you for your message! We'll get back to you soon.", "contact.info.title": "Contact Information", "contact.info.email": "Email", "contact.info.address": "Address", "contact.hours.title": "Business Hours", "contact.hours.weekday": "Monday - Friday", "contact.hours.saturday": "Saturday", "contact.hours.sunday": "Sunday", "contact.hours.closed": "Closed", // Footer "footer.cta.title": "Ready to ship your first order?", "footer.cta.subtitle": "Join thousands of satisfied customers worldwide", "footer.cta.start": "Start Now", "footer.cta.quote": "Get Your Free Quote", "footer.description": "Your trusted global fulfillment partner for fast, reliable delivery worldwide.", "footer.links": "Quick Links", "footer.services": "Services", "footer.legal": "Legal", "footer.privacy": "Privacy Policy", "footer.cookie": "Cookie Policy", "footer.terms": "Terms & Conditions", "footer.shipping": "Shipping Policy", "footer.copyright": "© 2025 LOGO Fulfillment. All rights reserved.", "footer.service.global": "Global Delivery", "footer.service.warehouse": "Warehousing", "footer.service.consolidation": "Consolidation", "footer.service.tracking": "Tracking", // Privacy Policy "privacy.title": "Privacy Policy", "privacy.updated": "Last updated", "privacy.intro": "At LOGO Fulfillment, we respect your privacy and are committed to protecting your personal data.", // Cookie Policy "cookie.title": "Cookie Policy", "cookie.updated": "Last updated", "cookie.intro": "This Cookie Policy explains how LOGO Fulfillment uses cookies and similar technologies.", }, } [V0_FILE]typescriptreact:file="components/language-switcher.tsx" isMerged="true" "use client" import { useLanguage } from "@/contexts/language-context" import { Button } from "@/components/ui/button" export default function LanguageSwitcher() { const { language, setLanguage } = useLanguage() return (

) } [V0_FILE]typescriptreact:file="components/sticky-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import LanguageSwitcher from "@/components/language-switcher" import { useLanguage } from "@/contexts/language-context" export default function StickyHeader() { const [isScrolled, setIsScrolled] = useState(false) const { t } = useLanguage() useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const scrollToContact = () => { document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }) } return (

LOGO Fulfillment

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent } from "@/components/ui/card" import { useLanguage } from "@/contexts/language-context" export default function ContactSection() { const { t } = useLanguage() const [formData, setFormData] = useState({ name: "", email: "", phone: "", requestType: "quote", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) alert(t("contact.form.success")) } return (

{t("contact.title")}

{t("contact.subtitle")}

{/* Contact Form */}

{t("contact.form.name")} setFormData({ ...formData, name: e.target.value })} placeholder="John Doe" />

{t("contact.form.email")} setFormData({ ...formData, email: e.target.value })} placeholder="john@example.com" />

{t("contact.form.phone")} setFormData({ ...formData, phone: e.target.value })} placeholder="+1 (555) 000-0000" />

{t("contact.form.type")}

{t("contact.form.message")}

setFormData({ ...formData, message: e.target.value })}
                    placeholder={t("contact.form.message.placeholder")}
                    rows={5}
                  />
                </div>

<Button type="submit" className="w-full bg-primary hover:bg-accent" size="lg">
                  {t("contact.form.submit")}
                </Button>
              </form>
            </CardContent>
          </Card>

{/* Contact Information */}
          <div className="space-y-8">
            <Card className="border-0 shadow-lg">
              <CardContent className="p-6">
                <h3 className="font-bold text-xl mb-4">{t("contact.info.title")}</h3>
                <div className="space-y-4">
                  <div>
                    <p className="text-sm text-muted-foreground mb-1">{t("contact.info.email")}</p>
                    <p className="font-medium">contact@logo-fulfillment.com</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground mb-1">{t("contact.info.address")}</p>
                    <p className="font-medium">
                      Knörlpatt 15
                      <br />
                      49577 Ankum, Germany
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg">
              <CardContent className="p-6">
                <h3 className="font-bold text-xl mb-4">{t("contact.hours.title")}</h3>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("contact.hours.weekday")}</span>
                    <span className="font-medium">9:00 AM - 6:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("contact.hours.saturday")}</span>
                    <span className="font-medium">10:00 AM - 4:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("contact.hours.sunday")}</span>
                    <span className="font-medium">{t("contact.hours.closed")}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-0 shadow-lg overflow-hidden">
              <CardContent className="p-0">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2411.8!2d7.8736!3d52.5447!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b7f8e8e8e8e8e8%3A0x8e8e8e8e8e8e8e8!2sKn%C3%B6rlpatt%2015%2C%2049577%20Ankum%2C%20Germany!5e0!3m2!1sen!2sus!4v1234567890"
                  width="100%"
                  height="250"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  title="LOGO Fulfillment Location"
                />
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"

export default function Footer() {
  const { t } = useLanguage()

return (
    <footer className="bg-foreground text-white">
      {/* CTA Section */}
      <div className="bg-primary py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">{t("footer.cta.title")}</h2>
          <p className="text-xl mb-8 text-primary-foreground/90">{t("footer.cta.subtitle")}</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })}
              className="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold transition-colors duration-200"
            >
              {t("footer.cta.start")}
            </button>
            <button
              onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })}
              className="bg-transparent border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-3 rounded-lg font-semibold transition-colors duration-200"
            >
              {t("footer.cta.quote")}
            </button>
          </div>
        </div>
      </div>

{/* Footer Content */}
      <div className="container mx-auto px-4 py-12">
        <div className="grid md:grid-cols-4 gap-8 mb-8">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-xl">L</span>
              </div>
              <span className="font-bold text-xl">LOGO Fulfillment</span>
            </div>
            <p className="text-gray-400 leading-relaxed">{t("footer.description")}</p>
          </div>

<div>
            <h4 className="font-bold mb-4">{t("footer.links")}</h4>
            <ul className="space-y-2">
              <li>
                <a href="#about" className="text-gray-400 hover:text-white transition-colors">
                  {t("nav.about")}
                </a>
              </li>
              <li>
                <a href="#services" className="text-gray-400 hover:text-white transition-colors">
                  {t("nav.services")}
                </a>
              </li>
              <li>
                <a href="#how-it-works" className="text-gray-400 hover:text-white transition-colors">
                  {t("nav.how")}
                </a>
              </li>
              <li>
                <a href="#faq" className="text-gray-400 hover:text-white transition-colors">
                  {t("nav.faq")}
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="font-bold mb-4">{t("footer.services")}</h4>
            <ul className="space-y-2">
              <li>
                <a href="#services" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.service.global")}
                </a>
              </li>
              <li>
                <a href="#services" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.service.warehouse")}
                </a>
              </li>
              <li>
                <a href="#services" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.service.consolidation")}
                </a>
              </li>
              <li>
                <a href="#services" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.service.tracking")}
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="font-bold mb-4">{t("footer.legal")}</h4>
            <ul className="space-y-2">
              <li>
                <Link href="/privacy-policy" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.privacy")}
                </Link>
              </li>
              <li>
                <Link href="/cookie-policy" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.cookie")}
                </Link>
              </li>
              <li>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  {t("footer.terms")}
                </a>
              </li>
              <li>
                <a href="#contact" className="text-gray-400 hover:text-white transition-colors">
                  {t("nav.contact")}
                </a>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
          <p>{t("footer.copyright")}</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isMerged="true"
"use client"

import { useLanguage } from "@/contexts/language-context"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function PrivacyPolicyPage() {
  const { t, language } = useLanguage()

const content = {
    de: {
      sections: [
        {
          title: "1. Einleitung",
          content:
            "Diese Datenschutzerklärung beschreibt, wie LOGO Fulfillment ('wir', 'uns', 'unser') Ihre persönlichen Daten sammelt, verwendet und schützt, wenn Sie unsere Website und Dienstleistungen nutzen.",
        },
        {
          title: "2. Datenerfassung",
          content:
            "Wir erfassen verschiedene Arten von Informationen, einschließlich: Kontaktinformationen (Name, E-Mail-Adresse, Telefonnummer), Lieferadressen, Zahlungsinformationen, Bestellhistorie und Tracking-Daten.",
        },
        {
          title: "3. Verwendung Ihrer Daten",
          content:
            "Wir verwenden Ihre persönlichen Daten, um: Ihre Bestellungen zu bearbeiten und zu liefern, mit Ihnen über Ihre Sendungen zu kommunizieren, unsere Dienstleistungen zu verbessern, gesetzliche Anforderungen zu erfüllen.",
        },
        {
          title: "4. Datensicherheit",
          content:
            "Wir implementieren angemessene technische und organisatorische Maßnahmen, um Ihre persönlichen Daten vor unbefugtem Zugriff, Verlust oder Missbrauch zu schützen.",
        },
        {
          title: "5. Ihre Rechte",
          content:
            "Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch gegen die Verarbeitung Ihrer persönlichen Daten.",
        },
        {
          title: "6. Kontakt",
          content:
            "Bei Fragen zu dieser Datenschutzerklärung kontaktieren Sie uns bitte unter: contact@logo-fulfillment.com",
        },
      ],
    },
    en: {
      sections: [
        {
          title: "1. Introduction",
          content:
            "This Privacy Policy describes how LOGO Fulfillment ('we', 'us', 'our') collects, uses, and protects your personal data when you use our website and services.",
        },
        {
          title: "2. Data Collection",
          content:
            "We collect various types of information, including: Contact information (name, email address, phone number), delivery addresses, payment information, order history, and tracking data.",
        },
        {
          title: "3. Use of Your Data",
          content:
            "We use your personal data to: Process and deliver your orders, communicate with you about your shipments, improve our services, comply with legal requirements.",
        },
        {
          title: "4. Data Security",
          content:
            "We implement appropriate technical and organizational measures to protect your personal data from unauthorized access, loss, or misuse.",
        },
        {
          title: "5. Your Rights",
          content:
            "You have the right to access, rectification, erasure, restriction of processing, data portability, and objection to the processing of your personal data.",
        },
        {
          title: "6. Contact",
          content:
            "If you have questions about this Privacy Policy, please contact us at: contact@logo-fulfillment.com",
        },
      ],
    },
  }

const currentContent = content[language]

return (
    <div className="min-h-screen bg-background">
      <header className="bg-primary text-white py-6">
        <div className="container mx-auto px-4">
          <Link href="/">
            <Button variant="ghost" className="text-white hover:bg-primary-foreground/10 mb-4">
              ← {language === "de" ? "Zurück zur Startseite" : "Back to Home"}
            </Button>
          </Link>
          <h1 className="text-4xl font-bold">{t("privacy.title")}</h1>
          <p className="text-primary-foreground/90 mt-2">
            {t("privacy.updated")}: {language === "de" ? "20. Januar 2025" : "January 20, 2025"}
          </p>
        </div>
      </header>

<main className="container mx-auto px-4 py-12 max-w-4xl">
        <div className="prose prose-lg max-w-none">
          <p className="text-xl text-muted-foreground mb-8">{t("privacy.intro")}</p>

<div className="space-y-8">
            {currentContent.sections.map((section, index) => (
              <div key={index} className="bg-muted p-6 rounded-lg">
                <h2 className="text-2xl font-bold mb-4">{section.title}</h2>
                <p className="text-muted-foreground leading-relaxed">{section.content}</p>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cookie-policy/page.tsx" isMerged="true"
"use client"

import { useLanguage } from "@/contexts/language-context"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function CookiePolicyPage() {
  const { t, language } = useLanguage()

const content = {
    de: {
      sections: [
        {
          title: "1. Was sind Cookies?",
          content:
            "Cookies sind kleine Textdateien, die auf Ihrem Gerät gespeichert werden, wenn Sie unsere Website besuchen. Sie helfen uns, Ihre Präferenzen zu speichern und Ihre Erfahrung zu verbessern.",
        },
        {
          title: "2. Arten von Cookies",
          content:
            "Wir verwenden verschiedene Arten von Cookies: Notwendige Cookies (für grundlegende Funktionen), Leistungs-Cookies (zur Analyse der Website-Nutzung), Funktionale Cookies (zur Speicherung Ihrer Präferenzen), Marketing-Cookies (für personalisierte Werbung).",
        },
        {
          title: "3. Cookie-Verwaltung",
          content:
            "Sie können Cookies in Ihren Browser-Einstellungen verwalten oder löschen. Bitte beachten Sie, dass das Deaktivieren von Cookies die Funktionalität unserer Website beeinträchtigen kann.",
        },
        {
          title: "4. Drittanbieter-Cookies",
          content:
            "Wir verwenden möglicherweise Cookies von Drittanbietern wie Google Analytics, um die Website-Nutzung zu analysieren und unsere Dienstleistungen zu verbessern.",
        },
        {
          title: "5. Aktualisierungen",
          content:
            "Wir können diese Cookie-Richtlinie von Zeit zu Zeit aktualisieren. Änderungen werden auf dieser Seite veröffentlicht.",
        },
        {
          title: "6. Kontakt",
          content:
            "Bei Fragen zu unserer Cookie-Richtlinie kontaktieren Sie uns bitte unter: contact@logo-fulfillment.com",
        },
      ],
    },
    en: {
      sections: [
        {
          title: "1. What are Cookies?",
          content:
            "Cookies are small text files stored on your device when you visit our website. They help us remember your preferences and improve your experience.",
        },
        {
          title: "2. Types of Cookies",
          content:
            "We use different types of cookies: Essential cookies (for basic functions), Performance cookies (to analyze website usage), Functional cookies (to store your preferences), Marketing cookies (for personalized advertising).",
        },
        {
          title: "3. Cookie Management",
          content:
            "You can manage or delete cookies in your browser settings. Please note that disabling cookies may affect the functionality of our website.",
        },
        {
          title: "4. Third-Party Cookies",
          content:
            "We may use third-party cookies such as Google Analytics to analyze website usage and improve our services.",
        },
        {
          title: "5. Updates",
          content: "We may update this Cookie Policy from time to time. Changes will be posted on this page.",
        },
        {
          title: "6. Contact",
          content: "If you have questions about our Cookie Policy, please contact us at: contact@logo-fulfillment.com",
        },
      ],
    },
  }

const currentContent = content[language]

return (
    <div className="min-h-screen bg-background">
      <header className="bg-primary text-white py-6">
        <div className="container mx-auto px-4">
          <Link href="/">
            <Button variant="ghost" className="text-white hover:bg-primary-foreground/10 mb-4">
              ← {language === "de" ? "Zurück zur Startseite" : "Back to Home"}
            </Button>
          </Link>
          <h1 className="text-4xl font-bold">{t("cookie.title")}</h1>
          <p className="text-primary-foreground/90 mt-2">
            {t("cookie.updated")}: {language === "de" ? "20. Januar 2025" : "January 20, 2025"}
          </p>
        </div>
      </header>

<main className="container mx-auto px-4 py-12 max-w-4xl">
        <div className="prose prose-lg max-w-none">
          <p className="text-xl text-muted-foreground mb-8">{t("cookie.intro")}</p>

<div className="space-y-8">
            {currentContent.sections.map((section, index) => (
              <div key={index} className="bg-muted p-6 rounded-lg">
                <h2 className="text-2xl font-bold mb-4">{section.title}</h2>
                <p className="text-muted-foreground leading-relaxed">{section.content}</p>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"

export default function HeroSection() {
  const { t } = useLanguage()

const scrollToContact = () => {
    document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })
  }

return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image with Parallax Effect */}
      <div className="absolute inset-0 z-0">
        <img
          src="/professional-airplane-flying-in-bright-blue-sky-wi.jpg"
          alt="Global delivery"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/40" />
      </div>

{/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-center text-white">
        <h1 className="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up text-balance">{t("hero.title")}</h1>
        <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-3xl mx-auto animate-fade-in-up [animation-delay:200ms] opacity-0 [animation-fill-mode:forwards]">
          {t("hero.subtitle")}
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up [animation-delay:400ms] opacity-0 [animation-fill-mode:forwards]">
          <Button size="lg" onClick={scrollToContact} className="bg-primary hover:bg-accent text-lg px-8 py-6">
            {t("hero.cta.primary")}
          </Button>
          <Button
            size="lg"
            variant="outline"
            onClick={scrollToContact}
            className="bg-white/10 backdrop-blur-sm border-white text-white hover:bg-white hover:text-primary text-lg px-8 py-6"
          >
            {t("hero.cta.secondary")}
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true"
"use client"

import { useLanguage } from "@/contexts/language-context"

export default function AboutSection() {
  const { t } = useLanguage()

return (
    <section id="about" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">{t("about.title")}</h2>
            <p className="text-lg text-muted-foreground mb-4 leading-relaxed">{t("about.description")}</p>
            <p className="text-lg text-muted-foreground leading-relaxed">{t("about.subtitle")}</p>
          </div>
          <div className="relative h-96 rounded-2xl overflow-hidden shadow-2xl">
            <img
              src="/modern-warehouse-team-working-with-packages.jpg"
              alt="LOGO Fulfillment team"
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/services-section.tsx" isEdit="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { useLanguage } from "@/contexts/language-context"

export default function ServicesSection() {
  const { t } = useLanguage()

const services = [
    {
      title: t("services.global.title"),
      description: t("services.global.desc"),
      image: "/courier-delivering-parcel-international-shipping.jpg",
    },
    {
      title: t("services.warehouse.title"),
      description: t("services.warehouse.desc"),
      image: "/modern-warehouse-shelves-organized-packages.jpg",
    },
    {
      title: "Order Consolidation",
      description: "Combining multiple packages into one shipment to save costs.",
      image: "/packaging-sorting-process-consolidation.jpg",
    },
    {
      title: t("services.customs.title"),
      description: t("services.customs.desc"),
      image: "/customs-officer-documents-international-trade.jpg",
    },
    {
      title: t("services.tracking.title"),
      description: t("services.tracking.desc"),
      image: "/smartphone-tracking-app-delivery-status.jpg",
    },
    {
      title: "Express Shipping",
      description: "Priority delivery for time-sensitive packages.",
      image: "/express-delivery-van-fast-shipping.jpg",
    },
  ]

return (
    <section id="services" className="py-20 bg-muted">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">{t("services.title")}</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("services.subtitle")}</p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <Card
              key={index}
              className="overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border-0"
            >
              <div className="relative h-48 overflow-hidden">
                <img
                  src={service.image || "/placeholder.svg"}
                  alt={service.title}
                  className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
                />
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-2">{service.title}</h3>
                <p className="text-muted-foreground leading-relaxed">{service.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/why-choose-section.tsx" isEdit="true"
"use client"

import { useLanguage } from "@/contexts/language-context"

export default function WhyChooseSection() {
  const { t } = useLanguage()

const benefits = [
    {
      title: t("why.fast.title"),
      description: t("why.fast.desc"),
      image: "/airplane-cargo-delivery-van-fast-shipping.jpg",
    },
    {
      title: t("why.affordable.title"),
      description: t("why.affordable.desc"),
      image: "/calculator-payment-affordable-pricing.jpg",
    },
    {
      title: t("why.reliable.title"),
      description: t("why.reliable.desc"),
      image: "/hands-holding-parcel-safely-secure-delivery.jpg",
    },
    {
      title: t("why.support.title"),
      description: t("why.support.desc"),
      image: "/images/capacidad3.png",
    },
  ]

return (
    <section id="why-choose" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">{t("why.title")}</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("why.subtitle")}</p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {benefits.map((benefit, index) => (
            <div key={index} className="text-center group hover:scale-105 transition-transform duration-300">
              <div className="relative h-48 mb-6 rounded-xl overflow-hidden shadow-lg">
                <img
                  src={benefit.image || "/placeholder.svg"}
                  alt={benefit.title}
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-bold mb-3">{benefit.title}</h3>
              <p className="text-muted-foreground leading-relaxed">{benefit.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/how-it-works-section.tsx" isEdit="true"
"use client"

import { useLanguage } from "@/contexts/language-context"

export default function HowItWorksSection() {
  const { t } = useLanguage()

const steps = [
    {
      number: "01",
      title: t("how.step1.title"),
      description: t("how.step1.desc"),
      image: "/person-shopping-online-laptop-ecommerce.jpg",
    },
    {
      number: "02",
      title: t("how.step2.title"),
      description: t("how.step2.desc"),
      image: "/warehouse-receiving-packages-storage.jpg",
    },
    {
      number: "03",
      title: t("how.step4.title"),
      description: t("how.step4.desc"),
      image: "/packages-being-consolidated-together.jpg",
    },
    {
      number: "04",
      title: t("how.step3.title"),
      description: t("how.step3.desc"),
      image: "/international-shipping-cargo-plane.jpg",
    },
    {
      number: "05",
      title: t("how.step5.title"),
      description: t("how.step5.desc"),
      image: "/professional-courier-delivering-package-to-custome.jpg",
    },
  ]

return (
    <section id="how-it-works" className="py-20 bg-muted">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">{t("how.title")}</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("how.subtitle")}</p>
        </div>

<div className="relative">
          {/* Desktop Timeline */}
          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-primary/20 -translate-y-1/2" />

<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8 relative">
            {steps.map((step, index) => (
              <div key={index} className="relative">
                <div className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                  <div className="absolute -top-4 left-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg">
                    {step.number}
                  </div>
                  <div className="relative h-40 mb-4 mt-4 rounded-lg overflow-hidden">
                    <img
                      src={step.image || "/placeholder.svg"}
                      alt={step.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                  <p className="text-muted-foreground leading-relaxed">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/partners-section.tsx" isEdit="true"
"use client"

import { useLanguage } from "@/contexts/language-context"

export default function PartnersSection() {
  const { t } = useLanguage()

const partners = [
    { name: "Amazon", logo: "Amazon" },
    { name: "eBay", logo: "eBay" },
    { name: "Zalando", logo: "Zalando" },
    { name: "IKEA", logo: "IKEA" },
    { name: "AliExpress", logo: "AliExpress" },
    { name: "Etsy", logo: "Etsy" },
  ]

return (
    <section id="partners" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">{t("partners.title")}</h2>
          <p className="text-lg text-muted-foreground">{t("partners.subtitle")}</p>
        </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
          {partners.map((partner, index) => (
            <div
              key={index}
              className="flex items-center justify-center p-6 bg-muted rounded-lg hover:bg-primary/5 transition-colors duration-300"
            >
              <span className="text-xl font-bold text-muted-foreground">{partner.logo}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isEdit="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { useState, useEffect } from "react"
import { useLanguage } from "@/contexts/language-context"

export default function TestimonialsSection() {
  const { t, language } = useLanguage()
  const [currentIndex, setCurrentIndex] = useState(0)

const testimonials = {
    de: [
      {
        name: "Sarah Johnson",
        company: "E-Commerce-Unternehmerin",
        text: "LOGO Fulfillment hat mein internationales Geschäft transformiert. Ihr Konsolidierungsservice spart mir jeden Monat Tausende an Versandkosten.",
        rating: 5,
      },
      {
        name: "Michael Chen",
        company: "Tech-Startup-Gründer",
        text: "Zuverlässig, schnell und professionell. Das Echtzeit-Tracking gibt mir Sicherheit, und ihr Kundensupport ist außergewöhnlich.",
        rating: 5,
      },
      {
        name: "Emma Rodriguez",
        company: "Mode-Einzelhändlerin",
        text: "Ich kann endlich ohne Sorgen bei europäischen Marken einkaufen. LOGO kümmert sich nahtlos um alle Zollformalitäten. Sehr empfehlenswert!",
        rating: 5,
      },
      {
        name: "David Kim",
        company: "Online-Käufer",
        text: "Der beste Fulfillment-Service, den ich genutzt habe. Sie haben 5 Pakete zu einer Sendung konsolidiert und mir über 60% der Versandkosten gespart.",
        rating: 5,
      },
    ],
    en: [
      {
        name: "Sarah Johnson",
        company: "E-commerce Entrepreneur",
        text: "LOGO Fulfillment has transformed my international business. Their consolidation service saves me thousands in shipping costs every month.",
        rating: 5,
      },
      {
        name: "Michael Chen",
        company: "Tech Startup Founder",
        text: "Reliable, fast, and professional. The real-time tracking gives me peace of mind, and their customer support is exceptional.",
        rating: 5,
      },
      {
        name: "Emma Rodriguez",
        company: "Fashion Retailer",
        text: "I can finally shop from European brands without worry. LOGO handles all customs paperwork seamlessly. Highly recommended!",
        rating: 5,
      },
      {
        name: "David Kim",
        company: "Online Shopper",
        text: "Best fulfillment service I've used. They consolidated 5 packages into one shipment and saved me over 60% on shipping costs.",
        rating: 5,
      },
    ],
  }

const currentTestimonials = testimonials[language]

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % currentTestimonials.length)
    }, 5000)
    return () => clearInterval(interval)
  }, [currentTestimonials.length])

return (
    <section id="testimonials" className="py-20 bg-muted">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">{t("testimonials.title")}</h2>
          <p className="text-xl text-muted-foreground">{t("testimonials.subtitle")}</p>
        </div>

<div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-xl">
            <CardContent className="p-8 md:p-12">
              <div className="flex mb-4">
                {[...Array(currentTestimonials[currentIndex].rating)].map((_, i) => (
                  <svg key={i} className="w-6 h-6 text-yellow-400 fill-current" viewBox="0 0 20 20">
                    <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                  </svg>
                ))}
              </div>
              <p className="text-xl md:text-2xl text-foreground mb-6 leading-relaxed italic">
                "{currentTestimonials[currentIndex].text}"
              </p>
              <div>
                <p className="font-bold text-lg">{currentTestimonials[currentIndex].name}</p>
                <p className="text-muted-foreground">{currentTestimonials[currentIndex].company}</p>
              </div>
            </CardContent>
          </Card>

<div className="flex justify-center gap-2 mt-8">
            {currentTestimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentIndex(index)}
                className={`w-3 h-3 rounded-full transition-all duration-300 ${
                  index === currentIndex ? "bg-primary w-8" : "bg-gray-300"
                }`}
                aria-label={`Go to testimonial ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/faq-section.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { ChevronDown } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function FAQSection() {
  const { t } = useLanguage()
  const [openIndex, setOpenIndex] = useState<number | null>(null)

const faqs = [
    {
      question: t("faq.q1"),
      answer: t("faq.a1"),
    },
    {
      question: t("faq.q2"),
      answer: t("faq.a2"),
    },
    {
      question: t("faq.q3"),
      answer: t("faq.a3"),
    },
    {
      question: t("faq.q4"),
      answer: t("faq.a4"),
    },
    {
      question: t("faq.q5"),
      answer: t("faq.a5"),
    },
  ]

return (
    <section id="faq" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">{t("faq.title")}</h2>
          <p className="text-xl text-muted-foreground">{t("faq.subtitle")}</p>
        </div>

<div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow duration-300"
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full flex items-center justify-between p-6 text-left bg-white hover:bg-muted/50 transition-colors duration-200"
              >
                <span className="font-bold text-lg pr-4">{faq.question}</span>
                <ChevronDown
                  className={`w-5 h-5 text-primary transition-transform duration-300 flex-shrink-0 ${
                    openIndex === index ? "rotate-180" : ""
                  }`}
                />
              </button>
              <div
                className={`overflow-hidden transition-all duration-300 ${
                  openIndex === index ? "max-h-96" : "max-h-0"
                }`}
              >
                <div className="p-6 pt-0 text-muted-foreground leading-relaxed">{faq.answer}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This