[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Inter, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Gardify B2B Solutions | Digital Tools for Garden Centers", description: "Transform your garden center with Gardify's digital solutions - infoterminals, customer engagement apps, and expert plant content.", } export const viewport: Viewport = { themeColor: "#3d8b40", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/gardening-video-tutorial-with-plants-and-gardener.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gardening-video-tutorial-with-plants-and-gardener-hrIJylCVKS8mRPBD7VKkuqFTUo33Cj.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-touchscreen-kiosk-terminal-in-garden-center.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-touchscreen-kiosk-terminal-in-garden-center-kjwIdsw7szGHd0LFBNinH3F1qXjeR4.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartphone-app-showing-plant-database-search-inter.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartphone-app-showing-plant-database-search-inter-4NM72Y9jM7obUuHUCGim7RNEENdEXM.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartphone-app-showing-garden-plant-care-reminders.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartphone-app-showing-garden-plant-care-reminders-7VSeGqP3dyoRcW715hEbqdz4RClLUE.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-touchscreen-kiosk-terminal-in-bright-garden.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-touchscreen-kiosk-terminal-in-bright-garden-UyeohJhJGHXjKEahV4ieR5ikMc4l1k.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartphone-app-plant-database-search-interface-gre.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartphone-app-plant-database-search-interface-gre-bfXSJpudwg0UxcwIIc40IrvrD65v5I.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartphone-app-garden-plant-care-reminders-notific.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartphone-app-garden-plant-care-reminders-notific-TPW3N2XKtsRCvhdyAsjaJsgVvzB7AP.jpg" isMerged="true" [V0_FILE]png:file="public/images/screenshot-202025-12-04-20142342-upscayl-2x-upscayl-standard-4x.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-12-04%20142342_upscayl_2x_upscayl-standard-4x-GGoO8pLMpffp2cf4TMBZ2GxzLn0HRA.png" isMerged="true" [V0_FILE]png:file="public/gardify-logo-white.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gardify_Logo_x_v6_wei%C3%9F_R_CMYK-94bG5P6MLJWjuk9qoYWRKbhyqwCBua.png" isMerged="true" [V0_FILE]png:file="public/gardify-logo-green.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gardify_Logo_x_v6_gruen_R_CMYK-wdfkO8emvr6SRN841C1kR0WaMRWnVx.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { FileDown } from "lucide-react" export default function Home() { return (

Gardify Rollup Banner

Druckfertiges Rollup Banner im Format 100x200cm

Über das Rollup Banner

Das Gardify Rollup Banner präsentiert die digitale Beratungslösung für Baumschulen und Gartencenter. Mit Info-Terminal und Pflanzen-Doc App bietet es Kunden kompetente Beratung vor Ort und zu Hause. Das Banner ist optimiert für professionellen Druck im Format 100x200cm.

) } [V0_FILE]typescriptreact:file="lib/pptx-icons.tsx" isMerged="true" // SVG Icons als Base64-kodierte Data-URLs für PowerPoint Export // Diese entsprechen den Lucide Icons aus der Web-Präsentation // Hilfsfunktion um SVG zu Base64 zu konvertieren function svgToBase64(svg: string): string { const encoded = Buffer.from(svg).toString("base64") return `data:image/svg+xml;base64,${encoded}` } // Icon SVGs im Gardify-Grün (#4CAF50) und Weiß (#FFFFFF) const createIcon = (path: string, color = "#4CAF50", size = 24) => { return svgToBase64( ``, ) } // Lucide Icon Paths const ICON_PATHS = { // HelpCircle - Beratungsengpässe helpCircle: '', // Users - Fachkräftemangel users: '', // ShoppingCart - Cross-Selling shoppingCart: '', // Clock - Zeit clock: '', // Monitor - Terminal monitor: '', // Smartphone - App smartphone: '', // Bell - Notifications bell: '', // TrendingUp - Wachstum trendingUp: '', // Shield - Sicherheit shield: '', // CheckCircle - Erfolg checkCircle: '', // Rocket - Innovation rocket: '', // Star - Bewertung star: '', // Play - YouTube play: '', // Download - Downloads download: '', // Leaf - Pflanzen leaf: '', // Eye - Aufrufe eye: '', // MessageCircle - Community messageCircle: '', // Sparkles - Feature sparkles: '', // BookOpen - Wissen bookOpen: '', // FileCheck - Geprüft fileCheck: '', // Store - Handel store: '', // QrCode - QR qrCode: '', // Layers - Integration layers: '', // ArrowRight - Pfeil arrowRight: '', // Calendar - Termin calendar: '', // Mail - E-Mail mail: '', // Phone - Telefon phone: '', // Settings - Einstellungen settings: '', // Zap - Blitz / Schnell zap: '', // Target - Ziel target: '', // Award - Auszeichnung award: '', // Gift - Geschenk / Angebot gift: '', // UserCheck - Verifizierter Nutzer userCheck: '', // Database - Datenbank database: '', // BarChart - Statistiken barChart: '', // RefreshCw - Synchronisierung refreshCw: '', // HeartHandshake - Partnerschaft heartHandshake: '', } // Exportiere Icons in beiden Farbvarianten export const PPTX_ICONS = { // Grüne Icons (für helle Hintergründe) green: { helpCircle: createIcon(ICON_PATHS.helpCircle, "#4CAF50"), users: createIcon(ICON_PATHS.users, "#4CAF50"), shoppingCart: createIcon(ICON_PATHS.shoppingCart, "#4CAF50"), clock: createIcon(ICON_PATHS.clock, "#4CAF50"), monitor: createIcon(ICON_PATHS.monitor, "#4CAF50"), smartphone: createIcon(ICON_PATHS.smartphone, "#4CAF50"), bell: createIcon(ICON_PATHS.bell, "#4CAF50"), trendingUp: createIcon(ICON_PATHS.trendingUp, "#4CAF50"), shield: createIcon(ICON_PATHS.shield, "#4CAF50"), checkCircle: createIcon(ICON_PATHS.checkCircle, "#4CAF50"), rocket: createIcon(ICON_PATHS.rocket, "#4CAF50"), star: createIcon(ICON_PATHS.star, "#4CAF50"), play: createIcon(ICON_PATHS.play, "#4CAF50"), download: createIcon(ICON_PATHS.download, "#4CAF50"), leaf: createIcon(ICON_PATHS.leaf, "#4CAF50"), eye: createIcon(ICON_PATHS.eye, "#4CAF50"), messageCircle: createIcon(ICON_PATHS.messageCircle, "#4CAF50"), sparkles: createIcon(ICON_PATHS.sparkles, "#4CAF50"), bookOpen: createIcon(ICON_PATHS.bookOpen, "#4CAF50"), fileCheck: createIcon(ICON_PATHS.fileCheck, "#4CAF50"), store: createIcon(ICON_PATHS.store, "#4CAF50"), qrCode: createIcon(ICON_PATHS.qrCode, "#4CAF50"), layers: createIcon(ICON_PATHS.layers, "#4CAF50"), arrowRight: createIcon(ICON_PATHS.arrowRight, "#4CAF50"), calendar: createIcon(ICON_PATHS.calendar, "#4CAF50"), mail: createIcon(ICON_PATHS.mail, "#4CAF50"), phone: createIcon(ICON_PATHS.phone, "#4CAF50"), settings: createIcon(ICON_PATHS.settings, "#4CAF50"), zap: createIcon(ICON_PATHS.zap, "#4CAF50"), target: createIcon(ICON_PATHS.target, "#4CAF50"), award: createIcon(ICON_PATHS.award, "#4CAF50"), gift: createIcon(ICON_PATHS.gift, "#4CAF50"), userCheck: createIcon(ICON_PATHS.userCheck, "#4CAF50"), database: createIcon(ICON_PATHS.database, "#4CAF50"), barChart: createIcon(ICON_PATHS.barChart, "#4CAF50"), refreshCw: createIcon(ICON_PATHS.refreshCw, "#4CAF50"), heartHandshake: createIcon(ICON_PATHS.heartHandshake, "#4CAF50"), }, // Weiße Icons (für grüne/dunkle Hintergründe) white: { helpCircle: createIcon(ICON_PATHS.helpCircle, "#FFFFFF"), users: createIcon(ICON_PATHS.users, "#FFFFFF"), shoppingCart: createIcon(ICON_PATHS.shoppingCart, "#FFFFFF"), clock: createIcon(ICON_PATHS.clock, "#FFFFFF"), monitor: createIcon(ICON_PATHS.monitor, "#FFFFFF"), smartphone: createIcon(ICON_PATHS.smartphone, "#FFFFFF"), bell: createIcon(ICON_PATHS.bell, "#FFFFFF"), trendingUp: createIcon(ICON_PATHS.trendingUp, "#FFFFFF"), shield: createIcon(ICON_PATHS.shield, "#FFFFFF"), checkCircle: createIcon(ICON_PATHS.checkCircle, "#FFFFFF"), rocket: createIcon(ICON_PATHS.rocket, "#FFFFFF"), star: createIcon(ICON_PATHS.star, "#FFFFFF"), play: createIcon(ICON_PATHS.play, "#FFFFFF"), download: createIcon(ICON_PATHS.download, "#FFFFFF"), leaf: createIcon(ICON_PATHS.leaf, "#FFFFFF"), eye: createIcon(ICON_PATHS.eye, "#FFFFFF"), messageCircle: createIcon(ICON_PATHS.messageCircle, "#FFFFFF"), sparkles: createIcon(ICON_PATHS.sparkles, "#FFFFFF"), bookOpen: createIcon(ICON_PATHS.bookOpen, "#FFFFFF"), fileCheck: createIcon(ICON_PATHS.fileCheck, "#FFFFFF"), store: createIcon(ICON_PATHS.store, "#FFFFFF"), qrCode: createIcon(ICON_PATHS.qrCode, "#FFFFFF"), layers: createIcon(ICON_PATHS.layers, "#FFFFFF"), arrowRight: createIcon(ICON_PATHS.arrowRight, "#FFFFFF"), calendar: createIcon(ICON_PATHS.calendar, "#FFFFFF"), mail: createIcon(ICON_PATHS.mail, "#FFFFFF"), phone: createIcon(ICON_PATHS.phone, "#FFFFFF"), settings: createIcon(ICON_PATHS.settings, "#FFFFFF"), zap: createIcon(ICON_PATHS.zap, "#FFFFFF"), target: createIcon(ICON_PATHS.target, "#FFFFFF"), award: createIcon(ICON_PATHS.award, "#FFFFFF"), gift: createIcon(ICON_PATHS.gift, "#FFFFFF"), userCheck: createIcon(ICON_PATHS.userCheck, "#FFFFFF"), database: createIcon(ICON_PATHS.database, "#FFFFFF"), barChart: createIcon(ICON_PATHS.barChart, "#FFFFFF"), refreshCw: createIcon(ICON_PATHS.refreshCw, "#FFFFFF"), heartHandshake: createIcon(ICON_PATHS.heartHandshake, "#FFFFFF"), }, // Rote Icons (für Warnungen/Probleme) red: { helpCircle: createIcon(ICON_PATHS.helpCircle, "#EF4444"), users: createIcon(ICON_PATHS.users, "#EF4444"), shoppingCart: createIcon(ICON_PATHS.shoppingCart, "#EF4444"), clock: createIcon(ICON_PATHS.clock, "#EF4444"), }, // Orange Icons (für Akzente) orange: { clock: createIcon(ICON_PATHS.clock, "#F59E0B"), zap: createIcon(ICON_PATHS.zap, "#F59E0B"), }, } // Icon-Größe für PowerPoint (in Zoll) export const ICON_SIZE = 0.35 [V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-LAacsfCzdN7I4om39wM0YNmlWg11oA.png" isMerged="true" [V0_FILE]jpg:file="public/images/screenshot-20251209-184404.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_20251209_184404-kp7CKDwJsIGfhrXfA0buLnYSciMaow.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/rollup/page.tsx" isMerged="true" import { RollupDisplay } from "@/components/rollup/rollup-display" export const metadata = { title: "Gardify Rollup Display | Trade Fair", description: "Professional trade fair rollup display for Gardify B2B plant search solutions", } export default function RollupPage() { return (

) } [V0_FILE]typescriptreact:file="components/rollup/rollup-display.tsx" isQuickEdit="true" isMerged="true" "use client" import Image from "next/image" import { Smartphone, TreeDeciduous, CheckCircle, Monitor, Mail, Phone, Globe, Leaf, MessageCircle, Heart, ArrowRight, Home, Store, } from "lucide-react" const cycleBenefits = [ { icon: Store, title: "Im Laden", desc: "Terminal oder Smartphone" }, { icon: MessageCircle, title: "App-Dialog", desc: "Holt Kunden zurück" }, { icon: Heart, title: "Bindung", desc: "Stammkunde gewonnen" }, ] const features = [ { icon: Monitor, text: "Touch-Terminal im Laden" }, { icon: Smartphone, text: "Smartphone – kostengünstig & flexibel" }, { icon: Home, text: "App für Zuhause – Kundenbindung" }, ] export function RollupDisplay() { return (

{/* Decorative leaf pattern overlay */}

{/* Header Section */}

Für Baumschulen & Gartencenter

Mehr verkaufen durch bessere Beratung

Die digitale Beratungslösung, die Ihre Kunden immer wieder in den Laden bringt

{cycleBenefits.map((benefit, index) => (

{benefit.title}

{benefit.desc}

{index < cycleBenefits.length - 1 && ( )}

))}

{/* Terminal */}

Terminal

• Pflanzensuche
• Etiketten-Scan
• Pflanzeninfos
• Pflege & Einkaufszettel drucken

{/* Smartphone */}

Smartphone

• Pflanzensuche
• Etiketten-Scan
• Pflanzeninfos
• Einkaufszettel

{/* App für Zuhause */}

App Zuhause

• Pflegeanleitungen
• Erinnerungen
• Pflanzen-Doc

{/* Kompakter Highlight für Kundendialog */}

Ihr Draht zum Kunden – ohne eigene App!

{/* Stats - more compact */}

8.500+

Pflanzenprofile

100K+

Nutzer

9 Mio

Video-Views

{/* Trust Badges */}

DSGVO-konform Made in Germany

{/* CTA Section */}

Jetzt informieren!

Sprechen Sie uns an – wir zeigen Ihnen die Lösung live

mw@gardify.de

+49 2103 907881-0

www.gardify.de

Gardify Solutions GmbH | Hilden

) } [V0_FILE]css:file="app/rollup-print/preview/print-styles.css" isMerged="true" /* Print-specific styles for accurate PDF generation */ @media print { @page { size: 1006mm 2186mm; margin: 0; } body { margin: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } [V0_FILE]typescriptreact:file="app/rollup-print/preview/layout.tsx" isMerged="true" import type React from "react" export default function PreviewLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/rollup-print/preview/page.tsx" isMerged="true" "use client" import { RollupPrintReady } from "@/components/rollup/rollup-print-ready" import { useEffect } from "react" export default function RollupPrintPreviewPage() { useEffect(() => { console.log("[v0] Preview page loaded successfully") }, []) return (

) } [V0_FILE]typescriptreact:file="components/rollup/rollup-print-ready.tsx" isMerged="true" "use client" import { Smartphone, TreeDeciduous, CheckCircle, Monitor, Mail, Phone, Globe, Leaf, MessageCircle, Heart, ArrowRight, Home, Store, } from "lucide-react" const cycleBenefits = [ { icon: Store, title: "Im Laden", desc: "Terminal oder Smartphone" }, { icon: MessageCircle, title: "App-Dialog", desc: "Holt Kunden zurück" }, { icon: Heart, title: "Bindung", desc: "Stammkunde gewonnen" }, ] // Pixel-Werte für 1006mm x 2186mm bei 300 DPI // 1mm = 11.811 pixels bei 300 DPI const SCALE = 11.811 const WIDTH = 1006 * SCALE // ~11881px const HEIGHT = 2186 * SCALE // ~25818px const colors = { primary: "#2d6b30", primaryDark: "#1f4920", accent: "#f5a623", white: "#ffffff", whiteAlpha10: "rgba(255, 255, 255, 0.1)", whiteAlpha15: "rgba(255, 255, 255, 0.15)", whiteAlpha20: "rgba(255, 255, 255, 0.2)", whiteAlpha70: "rgba(255, 255, 255, 0.7)", whiteAlpha80: "rgba(255, 255, 255, 0.8)", whiteAlpha90: "rgba(255, 255, 255, 0.9)", accentAlpha20: "rgba(245, 166, 35, 0.2)", accentAlpha30: "rgba(245, 166, 35, 0.3)", accentAlpha40: "rgba(245, 166, 35, 0.4)", primaryAlpha10: "rgba(45, 107, 48, 0.1)", gray500: "#6b7280", gray600: "#4b5563", gray200: "#e5e7eb", } export function RollupPrintReady() { return (

