[V0_FILE]css:file="app/globals.css" isMerged="true" @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; } html { @apply scroll-smooth; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "TechNova - The Future of Technology", description: "Discover cutting-edge solutions that transform the way you interact with technology.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/dotted-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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: "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))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, 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", }, backgroundImage: { "dots-pattern": "radial-gradient(transparent 1px, white 1px)", "dots-pattern-dark": "radial-gradient(transparent 1px, rgb(0 0 0) 1px)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "name": "dark-themed-landing-page", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "framer-motion": "^11.0.8", "lucide-react": "^0.344.0", "next": "14.1.0", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/interactive/cloud-platform.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Server, Database, Globe, Cloud, Cpu, ArrowRight } from "lucide-react" export function CloudPlatform() { const [activeServer, setActiveServer] = useState(null) const [isLoading, setIsLoading] = useState(false) const [deployStatus, setDeployStatus] = useState(null) // Simulate server selection and deployment const handleServerClick = (index: number) => { setActiveServer(index) setIsLoading(true) setDeployStatus(null) setTimeout(() => { setIsLoading(false) setDeployStatus("Deployed successfully") }, 1500) } // Auto-cycle through servers for demo effect useEffect(() => { const interval = setInterval(() => { if (!isLoading) { setActiveServer((prev) => { const next = prev === null ? 0 : (prev + 1) % 6 return next }) } }, 3000) return () => clearInterval(interval) }, [isLoading]) return (

TechNova Cloud Console

All Systems Operational

CPU Usage 24%

Storage 1.2 TB

Regions 12 Active

Global Server Network

{Array.from({ length: 6 }).map((_, index) => ( ))}

Deployment Status

Auto-scaling enabled

{isLoading ? (

Deploying to Region {activeServer !== null ? activeServer + 1 : "..."}

) : deployStatus ? (

{deployStatus}

) : (

{activeServer !== null ? ( Select a region to deploy your application ) : ( Select a region to deploy your application )}

)}

{activeServer !== null ? `Connected to Region ${activeServer + 1}` : "Not connected"}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import LandingPage from "@/components/landing-page" export default function Home() { return } [V0_FILE]typescriptreact:file="components/interactive/security-platform.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Shield, AlertTriangle, Lock, Eye, RefreshCw } from "lucide-react" import { useMediaQuery } from "@/hooks/use-media-query" export function SecurityPlatform() { const [securityScore, setSecurityScore] = useState(87) const [threatLevel, setThreatLevel] = useState("Low") const [isScanning, setIsScanning] = useState(false) const [vulnerabilities, setVulnerabilities] = useState([ { id: 1, severity: "High", status: "Open", description: "Outdated SSL certificate" }, { id: 2, severity: "Medium", status: "Fixed", description: "Weak password policy" }, { id: 3, severity: "Low", status: "Open", description: "Unused open ports" }, { id: 4, severity: "Medium", status: "Open", description: "Missing security headers" }, ]) const isMobile = useMediaQuery("(max-width: 768px)") // Simulate security scan const runSecurityScan = () => { setIsScanning(true) setTimeout(() => { // Randomly update security score const newScore = Math.min(100, Math.max(60, securityScore + (Math.random() > 0.5 ? 2 : -2))) setSecurityScore(newScore) // Update threat level based on score if (newScore >= 90) setThreatLevel("Very Low") else if (newScore >= 80) setThreatLevel("Low") else if (newScore >= 70) setThreatLevel("Moderate") else setThreatLevel("High") // Update vulnerabilities const updatedVulnerabilities = [...vulnerabilities] const randomIndex = Math.floor(Math.random() * updatedVulnerabilities.length) if (Math.random() > 0.7) { updatedVulnerabilities[randomIndex].status = updatedVulnerabilities[randomIndex].status === "Open" ? "Fixed" : "Open" } setVulnerabilities(updatedVulnerabilities) setIsScanning(false) }, 2000) } // Auto scan periodically useEffect(() => { const interval = setInterval(() => { if (!isScanning) { runSecurityScan() } }, 8000) return () => clearInterval(interval) }, [isScanning, vulnerabilities, securityScore]) return (

TechNova Security

Security Score

= 80 ? "bg-green-500" : securityScore >= 60 ? "bg-yellow-500" : "bg-red-500" }`} initial={{ width: 0 }} animate={{ width: `${securityScore}%` }} transition={{ duration: 0.5 }} />

{securityScore}/100 {threatLevel} Threat Level

Protection Status

{[ { label: "Firewall", status: "Active", icon: Lock }, { label: "Intrusion Detection", status: "Active", icon: Eye }, { label: "Data Encryption", status: "Active", icon: Lock }, { label: "Vulnerability Scanner", status: isScanning ? "Scanning" : "Ready", icon: RefreshCw }, ].map((item, index) => (

{item.label}

{item.status}

))}

{/* Threat Map - Hide on mobile */} {!isMobile && (

Threat Map

Live

{/* World map grid representation */}

{Array.from({ length: 72 }).map((_, i) => (

))}

{/* Animated threat points */} {[ { x: "20%", y: "30%", size: 3 }, { x: "70%", y: "20%", size: 4 }, { x: "40%", y: "60%", size: 2 }, { x: "85%", y: "40%", size: 3 }, { x: "30%", y: "70%", size: 5 }, { x: "60%", y: "50%", size: 2 }, ].map((point, index) => ( ))} {/* Connection lines */} {[ { x1: "20%", y1: "30%", x2: "70%", y2: "20%" }, { x1: "70%", y1: "20%", x2: "40%", y2: "60%" }, { x1: "40%", y1: "60%", x2: "85%", y2: "40%" }, { x1: "30%", y1: "70%", x2: "60%", y2: "50%" }, ].map((line, index) => ( ))}

)}

Vulnerabilities

{vulnerabilities.filter((v) => v.status === "Open").length} open

{vulnerabilities.slice(0, isMobile ? 2 : 4).map((vuln) => (

{vuln.severity === "High" ? ( ) : vuln.severity === "Medium" ? ( ) : ( )} {vuln.description}

{vuln.severity} {vuln.status}

))}

) } [V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false) useEffect(() => { const media = window.matchMedia(query) if (media.matches !== matches) { setMatches(media.matches) } const listener = () => setMatches(media.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [matches, query]) return matches } [V0_FILE]typescriptreact:file="components/interactive/analytics-platform.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { BarChart3, PieChart, LineChart, ArrowUpRight, ArrowDownRight, RefreshCw } from "lucide-react" import { useMediaQuery } from "@/hooks/use-media-query" export function AnalyticsPlatform() { const [activeTab, setActiveTab] = useState("overview") const [isRefreshing, setIsRefreshing] = useState(false) const [chartData, setChartData] = useState([65, 59, 80, 81, 56, 55, 40]) const isMobile = useMediaQuery("(max-width: 768px)") const isVerySmall = useMediaQuery("(max-width: 500px)") // Simulate data refresh const refreshData = () => { setIsRefreshing(true) setTimeout(() => { setChartData(Array.from({ length: 7 }, () => Math.floor(Math.random() * 60) + 20)) setIsRefreshing(false) }, 1000) } // Auto refresh data periodically useEffect(() => { const interval = setInterval(() => { if (!isRefreshing) { refreshData() } }, 5000) return () => clearInterval(interval) }, [isRefreshing]) return (

TechNova Analytics

{[ { id: "overview", label: "Overview", icon: BarChart3 }, { id: "performance", label: isVerySmall ? "Perf" : "Performance", icon: LineChart }, { id: "distribution", label: isVerySmall ? "Dist" : "Distribution", icon: PieChart }, ].map((tab) => ( ))}

{[ { label: "Total Users", value: isVerySmall ? "24.5k" : "24,521", change: "+12%", isPositive: true }, { label: "Conv Rate", value: "12.3%", change: "+2%", isPositive: true }, { label: "Avg Session", value: isVerySmall ? "4m" : "4m 23s", change: "-3%", isPositive: false }, { label: "Bounce Rate", value: "32.4%", change: "-5%", isPositive: true }, ].map((stat, index) => (

{stat.label}

{stat.value}

{stat.change} {stat.isPositive ? ( ) : ( )}

))}

Weekly Trend

{!isVerySmall && (

This Week

Last Week

)}

{chartData.map((value, index) => (

{!isVerySmall && (

{value}%

)} {!isVerySmall && (

{["M", "T", "W", "T", "F", "S", "S"][index]}

)}

))}

Top Sources

Last 30d

{[ { source: "Direct", percentage: 42, color: "bg-blue-500" }, { source: isVerySmall ? "Search" : "Organic Search", percentage: 28, color: "bg-purple-500" }, { source: isVerySmall ? "Social" : "Social Media", percentage: 18, color: "bg-green-500" }, { source: "Referral", percentage: 12, color: "bg-yellow-500" }, ].map((item, index) => (

{item.source} {item.percentage}%

))}

) } [V0_FILE]typescriptreact:file="components/interactive/team-visualization.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Users, User, Briefcase, Code, Palette, MessageSquare } from "lucide-react" import { useMediaQuery } from "@/hooks/use-media-query" export function TeamVisualization() { const [activeTeam, setActiveTeam] = useState("engineering") const [teamMembers, setTeamMembers] = useState([]) const isMobile = useMediaQuery("(max-width: 768px)") const isVerySmall = useMediaQuery("(max-width: 500px)") // Define team data const teams = [ { id: "engineering", name: isVerySmall ? "Eng" : "Engineering", icon: Code, color: "text-blue-500", count: isVerySmall ? 6 : isMobile ? 8 : 24, }, { id: "design", name: "Design", icon: Palette, color: "text-purple-500", count: isVerySmall ? 4 : isMobile ? 6 : 12, }, { id: "product", name: isVerySmall ? "Prod" : "Product", icon: Briefcase, color: "text-green-500", count: isVerySmall ? 3 : isMobile ? 4 : 8, }, { id: "support", name: isVerySmall ? "Supp" : "Support", icon: MessageSquare, color: "text-yellow-500", count: isVerySmall ? 4 : isMobile ? 6 : 16, }, ] // Generate team members when active team changes useEffect(() => { if (!activeTeam) return const team = teams.find((t) => t.id === activeTeam) if (!team) return // Generate random team members const members = Array.from({ length: team.count }, (_, i) => ({ id: i, name: `Team Member ${i + 1}`, role: team.id === "engineering" ? ["Frontend", "Backend", "DevOps", "QA"][i % 4] : team.id === "design" ? ["UI", "UX", "Visual", "Motion"][i % 4] : team.id === "product" ? ["Manager", "Owner", "Analyst", "Strategist"][i % 4] : ["L1", "L2", "L3", "Manager"][i % 4], x: Math.random() * 80 + 10, // 10-90% y: Math.random() * 80 + 10, // 10-90% })) setTeamMembers(members) }, [activeTeam, isMobile, isVerySmall]) return (

TechNova Team

{isVerySmall ? "60+" : "60+ Team Members"}

{teams.map((team) => ( ))}

{activeTeam ? teams.find((t) => t.id === activeTeam)?.name : "All"} Team

{activeTeam ? teams.find((t) => t.id === activeTeam)?.count : 0} {isVerySmall ? "" : "members"}

{/* Team visualization */} {teamMembers.map((member) => (

{!isVerySmall && !isMobile && (

{member.role}

)} ))} {/* Connection lines - only show on larger screens */} {!isMobile && teamMembers.length > 0 && ( )}

{isVerySmall ? "Collab" : "Team Collaboration"}

{activeTeam === "engineering" ? "85%" : activeTeam === "design" ? "92%" : activeTeam === "product" ? "78%" : "88%"}

{isVerySmall ? "Prod" : "Productivity"}

{activeTeam === "engineering" ? "92%" : activeTeam === "design" ? "88%" : activeTeam === "product" ? "95%" : "82%"}

) } [V0_FILE]typescriptreact:file="components/landing-page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { ArrowRight, CheckCircle, Code, Cpu, Github, Globe, Menu, MessageSquare, Twitter, X } from "lucide-react" import Link from "next/link" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dotted-dialog" import { motion, AnimatePresence } from "framer-motion" import Image from "next/image" import { CloudPlatform } from "./interactive/cloud-platform" import { AnalyticsPlatform } from "./interactive/analytics-platform" import { SecurityPlatform } from "./interactive/security-platform" import { TeamVisualization } from "./interactive/team-visualization" import { useMediaQuery } from "@/hooks/use-media-query" export default function LandingPage() { const [isModalOpen, setIsModalOpen] = useState(false) const [email, setEmail] = useState("") const [isMenuOpen, setIsMenuOpen] = useState(false) const [scrollY, setScrollY] = useState(0) const isVerySmall = useMediaQuery("(max-width: 500px)") useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const headerClass = scrollY > 50 ? "py-4 bg-black/80 backdrop-blur-md border-b border-gray-800/50" : "py-6 bg-transparent" return (

{/* Header */}

TechNova

{/* Mobile Menu */} {isMenuOpen && (

{["Features", "Products", "About", "Testimonials"].map((item) => ( setIsMenuOpen(false)} > {item} ))}

)} {/* Hero Section */}

The Future of Technology is Here Discover cutting-edge solutions that transform the way you interact with technology. Powerful, intuitive, and designed for the future.

{/* Dashboard Header */}

System Status: Online

{/* Dashboard Tabs */}

{/* Stats Cards */}

{[ { label: "Total Users", value: "24,521", change: "+12%", color: "text-green-500" }, { label: "Revenue", value: "$42,500", change: "+8%", color: "text-green-500" }, { label: "Active Sessions", value: "1,293", change: "-3%", color: "text-red-500" }, { label: "Conversion Rate", value: "12.3%", change: "+2%", color: "text-green-500" }, ].map((stat, index) => (

{stat.label}

{stat.value}

{stat.change}

))}

{/* Chart */}

Revenue Overview

This Month

Last Month

{/* Interactive Chart */}

{[35, 45, 30, 60, 75, 45, 55, 70, 60, 75, 85, 65].map((height, index) => (

${Math.floor(height * 120)}: {index + 1} Jan

{index + 1}

))}

{/* Table */}

Recent Transactions

{[ { id: "#TRX-5632", customer: "John Smith", amount: "$125.00", status: "Completed", date: "Today, 2:30 PM", }, { id: "#TRX-5631", customer: "Alice Johnson", amount: "$250.00", status: "Pending", date: "Today, 11:15 AM", }, { id: "#TRX-5630", customer: "Robert Brown", amount: "$350.00", status: "Completed", date: "Yesterday, 3:45 PM", }, ].map((transaction, index) => ( ))}

ID	Customer	Amount	Status	Date
{transaction.id}	{transaction.customer}	{transaction.amount}	{transaction.status}	{transaction.date}

{/* Features Section */}

Powerful Features

Our platform offers a comprehensive suite of tools designed to enhance your productivity and streamline your workflow.

{[ { icon:

,
                title: "Advanced API",
                description:
                  "Integrate seamlessly with our robust API designed for developers with comprehensive documentation and examples.",
              },
              {
                icon: ,
                title: "Global CDN",
                description:
                  "Lightning-fast content delivery across our worldwide network with 99.9% uptime guarantee.",
              },
              {
                icon: ,
                title: "Reliable Security",
                description:
                  "Enterprise-grade security with end-to-end encryption and compliance with industry standards.",
              },
              {
                icon: ,
                title: "AI-Powered",
                description:
                  "Leverage the power of artificial intelligence to optimize your workflow and gain valuable insights.",
              },
              {
                icon: ,
                title: "24/7 Support",
                description:
                  "Our dedicated team is always available to assist you with any issues through multiple channels.",
              },
              {
                icon: ,
                title: "Open Source",
                description:
                  "Contribute to our growing ecosystem of open-source tools and libraries with active community support.",
              },
            ].map((feature, index) => (
              
                
                  
                    {feature.icon}
                    {feature.title}
                    {feature.description}
                  
                
              
            ))}



      {/* Products Section */}
      
        

        
          
            
              Our Products
              
                Explore our suite of innovative products designed to transform your digital experience.
              
            
          

          
            {/* TechNova Cloud */}
            
              
                TechNova Cloud
                
                  A scalable cloud platform that adapts to your needs. Deploy applications with ease and manage
                  resources efficiently.
                
                
                  {["Auto-scaling", "Global distribution", "Pay-as-you-go pricing", "99.9% uptime SLA"].map(
                    (feature, i) => (
                      
                        
                        {feature}
                      
                    ),
                  )}
                
                
              

              
                
                  
                    
                  
                
              
            

            {/* TechNova Analytics */}
            
              
                TechNova Analytics
                
                  Gain valuable insights from your data with our powerful analytics platform. Make data-driven decisions
                  with confidence.
                
                
                  {["Real-time dashboards", "Custom reports", "AI-powered predictions", "Data visualization"].map(
                    (feature, i) => (
                      
                        
                        {feature}
                      
                    ),
                  )}
                
                
              

              
                
                  
                    
                  
                
              
            

            {/* TechNova Security */}
            
              
                TechNova Security
                
                  Protect your digital assets with our comprehensive security solution. Stay ahead of threats with
                  advanced protection.
                
                
                  {[
                    "Threat detection",
                    "Vulnerability scanning",
                    "Compliance monitoring",
                    "24/7 security operations",
                  ].map((feature, i) => (
                    
                      
                      {feature}
                    
                  ))}
                
                
              

              
                
                  
                    
                  
                
              
            
          
        
      

      {/* About Section */}
      
        

        
          
            
              About Our Mission
              
                Founded in 2023, TechNova was created with a singular vision: to democratize access to cutting-edge
                technology. We believe that powerful tools should be accessible to everyone, regardless of technical
                expertise.
              
              
                Our team of passionate engineers and designers work tirelessly to create intuitive, powerful solutions
                that solve real-world problems and empower our users to achieve more.
              
              
                
                  50+ Team Members
                
                
                  10k+ Customers
                
                
                  99.9% Uptime
                
              
              
            

            
              
                
                
                  
                    
                  
                
              
            
          
        
      

      {/* Testimonials Section */}
      
        

        
          
            
              What Our Clients Say
              
                Don't just take our word for it. Here's what our clients have to say about their experience with
                TechNova.
              
            
          

          
            {[
              {
                name: "Sarah Johnson",
                role: "CTO, TechStart Inc.",
                image: "https://avatar.vercel.sh/jill",
                content:
                  "TechNova has completely transformed our development workflow. The platform's intuitive design and powerful features have increased our team's productivity by over 40%.",
              },
              {
                name: "Michael Chen",
                role: "Founder, DataFlow",
                image: "https://avatar.vercel.sh/jill",
                content:
                  "Implementing TechNova was one of the best decisions we've made. The seamless integration and robust API have allowed us to focus on what matters most - building great products.",
              },
              {
                name: "Emily Rodriguez",
                role: "Lead Developer, InnovateCorp",
                image: "https://avatar.vercel.sh/jill",
                content:
                  "As a developer, I appreciate the attention to detail in TechNova's platform. The documentation is comprehensive, and the support team is always ready to help.",
              },
            ].map((testimonial, index) => (
              
                
                  
                    
                      
                        
                      
                      
                        {testimonial.name}
                        {testimonial.role}
                      
                    
                    "{testimonial.content}"
                  
                
              
            ))}
          
        
      

      {/* Contact Section */}
      
        

        
          
            
              Ready to Get Started?
              
                Join thousands of satisfied users who have already transformed their workflow with TechNova.
              
            

            
              
                
                  Contact Us
                  
                    
                      
                        
                          Name
                        
                        
                      
                      
                        
                          Email
                        
                        
                      
                    
                    
                      
                        Subject
                      
                      
                    
                    
                      
                        Message
                      
                      
                    
                    
                  
                
              
            
          
        
      

      {/* Footer */}
      
        

        
          
            
              
                
                TechNova
              
              
                Empowering innovation through technology. We build tools that help businesses thrive in the digital age.
              
              
                
                  
                
                
                  
                
              
            

            
              Products
              
                {["Cloud Platform", "Analytics", "Security", "API", "Documentation"].map((item) => (
                  
                    
                      {item}
                    
                  
                ))}
              
            

            
              Company
              
                {["About", "Careers", "Blog", "Press", "Partners"].map((item) => (
                  
                    
                      {item}
                    
                  
                ))}
              
            

            
              Legal
              
                {["Terms", "Privacy", "Cookies", "Licenses", "Contact"].map((item) => (
                  
                    
                      {item}
                    
                  
                ))}
              
            
          

          
            © {new Date().getFullYear()} TechNova. All rights reserved.
            
              
                Privacy Policy
              
              
                Terms of Service
              
              
                Cookies
              
            
          
        
      

      {/* Modal */}
       !open && setIsModalOpen(false)}>
        
          
            Get Early Access
            
              Join our exclusive beta program and be among the first to experience the future of technology.
            
          
          
            
              Email
               setEmail(e.target.value)}
                className="bg-gray-800/50 border-gray-700 focus:border-purple-500"
              />
            
            
              Full Name
              
            
            
              Company (Optional)

)
}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This