Moving Text Section

[V0_FILE]html:file="index.html" isEdit="true" isQuickEdit="true" isMerged="true" Moving Text Section

EAT. DRINK. PLAY. WATCH. EAT. DRINK. PLAY. WATCH. EAT. DRINK. PLAY. WATCH. EAT. DRINK. PLAY. WATCH. EAT. DRINK. PLAY. WATCH. EAT. DRINK. PLAY. WATCH.

[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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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.67" }, "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]typescriptreact:file="app/page.tsx" isMerged="true" import MovingTextSection from "@/components/moving-text-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/moving-text-section.tsx" isMerged="true" "use client" import { useState } from "react" import styles from "./moving-text-section.module.css" export default function MovingTextSection() { const [isPaused, setIsPaused] = useState(false) const handleReserveClick = () => { alert("Table reservation clicked!") } const handleMouseEnter = () => { setIsPaused(true) } const handleMouseLeave = () => { setIsPaused(false) } const textItems = Array(6).fill("EAT. DRINK. PLAY. WATCH.") return (

{textItems.map((text, index) => ( {text} ))}

) } [V0_FILE]css:file="components/moving-text-section.module.css" isEdit="true" isQuickEdit="true" .container { font-family: Arial, sans-serif; } .headerSection { background: linear-gradient(135deg, #4a5fc1, #3b4ba8); padding: 40px 20px; text-align: center; position: relative; } .reserveBtn { background-color: #ff4444; color: white; padding: 12px 30px; border: none; border-radius: 25px; font-size: 14px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; } .reserveBtn:hover { background-color: #e63939; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3); } .marqueeContainer { overflow: hidden; white-space: nowrap; padding: 15px 0; position: relative; } /* First marquee with rotation and positioning for crossing effect */ .firstMarquee { background: linear-gradient(135deg, #ff6b35, #f7931e); transform: rotate(-8deg); z-index: 2; margin-bottom: -25px; margin-top: -15px; } /* Second marquee with opposite rotation for crossing effect */ .secondMarquee { background: linear-gradient(135deg, #e55a2b, #d4821a); transform: rotate(8deg); z-index: 1; margin-top: -25px; margin-bottom: -15px; } .marqueeContent { display: flex; animation: scrollLeftDiagonal 20s linear infinite; } .marqueeContentReverse { display: flex; animation: scrollRightDiagonal 25s linear infinite; } .paused { animation-play-state: paused !important; } .textItem { color: white; font-size: 18px; font-weight: bold; letter-spacing: 2px; margin-right: 50px; white-space: nowrap; } .textItemReverse { color: white; font-size: 18px; font-weight: bold; letter-spacing: 2px; margin-left: 50px; white-space: nowrap; } /* Keyframe animations for diagonal crossing movement */ @keyframes scrollLeftDiagonal { 0% { transform: translateX(100%) translateY(-20px); } 50% { transform: translateX(0%) translateY(20px); } 100% { transform: translateX(-100%) translateY(-20px); } } @keyframes scrollRightDiagonal { 0% { transform: translateX(-100%) translateY(20px); } 50% { transform: translateX(0%) translateY(-20px); } 100% { transform: translateX(100%) translateY(20px); } }