{/* Decorative leaf pattern overlay */}

{/* Header Section */}

Für Baumschulen & Gartencenter

{/* Main Headline */}

Mehr verkaufen durch bessere Beratung

{/* Beratungskreislauf */}

Die digitale Beratungslösung, die Ihre Kunden immer wieder in den Laden bringt

{cycleBenefits.map((benefit, index) => (

{benefit.title}

{benefit.desc}

{index < cycleBenefits.length - 1 && ( )}

))}

{/* Feature Columns */}

{/* Terminal */}

Terminal

• Pflanzensuche
• Etiketten-Scan
• Pflanzeninfos
• Pflege & Einkaufszettel drucken

{/* Smartphone */}

Smartphone

• Pflanzensuche
• Etiketten-Scan
• Pflanzeninfos
• Einkaufszettel

{/* App für Zuhause */}

App Zuhause

• Pflegeanleitungen
• Erinnerungen
• Pflanzen-Doc

Ihr Draht zum Kunden – ohne eigene App!

{/* Stats */}

8.500+

Pflanzenprofile

100K+

Nutzer

9 Mio

Video-Views

{/* Trust Badges */}

DSGVO-konform Made in Germany

{/* CTA Section */}

Jetzt informieren!

Sprechen Sie uns an – wir zeigen Ihnen die Lösung live

