[V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match cyberpunk aesthetic */ --background: #1f2937; --foreground: #ffffff; --card: #374151; --card-foreground: #f0fdf4; --popover: #1f2937; --popover-foreground: #ffffff; --primary: #15803d; --primary-foreground: #ffffff; --secondary: #374151; --secondary-foreground: #84cc16; --muted: #6b7280; --muted-foreground: #f0fdf4; --accent: #84cc16; --accent-foreground: #1f2937; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #6b7280; --input: #374151; --ring: #84cc16; --chart-1: #15803d; --chart-2: #f59e0b; --chart-3: #dc2626; --chart-4: #8b5cf6; --chart-5: #f59e0b; --radius: 0.5rem; --sidebar: #1f2937; --sidebar-foreground: #ffffff; --sidebar-primary: #15803d; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #84cc16; --sidebar-accent-foreground: #1f2937; --sidebar-border: #6b7280; --sidebar-ring: #84cc16; } .dark { --background: #0f172a; --foreground: #ffffff; --card: #1e293b; --card-foreground: #f0fdf4; --popover: #0f172a; --popover-foreground: #ffffff; --primary: #22c55e; --primary-foreground: #0f172a; --secondary: #1e293b; --secondary-foreground: #84cc16; --muted: #475569; --muted-foreground: #94a3b8; --accent: #84cc16; --accent-foreground: #0f172a; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #475569; --input: #1e293b; --ring: #84cc16; --chart-1: #22c55e; --chart-2: #f59e0b; --chart-3: #ef4444; --chart-4: #8b5cf6; --chart-5: #f59e0b; --sidebar: #0f172a; --sidebar-foreground: #ffffff; --sidebar-primary: #22c55e; --sidebar-primary-foreground: #0f172a; --sidebar-accent: #84cc16; --sidebar-accent-foreground: #0f172a; --sidebar-border: #475569; --sidebar-ring: #84cc16; } @theme inline { --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; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Space_Grotesk, DM_Sans } from "next/font/google" import "./globals.css" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], display: "swap", variable: "--font-space-grotesk", }) const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dm-sans", }) export const metadata: Metadata = { title: "WhatsMyName.wiki - Discover Your Digital Footprint", description: "Uncover usernames across hundreds of platforms with WhatsMyName, the powerful OSINT username search tool.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Search, Shield, Zap, ExternalLink, Globe } from "lucide-react" export default function HomePage() { return (

{/* Hero Section */}

OSINT Username Search Tool

Discover Your Digital Footprint

Uncover usernames across hundreds of platforms effortlessly with WhatsMyName, the most comprehensive OSINT username search tool available.

{/* Feature Highlights */}

Powerful OSINT Capabilities

Advanced username reconnaissance across the digital landscape

Comprehensive Search

Access profiles from social media platforms to forums, covering hundreds of websites in a single search.

Privacy Insights

Understand your online presence and potential privacy risks across multiple platforms and services.

Real-time Results

Get instant updates on username availability and profile discoveries across the web.

{/* Stats Section */}

500+

Websites Covered

1M+

Searches Performed

99.9%

Uptime Reliability

{/* CTA Section */}

Ready to Explore Your Digital Identity?

Join thousands of OSINT researchers, cybersecurity professionals, and privacy-conscious users who trust WhatsMyName.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null }