[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from "next" import { Inter } from 'next/font/google' import "./globals.css" import { cn } from "@/lib/utils" const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }) export const metadata: Metadata = { title: "Lumina | Digital Agency", description: "Shaping the future of digital experiences.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @theme inline { --font-sans: var(--font-sans); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --animate-blob: blob 7s infinite; --animate-float: float 6s ease-in-out infinite; @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } } :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 3%; --card-foreground: 0 0% 100%; --popover: 0 0% 3%; --popover-foreground: 0 0% 100%; --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%; --radius: 0.5rem; } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .glass { @apply bg-white/5 backdrop-blur-xl border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.36)]; } .glass-hover { @apply hover:bg-white/10 hover:border-white/20 transition-all duration-300; } .text-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-white via-white/80 to-white/50; } } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/glass-card.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ReactNode } from "react" interface GlassCardProps { children: ReactNode className?: string hoverEffect?: boolean } export function GlassCard({ children, className, hoverEffect = true }: GlassCardProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight } from 'lucide-react' export function Hero() { return (

{/* Background Liquid Elements */}

Available for new projects

Digital
Alchemy We transform complex ideas into fluid, intuitive digital experiences. Blending art, technology, and strategy to shape the future.

{/* Scroll Indicator */} Scroll

) } [V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true" "use client" import { GlassCard } from "@/components/ui/glass-card" import { motion } from "framer-motion" import { Code2, Palette, Rocket, Smartphone } from 'lucide-react' const services = [ { icon: , title: "Brand Identity", description: "Crafting visual systems that speak louder than words. We build brands that resonate and endure.", }, { icon: , title: "Digital Product", description: "User-centric interfaces designed for clarity and delight. From mobile apps to complex dashboards.", }, { icon: , title: "Development", description: "Clean, scalable code that powers your vision. We build robust solutions using cutting-edge tech.", }, { icon: , title: "Growth Strategy", description: "Data-driven insights to scale your digital presence. We help you reach and engage your audience.", }, ] export function Services() { return (

Our Expertise

{services.map((service, index) => (

{service.icon}

{service.title}

{service.description}

Learn more

))}

) } [V0_FILE]typescriptreact:file="components/work.tsx" isMerged="true" "use client" import { GlassCard } from "@/components/ui/glass-card" import { motion } from "framer-motion" import Image from "next/image" const projects = [ { title: "Neon Finance", category: "Fintech App", image: "/neon-finance-app-interface-dark-mode.jpg", color: "from-blue-500/20 to-cyan-500/20", }, { title: "Aura Health", category: "Wellness Platform", image: "/meditation-app-interface-soft-gradients.jpg", color: "from-purple-500/20 to-pink-500/20", }, { title: "Orbit Space", category: "Aerospace Website", image: "/space-website-interface-futuristic.jpg", color: "from-orange-500/20 to-red-500/20", }, ] export function Work() { return (

{/* Background Glow */}

Selected Work A showcase of our most recent digital transformations.

View All Projects

{projects.map((project, index) => (

{project.category}

{project.title}

Redefining the user experience through intuitive design and seamless interactions.

UX/UI Development

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Github, Twitter, Instagram, Linkedin } from 'lucide-react' export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Navbar } from "@/components/navbar" import { Hero } from "@/components/hero" import { Services } from "@/components/services" import { Work } from "@/components/work" import { Footer } from "@/components/footer" export default function Home() { return (

{/* Call to Action Section */}

Ready to shape
the future?

Let's collaborate to build something extraordinary. Your vision, our expertise.

{/* Background Gradient for CTA */}

) } [V0_FILE]jpg:file="public/neon-finance-app-interface-dark-mode.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/neon-finance-app-interface-dark-mode-e5wk7M3wUFDbTYnzBVAAxJgUwgBj9M.jpg" isMerged="true" [V0_FILE]jpg:file="public/meditation-app-interface-soft-gradients.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/meditation-app-interface-soft-gradients-rcJjd5iIVcporFYl4PxtodqViklZMm.jpg" isMerged="true" [V0_FILE]jpg:file="public/space-website-interface-futuristic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/space-website-interface-futuristic-hlnXtYYemzDyQUXS9XB7HXfTZEz8Hh.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": "16.0.3", "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": "^0.9.9", "zod": "3.25.76", "framer-motion": "12.23.24" }, "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]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, useScroll, useMotionValueEvent } from "framer-motion" import { Menu, X } from 'lucide-react' import { cn } from "@/lib/utils" import Link from "next/link" export function Navbar() { const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const { scrollY } = useScroll() useMotionValueEvent(scrollY, "change", (latest) => { setIsScrolled(latest > 50) }) const navLinks = [ { name: "Work", href: "#work" }, { name: "Services", href: "#services" }, { name: "About", href: "#about" }, { name: "Contact", href: "#contact" }, ] return (

Lumina. {/* Desktop Menu */}

{navLinks.map((link) => ( {link.name} ))}

{/* Mobile Menu Toggle */} {/* Mobile Menu Overlay */} {isMobileMenuOpen && (

{navLinks.map((link) => ( setIsMobileMenuOpen(false)} className="text-3xl font-light text-white hover:text-blue-400 transition-colors" > {link.name} ))}

)}

) }

{service.title}

{project.title}

Ready to shape the future?

Ready to shape
the future?

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This