mw@gardify.de

+49 2103 907881-0

www.gardify.de

Gardify Solutions GmbH | Hilden

) } [V0_FILE]typescriptreact:file="app/rollup-print/generate/layout.tsx" isMerged="true" import type React from "react" export default function PrintGenerateLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/rollup-print/generate/page.tsx" isMerged="true" import { RollupDisplayPDF } from "@/components/rollup/rollup-display-pdf" export default function PrintGeneratePage() { return (

) } [V0_FILE]json:file="package.json" isEdit="true" 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": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.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": "^1.1.2", "zod": "3.25.76", "html2canvas": "1.4.1", "jspdf": "3.0.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Gardify Brand - Fresh green with warm accents */ --background: #f9faf8; --foreground: #1a2e1a; --card: #ffffff; --card-foreground: #1a2e1a; --popover: #ffffff; --popover-foreground: #1a2e1a; --primary: #7a9e33; --primary-foreground: #ffffff; --secondary: #e8f0e6; --secondary-foreground: #2d4a2d; --muted: #f0f4ee; --muted-foreground: #5a7a5a; --accent: #c9a227; --accent-foreground: #3d3510; --destructive: #e53935; --destructive-foreground: #e53935; --border: #dce5d9; --input: #e2e8de; --ring: #7a9e33; --chart-1: #7a9e33; --chart-2: #4ca6a6; --chart-3: #c9a227; --chart-4: #4a90c9; --chart-5: #8fba4f; --radius: 0.75rem; --sidebar: #f9faf8; --sidebar-foreground: #1a1a1a; --sidebar-primary: #7a9e33; --sidebar-primary-foreground: #f9faf8; --sidebar-accent: #f4f4f4; --sidebar-accent-foreground: #2a2a2a; --sidebar-border: #e8e8e8; --sidebar-ring: #a0a0a0; } .dark { --background: #1a2a1a; --foreground: #e8f0e6; --card: #223322; --card-foreground: #e8f0e6; --popover: #223322; --popover-foreground: #e8f0e6; --primary: #5aad5d; --primary-foreground: #1a2a1a; --secondary: #2d4a2d; --secondary-foreground: #e8f0e6; --muted: #2d4a2d; --muted-foreground: #a0c0a0; --accent: #c9a227; --accent-foreground: #223322; --destructive: #8b2020; --destructive-foreground: #e85050; --border: #3a5a3a; --input: #3a5a3a; --ring: #5aad5d; --chart-1: #5aad5d; --chart-2: #5cc0c0; --chart-3: #c9a227; --chart-4: #5aa0d9; --chart-5: #a0ca5f; --sidebar: #223322; --sidebar-foreground: #e8f0e6; --sidebar-primary: #5aad5d; --sidebar-primary-foreground: #1a2a1a; --sidebar-accent: #2d4a2d; --sidebar-accent-foreground: #e8f0e6; --sidebar-border: #3a5a3a; --sidebar-ring: #4a8a4a; } @theme inline { --font-sans: "Inter", "Inter Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --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; } } /* Print media styles for rollup PDF export */ @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } body { margin: 0 !important; padding: 0 !important; } p, h1, h2, h3, h4, h5, h6, span, div { margin: 0 !important; padding: 0 !important; line-height: 1 !important; transform: translateZ(0) !important; } * { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: geometricPrecision !important; } [style*="display: flex"] { align-items: flex-start !important; } img { display: block !important; position: relative !important; transform: translateZ(0) !important; } [style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [style*="white-space"] { white-space: pre-line !important; } } [V0_FILE]typescriptreact:file="app/rollup-print/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Download, CheckCircle } from "lucide-react" import { RollupDisplayPDF } from "@/components/rollup/rollup-display-pdf" export default function RollupPrintPage() { const [isGenerating, setIsGenerating] = useState(false) const [isComplete, setIsComplete] = useState(false) const handleDownloadPDF = async () => { console.log("[v0] Starting PDF generation...") setIsGenerating(true) setIsComplete(false) try { const html2canvas = (await import("html2canvas")).default const jsPDF = (await import("jspdf")).default const element = document.getElementById("rollup-pdf-content") if (!element) { throw new Error("PDF content element not found") } console.log("[v0] Generating canvas...") const canvas = await html2canvas(element, { scale: 2.5, useCORS: true, allowTaint: true, backgroundColor: "#7a9e33", logging: false, imageTimeout: 0, width: 1000, height: 2000, windowWidth: 1000, windowHeight: 2000, foreignObjectRendering: false, removeContainer: true, }) console.log("[v0] Canvas generated:", canvas.width, "x", canvas.height) const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: [1006, 2186], compress: true, }) console.log("[v0] Adding image to PDF...") const imgData = canvas.toDataURL("image/jpeg", 0.95) pdf.addImage(imgData, "JPEG", 0, 0, 1006, 2186, undefined, "FAST") pdf.save("gardify-rollup-100x200cm.pdf") console.log("[v0] PDF download complete") setIsComplete(true) setTimeout(() => setIsComplete(false), 3000) } catch (error) { console.error("[v0] Error generating PDF:", error) alert(`Fehler beim Erstellen der PDF: ${error}. Bitte versuchen Sie es erneut.`) } finally { setIsGenerating(false) } } return (

