# AixpertStudio — Complete Design & Content Reference
# This file enables LLMs to understand and give feedback on the visual design.
# Standard: https://llmstxt.org (llms-full.txt = detailed version)

## Brand Identity

Name: AixpertStudio
Tagline: "Your MVP. Built in Weeks, Not Months."
Position: AI-powered product development studio for startups and businesses
Logo: Green CPU icon (#22C55E) in a rounded square, followed by "aixpert" (white) + "Studio" (green) in Space Grotesk bold font
Location: Mumbai, India
Website: https://aixpertstudio.xyz

---

## Design System

### Color Palette

#### Brand Colors
| Name | Hex | Usage |
|------|-----|-------|
| Primary | #22C55E | CTAs, highlights, active states, brand accent |
| Secondary | #0066FF | 3D orb, accent details |
| Accent | #A855F7 | Supporting accent, 3D effects |

#### Dark Theme (default)
| Token | Value | Usage |
|-------|-------|-------|
| bg-primary | #0B0F14 | Page background |
| card-bg | #111827 | Card/panel backgrounds |
| text-primary | #E5E7EB | Headings, body text |
| text-secondary | #9CA3AF | Subtitles, descriptions |
| glass-bg | rgba(17,24,39,0.6) | Glassmorphism panels |
| glass-border | rgba(255,255,255,0.06) | Subtle borders |

#### Light Theme
| Token | Value | Usage |
|-------|-------|-------|
| bg-primary | #f8f9fa | Page background |
| card-bg | #ffffff | Card/panel backgrounds |
| text-primary | #1a1a1a | Headings, body text |
| text-secondary | #4a4a4a | Subtitles, descriptions |
| glass-bg | rgba(255,255,255,0.8) | Glassmorphism panels |
| glass-border | rgba(0,0,0,0.08) | Subtle borders |

### Typography
| Role | Font | Weight | Size |
|------|------|--------|------|
| Display / Headings | Space Grotesk | 700 (Bold) | 32px–56px |
| Body / UI | Inter | 400–600 | 12px–16px |
| Mono / Badges | System mono | 500 | 10px–12px |

### Spacing & Layout
- Container: max-width 1200px, centered, horizontal padding 16–24px
- Section padding: 64px–96px vertical
- Card padding: 24px–32px
- Border radius: Cards 16px, Buttons 12px, Badges pill-shaped (full radius)
- Grid: CSS Grid, 1–4 columns responsive

### Effects & Animations
- **Glassmorphism**: backdrop-blur-xl + semi-transparent background + subtle border
- **Glow effect**: box-shadow with brand-primary color at low opacity (0 0 20px rgba(34,197,94,0.3))
- **Card hover**: border brightens to brand-primary/30, subtle scale or lift
- **Text gradient**: Linear gradient from #22C55E to #0066FF applied to text
- **Page transitions**: Framer Motion fade + slide (opacity 0→1, y 20→0)
- **Section animations**: Elements animate into view on scroll (whileInView)
- **3D Background**: Three.js canvas with 3 floating distorted spheres (green, blue, purple) + 400 floating particles on fixed background behind all content

---

## Page Layouts

### Homepage (/)
Visual flow from top to bottom:

1. **Navbar** (fixed, floating, centered)
   - Position: Fixed, top 24px, centered horizontally, max-width 1100px
   - Style: Glassmorphism panel with rounded corners (16px)
   - Content: Logo (left) → Home | Services ▾ | AI Architect | Blog | About | Contact | [Theme Toggle] | [Start Project button] (right)
   - Services dropdown: On hover, shows 4 services in a solid-bg dropdown panel with icons
   - Mobile: Hamburger menu → full-width slide-down panel with accordion for Services

2. **Hero Section**
   - Layout: Centered text, full viewport height
   - Badge: Small pill "AI-POWERED DEVELOPMENT STUDIO" with green dot + mono font
   - Heading: Large display font "Your MVP. Built in Weeks, Not Months." — "Built in Weeks," is in gradient green text
   - Subtext: 1-line description in secondary text color
   - CTAs: Two buttons side by side:
     - Primary: Green filled button "Get My MVP Plan →" with glow effect
     - Secondary: Glass/card-style outlined button "Talk to an Engineer"

3. **Trust Strip / Stats Bar**
   - Layout: 4 cards in a horizontal row
   - Each card: Icon (green) + bold stat + label
   - Stats: "4–6 Wks" / "AI-First" / "Startup Focused" / "Scalable"
   - Cards have dark card background with subtle border

4. **Why Choose Us Section**
   - Header: Section title + subtitle centered
   - Layout: 2×2 grid of feature cards
   - Each card: Glass card with green icon (in rounded square), bold title, description text
   - Cards have hover effect: border brightens, icon background fills green

5. **Process Section (How It Works)**
   - Header: Centered section title
   - Layout: 4-step horizontal flow
   - Each step: Large faded number (01–04) behind, green dot + title, then description
   - Steps: Idea Breakdown → MVP Blueprint → Build & Ship → Launch & Scale
   - Connecting lines between steps (desktop only)

6. **Outcomes Section**
   - Layout: 3 metric cards in a row
   - Each card: Large bold metric text, description below
   - Style: Glass cards with brand-primary tinted backgrounds

7. **AI-Powered vs Traditional Agency Comparison**
   - Desktop: 3-column table layout (Category | Traditional | AI-Powered)
   - Headers: "Traditional" has red/muted styling, "AI-Powered" has green glow
   - Rows: Timeline, Cost, Iteration Speed, Complexity, Communication
   - Mobile: Stacked card layout — each category becomes a full-width card with values listed vertically
   - Green check icons for AI-Powered advantages

8. **What You Get Section**
   - Layout: 3×2 grid of feature cards
   - Each card: Numbered (01–06), icon, title, description
   - Cards have hover effects and subtle brand-primary border on hover
   - Features: MVP Scoping, Frontend Dev, Backend/APIs, Admin Dashboard, Deployment, Post-Launch Support

9. **Early Partner Program / CTA Section**
   - Layout: Large centered card with gradient border
   - Green glow at top
   - Title: "Be Our First Partner"
   - Description + 4 benefit points with check icons
   - Primary CTA button with glow

10. **FAQ Section**
    - Layout: Accordion-style expandable questions
    - Each item: Question text + chevron icon, expands to show answer
    - Smooth animation on expand/collapse

11. **Final CTA Section**
    - Full-width card with gradient border
    - Title: "Ready to Build?" with gradient text
    - Two CTA buttons (same as hero)

12. **Footer**
    - Dark card background
    - 4-column grid: Brand + description | Quick Links | Services | Legal
    - Bottom bar: Copyright text + social icons (Twitter, GitHub, LinkedIn)
    - Social icons: Small rounded squares with hover effect (fill green)

---

### Service Pages (/services/*)
All service pages use the same reusable template:

1. **Hero**: Badge + large heading with gradient highlight + description + 2 CTAs
2. **Problem Section**: Red-tinted cards showing 4 business pain points with icons
3. **Solution Section**: Split layout — left text with checkpoints, right: branded card
4. **Features Section**: 3×2 grid of feature cards with green icons and hover effects
5. **Use Cases Section**: 3 cards with green left border showing industry + scenario
6. **Process Section**: 4-step numbered flow (Understand → Build → Deploy → Optimize)
7. **Final CTA**: Large green-bordered card with buttons

#### Current Services:
- **GenAI Marketing & Content** (/services/genai-marketing) — AI content systems for ads, blogs, emails
- **Custom LLM Deployments** (/services/custom-llm) — Secure, domain-specific language models
- **Workflow Automation** (/services/workflow-automation) — AI-powered process automation
- **Vision AI Applications** (/services/vision-ai) — Computer vision for real-world use cases

---

### About Page (/about)
- Hero: "We Build for the Ambitious." with gradient text
- Vision section: Two-column — text left, feature card right
- Beliefs grid: 2×2 cards (Clean Architecture, Founder-First, Innovation, Transparency)
- Founder's Note: Large centered quote card with gradient top border

### Contact Page (/contact)
- Two-column layout: Info panel (left) + Form card (right)
- Info panel: Email + HQ location + social links
- Form: Name, email, company, role, service dropdown, budget, timeline, message, source
- Success state: Animated checkmark + confirmation message

### AI Advisor Page (/advisor)
- Interactive AI chat interface
- User inputs project idea
- AI generates business plan with scope, features, timeline, and cost estimate
- Results panel shows structured output with pricing tiers

---

## Component Library

### Cards
- Background: var(--card-bg) with var(--glass-border) border
- Radius: 16px
- Padding: 24px
- Hover: border color transitions to brand-primary/20–30%

### Buttons
- **Primary**: bg brand-primary (#22C55E), text black, rounded-xl, font-bold, glow effect
- **Secondary**: card background, text-primary color, rounded-xl, font-bold, border
- **Ghost**: Transparent, text only with hover underline

### Badges
- Small pill shape, mono font, 10–12px, uppercase tracking-widest
- Brand-primary tinted background (10% opacity) + brand-primary border (20%)
- Often includes a small animated green dot

### Icons
- Source: Lucide React icon library
- Size: 14–20px typically
- Color: Brand-primary (#22C55E) default
- Container: 40px rounded squares with brand-primary/10 background
- Hover: Container fills brand-primary, icon turns black

### Navigation
- Floating navbar with glassmorphism
- Active state: brand-primary text color + underline
- Dropdown: Solid card-bg background, 300px wide, with icon+label items
- Mobile: Full-width accordion with smooth animations

---

## Technical Stack
- React 19 + TypeScript
- Vite (build tool)
- Tailwind CSS v4 (styling)
- Framer Motion (animations)
- Three.js + React Three Fiber (3D background)
- Firebase (auth, Firestore database)
- Lucide React (icons)
- Fonts: Inter + Space Grotesk (Google Fonts)

---

## Brand Voice
- Tone: Premium but simple, confident without exaggeration
- Language: Founder-focused, outcome-driven, no jargon
- Avoid: Fake claims, buzzwords, "AI-powered" overuse
- Emphasize: Speed, clarity, outcomes, partnership

## Contact
- Email: hello@aixpertstudio.xyz
- Website: https://aixpertstudio.xyz
- GitHub: https://github.com/ItsMeShivtej/aixpertStudio