# Versai Studio

> AI-powered creative studio specializing in AI-driven video, image generation, branding, and motion design. Built with Next.js 16, React 19, TypeScript, and Tailwind CSS. Features interactive 3D logo, video backgrounds, and comprehensive analytics.

Versai Studio is a modern portfolio website showcasing an AI creative studio. The site features immersive video backgrounds, an interactive 3D logo with mouse tracking, smooth Framer Motion animations, and a full-featured contact system with Formspree integration.

The project uses Next.js App Router architecture with server and client components, implements SEO best practices with structured data (Schema.org), Open Graph tags, and is GDPR-compliant with cookie consent management and Google Tag Manager integration.

## Tech Stack

- **Framework**: Next.js 16.1.6 (App Router)
- **React**: 19.2.4
- **TypeScript**: 5.7.3
- **Styling**: Tailwind CSS 4.2.0
- **UI Components**: Radix UI primitives (shadcn/ui)
- **Animations**: Framer Motion 12.34.5
- **Forms**: React Hook Form + Zod validation
- **Analytics**: Vercel Analytics + Google Tag Manager
- **Fonts**: Neo Chic (custom), Instrument Serif (Google)

## Key Features

- Video background with mesh gradient overlay
- Interactive 3D logo with mouse tracking (desktop)
- Floating photo cards with parallax animations
- Custom cursor for desktop
- Contact form with Formspree integration
- GDPR-compliant cookie consent
- Google My Business integration
- SEO optimized (structured data, Open Graph, Twitter Cards)
- PWA support with web manifest
- Responsive design (mobile-first)

## Project Structure

- [Homepage](/) - Main landing page with video background and hero section
- [Contact Page](/contact) - Dedicated contact form page
- [Social Media](https://www.instagram.com/versai_studio/) - Instagram, LinkedIn, TikTok profiles

## Docs

- [Site Configuration](https://github.com/icilev/versai-website/blob/main/lib/site-config.ts) - Central configuration for metadata, social links, SEO
- [Components Overview](https://github.com/icilev/versai-website/blob/main/components/) - React components directory
- [App Router Structure](https://github.com/icilev/versai-website/blob/main/app/) - Next.js app directory

## Development

### Commands
```bash
npm run dev        # Start development server (localhost:3000)
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint
```

### Environment Variables
- `NEXT_PUBLIC_FORMSPREE_ENDPOINT` - Contact form endpoint (required)
- `NEXT_PUBLIC_GTM_ID` - Google Tag Manager ID (optional)

## Design System

**Colors**: Green accents (#10b981, #22c55e), Light theme (#f0faf5)

**Typography**:
- Headings: Neo Chic (custom sans-serif)
- Accent text: Instrument Serif (italic for "Studio")
- Body: Neo Chic Regular

**Animations**: Fade-in-up on scroll, hover scale transformations, custom cursor interactions

## SEO & Analytics

- Structured data (LocalBusiness and Organization schemas)
- Complete Open Graph and Twitter Cards
- Google Tag Manager with consent mode v2
- Vercel Analytics for performance metrics
- Google My Business profile integration

## Deployment

- **Platform**: Vercel
- **URL**: https://versai.studio
- **Branch**: main (auto-deploy)
- **Node**: 18.x or higher

## Optional

Additional technical details:

### Core Components

- **Navbar** (`components/navbar.tsx`) - Sticky navigation with glassmorphism, mobile menu, "Available for projects" badge
- **Hero Section** (`components/hero-section.tsx`) - Main landing section with headline, CTA, floating photos
- **Contact Modal** (`components/contact-modal.tsx`) - Form with validation, Formspree integration, success/error states
- **Logo Interactive** (`components/LogoInteractive.tsx`) - 3D interactive logo with mouse tracking (canvas-based)
- **Floating Photos** (`components/floating-photos.tsx`) - Animated photo cards with parallax effects
- **Social Links** (`components/social-links.tsx`) - Fixed social media icons (Instagram, LinkedIn, TikTok)
- **Cookie Banner** (`components/CookieBanner.tsx`) - GDPR-compliant consent with GTM integration
- **Custom Cursor** (`components/CustomCursor.tsx`) - Enhanced desktop cursor experience

### Utilities

- **Site Config** (`lib/site-config.ts`) - Single source of truth for all site metadata, social links, SEO settings
- **Utils** (`lib/utils.ts`) - Tailwind class merge utilities (`cn()` function)
- **Consent** (`lib/consent.ts`) - Cookie consent management (localStorage + GTM)
- **Logo Segments** (`lib/logoSegments.ts`) - 3D logo path data for interactive animation

### Styling

- Custom animations in `app/globals.css` (fade-in-up, float effects)
- Glassmorphism effects (backdrop-blur + semi-transparent backgrounds)
- Gradient text effects
- Rainbow border effects for CTAs
- Responsive breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)

### Best Practices

- Server Components by default, Client Components only when needed
- Type-safe with full TypeScript coverage
- Accessible (ARIA labels, semantic HTML, keyboard navigation)
- Performance optimized (lazy loading, code splitting, optimized assets)
- SEO-first approach (metadata, structured data, sitemap, robots.txt)
- Mobile-first responsive design