[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import Features from "./components/Features" import Countdown from "./components/Countdown" import CTA from "./components/CTA" import Footer from "./components/Footer" export default function Home() { return (

) } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" const { fontFamily } = require("tailwindcss/defaultTheme") /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { "cyber-black": "#0a0a0a", "cyber-blue": "#00fff9", "cyber-pink": "#ff00ff", "cyber-yellow": "#ffff00", "cyber-green": "#39ff14", border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], cyber: ["Orbitron", "sans-serif"], }, 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 }, }, glow: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", glow: "glow 2s ease-in-out infinite", float: "float 3s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "irhamna.ai - The Future of AI", description: "Experience the next generation of AI with irhamna.ai", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .cyber-lines { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(to right, rgba(0, 255, 249, 0.1) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(0, 255, 249, 0.1) 1px, transparent 1px) 0 0 / 20px 20px; mask-image: radial-gradient(circle, transparent 0%, black 100%); } .cyber-glitch { position: relative; overflow: hidden; } .cyber-glitch::before, .cyber-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; } .cyber-glitch::before { left: 2px; text-shadow: -2px 0 #ff00ff; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } .cyber-glitch::after { left: -2px; text-shadow: -2px 0 #00fff9; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; } @keyframes glitch-anim { 0% { clip: rect(17px, 9999px, 94px, 0); } 5% { clip: rect(33px, 9999px, 145px, 0); } 10% { clip: rect(100px, 9999px, 30px, 0); } 15% { clip: rect(20px, 9999px, 130px, 0); } 20% { clip: rect(71px, 9999px, 40px, 0); } 25% { clip: rect(86px, 9999px, 128px, 0); } 30% { clip: rect(31px, 9999px, 130px, 0); } 35% { clip: rect(99px, 9999px, 7px, 0); } 40% { clip: rect(64px, 9999px, 89px, 0); } 45% { clip: rect(70px, 9999px, 30px, 0); } 50% { clip: rect(46px, 9999px, 146px, 0); } 55% { clip: rect(3px, 9999px, 11px, 0); } 60% { clip: rect(54px, 9999px, 63px, 0); } 65% { clip: rect(84px, 9999px, 88px, 0); } 70% { clip: rect(66px, 9999px, 135px, 0); } 75% { clip: rect(17px, 9999px, 79px, 0); } 80% { clip: rect(51px, 9999px, 55px, 0); } 85% { clip: rect(89px, 9999px, 140px, 0); } 90% { clip: rect(68px, 9999px, 56px, 0); } 95% { clip: rect(28px, 9999px, 46px, 0); } 100% { clip: rect(82px, 9999px, 37px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(129px, 9999px, 36px, 0); } 5% { clip: rect(36px, 9999px, 4px, 0); } 10% { clip: rect(85px, 9999px, 66px, 0); } 15% { clip: rect(91px, 9999px, 91px, 0); } 20% { clip: rect(148px, 9999px, 138px, 0); } 25% { clip: rect(38px, 9999px, 122px, 0); } 30% { clip: rect(69px, 9999px, 54px, 0); } 35% { clip: rect(98px, 9999px, 71px, 0); } 40% { clip: rect(146px, 9999px, 34px, 0); } 45% { clip: rect(134px, 9999px, 43px, 0); } 50% { clip: rect(102px, 9999px, 80px, 0); } 55% { clip: rect(119px, 9999px, 44px, 0); } 60% { clip: rect(106px, 9999px, 99px, 0); } 65% { clip: rect(141px, 9999px, 74px, 0); } 70% { clip: rect(20px, 9999px, 78px, 0); } 75% { clip: rect(133px, 9999px, 79px, 0); } 80% { clip: rect(78px, 9999px, 52px, 0); } 85% { clip: rect(35px, 9999px, 39px, 0); } 90% { clip: rect(67px, 9999px, 70px, 0); } 95% { clip: rect(71px, 9999px, 103px, 0); } 100% { clip: rect(83px, 9999px, 40px, 0); } } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" import Link from "next/link" export default function Header() { return (

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" export default function Hero() { const [text, setText] = useState("") const fullText = "The AI of tomorrow, launching today" useEffect(() => { let i = 0 const typingEffect = setInterval(() => { if (i < fullText.length) { setText((prevText) => prevText + fullText.charAt(i)) i++ } else { clearInterval(typingEffect) } }, 100) return () => clearInterval(typingEffect) }, []) return (

Welcome to irhamna.ai

{text}

Initialize Neural Link

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isEdit="true" "use client" import { useState } from "react" import { Cpu, Zap, Lock } from "lucide-react" const features = [ { icon: , title: "Quantum AI", description: "Powered by cutting-edge quantum algorithms", }, { icon: , title: "Neural Boost", description: "Enhance your cognitive abilities instantly", }, { icon: , title: "Cyber Secure", description: "Military-grade encryption for your data", }, ] export default function Features() { const [hoveredIndex, setHoveredIndex] = useState(null) return (

Augmented Features

{features.map((feature, index) => (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/Countdown.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" export default function Countdown() { const [timeLeft, setTimeLeft] = useState(getTimeLeft()) useEffect(() => { const timer = setInterval(() => { setTimeLeft(getTimeLeft()) }, 1000) return () => clearInterval(timer) }, []) function getTimeLeft() { const difference = +new Date("2024-01-31") - +new Date() let timeLeft = {} if (difference > 0) { timeLeft = { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), } } return timeLeft } return (

System Launch Imminent

{Object.entries(timeLeft).map(([unit, value]) => (

{value}

{unit}

))}

) } [V0_FILE]typescriptreact:file="app/components/CTA.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" export default function CTA() { const [email, setEmail] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically send the email to your server console.log("Submitted email:", email) setEmail("") alert("Thank you for joining the neural network!") } return (

Join the Neural Network

Plug in now for early access and system upgrades!

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" import Link from "next/link" export default function Footer() { return ( ) }