[V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-space-grotesk)"], mono: ["var(--font-mono)"], }, keyframes: { shimmer: { "0%": { backgroundPosition: "200% 50%" }, "100%": { backgroundPosition: "-200% 50%" }, }, }, animation: { shimmer: "shimmer 8s ease-in-out infinite", }, 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))", }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="layout.tsx" import { Space_Grotesk } from "next/font/google" import { JetBrains_Mono } from "next/font/google" import type React from "react" import type { Metadata } from "next" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-space-grotesk", }) const jetBrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: { default: "Graphyn | Contextual Intelligence Layer", template: "%s | Graphyn", }, description: "Graphyn provides a powerful SDK for seamless integration of personalized, context-aware features in your applications.", keywords: [ "contextual intelligence", "AI", "machine learning", "personalization", "SDK", "developer tools", "context-aware", "user experience", ], authors: [{ name: "Graphyn" }], creator: "Graphyn", publisher: "Graphyn", robots: { index: true, follow: true, }, icons: { icon: [ { url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", sizes: "32x32", type: "image/png", }, { url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", sizes: "192x192", type: "image/png", }, ], shortcut: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", apple: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", }, manifest: "/site.webmanifest", openGraph: { type: "website", locale: "en_US", url: "https://graphyn.xyz", siteName: "Graphyn", title: "Graphyn | Contextual Intelligence Layer", description: "Graphyn provides a powerful SDK for seamless integration of personalized, context-aware features in your applications.", images: [ { url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", width: 1200, height: 630, alt: "Graphyn Logo", }, ], }, twitter: { card: "summary_large_image", title: "Graphyn | Contextual Intelligence Layer", description: "Graphyn provides a powerful SDK for seamless integration of personalized, context-aware features in your applications.", images: [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", ], creator: "@graphyn", site: "@graphyn", }, viewport: { width: "device-width", initialScale: 1, maximumScale: 5, }, applicationName: "Graphyn", appleWebApp: { capable: true, title: "Graphyn", statusBarStyle: "black-translucent", }, formatDetection: { telephone: false, }, themeColor: "#924FE8", category: "technology", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="public/site.webmanifest" { "name": "Graphyn", "short_name": "Graphyn", "description": "Contextual Intelligence Layer", "start_url": "/", "display": "standalone", "background_color": "#0B0C0E", "theme_color": "#924FE8", "icons": [ { "src": "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", "sizes": "192x192", "type": "image/png" }, { "src": "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Group%201171274909-6qAc0l9yFtnmWK0yfTDOWwiPgp4bEd.png", "sizes": "512x512", "type": "image/png" } ] } [V0_FILE]typescriptreact:file="page.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Play, Menu } from "lucide-react" import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" export default function Home() { const [isPlaying, setIsPlaying] = useState(false) const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, } const staggerChildren = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, } return ( {/* Header */}

{isMobileMenuOpen && (

)} {/* Hero Section */}

Empower your apps with contextual intelligence Graphyn provides a powerful SDK for seamless integration of personalized, context-aware features in your applications.

{/* Video Demo Section */}

{/* Browser Window Mockup */}

{/* Browser Controls */}

graphyn.xyz

{/* Video/Content Area */}

{isPlaying ? (

About

About