Druckfertiges Rollup Banner - 100x200cm

Format: 1006 x 2186 mm (inkl. 3mm Beschnitt)

Farbmodus: CMYK-sichere Farben

Auflösung: Optimiert für Großformatdruck (300 DPI)

Sicherheitszone: Inhalt bleibt 6mm vom Schnittrand entfernt

Klicken Sie auf den Button, um eine druckfertige PDF-Datei im Format 1006x2186mm zu erstellen. Die Generierung dauert 10-15 Sekunden.

Vorschau

) } [V0_FILE]typescriptreact:file="components/rollup/rollup-display-pdf.tsx" isEdit="true" isQuickEdit="true" "use client" import React from "react" import { Smartphone, TreeDeciduous, Monitor, Mail, Phone, Globe, Leaf, MessageCircle, Heart, ArrowRight, Home, Store, } from "lucide-react" // --- KONFIGURATION --- const SCALE = 2.5 const COLORS = { primary: "#7a9e33", accent: "#ff8c00", white: "#ffffff", } const cycleBenefits = [ { icon: Store, title: "Im Laden", desc: "Terminal oder\nSmartphone" }, { icon: MessageCircle, title: "App-Dialog", desc: "Holt Kunden\nzurück" }, { icon: Heart, title: "Bindung", desc: "Stammkunde\ngewonnen" }, ] // Hilfskomponenten const IconWrapper = ({ children, size, color }: { children: React.ReactNode; size: number; color: string }) => ( {children} ) export function RollupDisplayPDF() { return ( <>