[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import dynamic from "next/dynamic" const FarmScene = dynamic(() => import("@/components/farm-scene"), { ssr: false }) export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" export default function Header() { return (

RobinFood

FREE QUALITY CHECKS AND SHIPPING WITH PROTECTION

) } [V0_FILE]typescriptreact:file="components/hero-overlay.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card } from "@/components/ui/card" import { Info } from "lucide-react" export default function HeroOverlay() { return (

Click and drag to explore. Use scroll to zoom.

) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#264b49", foreground: "#ffffff", }, secondary: { DEFAULT: "#151439", foreground: "#ffffff", }, destructive: { DEFAULT: "#eb4335", foreground: "#ffffff", }, muted: { DEFAULT: "#e6f0f0", foreground: "#163639", }, accent: { DEFAULT: "#34a853", foreground: "#ffffff", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, fontFamily: { mono: ['"JetBrains Mono"', "monospace"], }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .crt::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .animate-blink { animation: blink 1s infinite; } [V0_FILE]typescriptreact:file="components/animated-text.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" const words = ["Food Economy", "Agro Hub", "Vege Granary"] export default function AnimatedText() { const [text, setText] = useState("") const [wordIndex, setWordIndex] = useState(0) const [isTyping, setIsTyping] = useState(true) useEffect(() => { const interval = setInterval(() => { if (isTyping) { setText((prev) => { const nextText = words[wordIndex].slice(0, prev.length + 1) if (nextText === words[wordIndex]) { setIsTyping(false) return nextText } return nextText }) } else { setText((prev) => { if (prev.length > 0) { return prev.slice(0, -1) } else { setWordIndex((prevIndex) => (prevIndex + 1) % words.length) setIsTyping(true) return "" } }) } }, 100) // Adjust this value to control the speed of typing/deleting return () => clearInterval(interval) }, [wordIndex, isTyping]) return (

The {text} █ of the Future

) } [V0_FILE]typescriptreact:file="components/scene.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Suspense } from "react" import { Canvas } from "@react-three/fiber" import SceneComp from "./SceneComp" // Import SceneComp // ... (rest of the component definitions) export default function Scene() { return (

) } [V0_FILE]typescriptreact:file="components/farm-scene.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import dynamic from "next/dynamic" import { Suspense, useRef, useMemo, useEffect } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { OrbitControls, Sky, Cloud, Text } from "@react-three/drei" import * as THREE from "three" import { Card } from "@/components/ui/card" import { Info } from "lucide-react" const SceneComp = dynamic(() => import("./scene-comp"), { ssr: false }) const AnimatedText = dynamic(() => import("./animated-text"), { ssr: false }) // Updated color palette for a more futuristic and vibrant look const colors = { brightGreen: "#4CAF50", deepBlue: "#1976D2", skyBlue: "#03A9F4", sunYellow: "#FFC107", vibrantOrange: "#FF5722", cleanWhite: "#FFFFFF", techGray: "#607D8B", leafGreen: "#8BC34A", waterBlue: "#00BCD4", earthBrown: "#795548", nightBlue: "#3F51B5", energyPurple: "#9C27B0", cropRed: "#F44336", cropOrange: "#FF9800", barnRed: "#B71C1C", woodBrown: "#5D4037", grassDark: "#2ecc71", grassLight: "#7eed9f", } // Futuristic crop base component function FuturisticCrop({ position, color, height = 1, width = 0.2, leafCount = 5, leafColor = colors.leafGreen }) { const groupRef = useRef() useFrame(({ clock }) => { if (groupRef.current) { groupRef.current.rotation.y = Math.sin(clock.getElapsedTime() * 0.5) * 0.1 } }) return ( {/* Stem */} {/* Leaves */} {Array.from({ length: leafCount }).map((_, index) => { const angle = (index / leafCount) * Math.PI * 2 const leafHeight = height * (0.3 + Math.random() * 0.4) return ( ) })} ) } // Specific crop components function Corn({ position }) { return } function Beetroot({ position }) { return } function Wheat({ position }) { return ( ) } function Tomato({ position }) { return } function Potato({ position }) { return } function Pumpkin({ position }) { return } function Carrot({ position }) { return } function Lettuce({ position }) { return } function Cabbage({ position }) { return } // Crop row component function CropRow({ CropComponent, position, count = 10, spacing = 1, width = 1 }) { return ( {Array.from({ length: count }).map((_, i) => Array.from({ length: width }).map((_, j) => ( )), )} ) } // Futuristic ground plane with grass texture function Ground() { const groundTexture = useMemo(() => { const canvas = document.createElement("canvas") canvas.width = 512 canvas.height = 512 const context = canvas.getContext("2d") if (context) { // Create a gradient for the base grass color const gradient = context.createLinearGradient(0, 0, 512, 512) gradient.addColorStop(0, colors.grassDark) gradient.addColorStop(1, colors.grassLight) context.fillStyle = gradient context.fillRect(0, 0, 512, 512) // Add noise to create a more natural grass texture const imageData = context.getImageData(0, 0, 512, 512) const data = imageData.data for (let i = 0; i < data.length; i += 4) { const noise = Math.random() * 30 - 15 data[i] = Math.max(0, Math.min(255, data[i] + noise)) // R data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise)) // G data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise)) // B } context.putImageData(imageData, 0, 0) // Add some variation with lighter strokes context.strokeStyle = colors.grassLight context.lineWidth = 1 for (let i = 0; i < 200; i++) { const x = Math.random() * 512 const y = Math.random() * 512 const length = Math.random() * 20 + 10 const angle = Math.random() * Math.PI context.beginPath() context.moveTo(x, y) context.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length) context.stroke() } } return new THREE.CanvasTexture(canvas) }, []) groundTexture.repeat.set(20, 20) groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping return ( ) } // Simple Barn (The Granary) function Barn({ position }) { return ( {/* Main structure */} {/* Simple peaked roof */} {/* Front door */} {/* Windows */} {[-5, 5].map((x) => ( ))} {/* "The Granary" Sign */} {/* Sign post */} {/* Sign board */} {/* Sign text */} The Granary ) } // Farm field with organized crop sections function FarmField() { const cropTypes = [Corn, Beetroot, Wheat, Tomato, Potato, Pumpkin, Carrot, Lettuce, Cabbage] const fieldSize = 5 const spacing = 35 const cropDensity = 6 const cropWidth = 5 return ( {Array.from({ length: fieldSize * fieldSize }).map((_, index) => { const row = Math.floor(index / fieldSize) const col = index % fieldSize const x = (col - Math.floor(fieldSize / 2)) * spacing const z = (row - Math.floor(fieldSize / 2)) * spacing // Check if this section is too close to the barn const distanceFromBarn = Math.sqrt(Math.pow(x - 40, 2) + Math.pow(z - 40, 2)) if (distanceFromBarn < 30) { return null } const CropComponent = cropTypes[index % cropTypes.length] return ( ) })} ) } // Custom sky component function CustomSky() { return ( <> ) } // Scene setup function SceneCompWrapper() { const { camera } = useThree() useEffect(() => { camera.position.set(0, 40, 80) camera.lookAt(0, 0, 0) }, [camera]) return ( <> ) } // Main component export default function FarmScene() { return (

Click and drag to explore. Use scroll to zoom.

) }

About

Tags

Share

More from jackbrugger

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jackbrugger

More Templates Like This