happy-you

byVanshika Surya

You are a senior UI/UX designer and full-stack developer. Build a complete, premium single-page website for Vanshika Surya — an AI automation agency founder who builds high-ticket client acquisition systems for coaches and consultants in the US, Canada, and UAE. BRAND Name: Vanshika Surya Positioning: High-Ticket Client Acquisition Systems Tagline: "I don't just build funnels. I build the client acquisition system behind the sale." Audience: Business coaches, executive coaches, leadership coaches, sales coaches, mindset coaches, high-ticket consultants — US, Canada, UAE, age 40–70+ Tone: Premium, minimal, confident, human. NOT flashy, NOT guru-style, NOT corporate. COLOURS Navy (dark bg): #0A1628 Cream (light bg): #F7F5F0 Teal (accent): #1ABFAC Amber (CTA only): #F5A623 Body text dark bg: #F0EDE8 Subtext: #A8B2C1 Dividers: #1e3a5f Card bg: #111827 Rule: 75% navy/cream, 20% grey, 5% teal. Amber only on primary CTA. No neon, no gradients, no glassmorphism. TYPOGRAPHY Headlines: DM Sans Bold 700, letter-spacing -0.02em Body: DM Sans Regular 400, line-height 1.6 Eyebrows/labels: Space Grotesk SemiBold 600, uppercase, letter-spacing 0.2em, always teal Both fonts free on Google Fonts — import via single link tag Headlines 60–80px desktop, generous whitespace, body max-width 640px AESTHETIC Editorial, understated, modern, restrained. Like a premium US consulting firm. NOT a Canva template, NOT a guru page, NOT a crypto startup. Asymmetric layouts, intentional empty space, thin lines over decorative icons. SECTIONS — BUILD ALL OF THESE 1. NAVBAR — Fixed. Logo left: "Vanshika Surya" DM Sans 600. Links right: About, What I Build, How It Works, For Who, Get an Audit. Transparent on load → navy on scroll with 1px teal bottom border. CTA button: "Get a Free Audit" — amber bg, navy text, sharp corners. Smooth scroll with 80px offset. 2. HERO — Dark navy bg. Asymmetric: text left, animated system diagram right. Eyebrow teal caps: CLIENT ACQUISITION SYSTEMS. Headline cream 72px: "I build the system that turns your audience into booked calls." Subhead grey: "For coaches and consultants who are done losing leads to a broken follow-up system." Two CTAs: Primary amber button "DM me AUDIT", secondary ghost teal button "See how it works ↓". Inline stats below: "GoHighLevel Trained · 6 Certifications · US, Canada & UAE". Right side: minimal animated SVG flow diagram — Visitor → Lead → Nurture → Booked Call → Client — thin teal lines, subtle pulse animation on connectors. 3. THE PROBLEM — Cream bg. Headline: "Where good prospects quietly disappear." Three dark navy cards side by side, thin teal top border, numbered 01 02 03: Card 1 "They arrived but didn't stay" (no clear next step), Card 2 "They filled the form but went cold" (no automated follow-up), Card 3 "They were interested but never booked" (no reminder system). Bold centered statement below: "Most coaches don't have a traffic problem. They have a system problem." 4. WHAT I BUILD — Dark navy bg. Eyebrow: WHAT I BUILD. Headline: "The system behind the sale." Horizontal flow diagram: Landing Page → Lead Capture → CRM Pipeline → Automated Follow-Up → Booking System → Reminders → Sales Conversation. Thin teal connecting lines with arrows. Below: 3-column card grid, cream text on #111827 cards, teal left border, covering: AI-Powered Websites & Landing Pages / Sales Funnels / CRM & Pipeline Setup / Automated Email & SMS Follow-Up / Appointment Booking System / Automated Reminders / Lead Nurturing Sequences. 5. HOW IT WORKS — Cream bg. Eyebrow: THE PROCESS. Headline: "Simple from your side. Powerful underneath." Four numbered steps in horizontal timeline, connected by thin teal line: Step 01 Free Funnel Audit (look at current setup, find where leads drop), Step 02 System Design (map exact system needed), Step 03 Build & Integrate (build in GoHighLevel, tested and ready), Step 04 You Show Up to Calls (system runs, you focus on coaching). Each: large teal number Space Grotesk, navy bold title, grey body. 6. WHO THIS IS FOR — Dark navy bg. Eyebrow: WHO I HELP. Headline: "Built for people who sell expertise." Left: numbered editorial index — 01 Business Coaches, 02 Executive Coaches, 03 Leadership Coaches, 04 Sales Coaches, 05 Mindset & Performance Coaches, 06 High-Ticket Consultants. Right: "This is for you if:" — 4 teal dash bullets: you have a strong offer but inconsistent pipeline / manually following up every lead / prospects slipping through because tech isn't set up / want a system that works while you coach. "This is not for you if:" — 2 bullets: looking for social media management / don't have an offer yet. 7. FREE AUDIT CTA — Full width, dark navy to #0d1f3c gradient. Centered. Eyebrow teal: FREE FUNNEL AUDIT. Headline cream large: "Curious where your funnel is leaking?" Body grey: "DM me the word AUDIT and I'll review your current client acquisition journey — where visitors come in, where leads drop off, and what's costing you booked calls. No pitch. No pressure." Large teal-bordered box: "DM me:" on left, "AUDIT" in large teal Space Grotesk Bold on right. Small grey text below: "I'll review your setup and get back within 24 hours." 8. ABOUT — Cream bg. Eyebrow: ABOUT. Headline: "Building this from scratch. Documenting everything." Two column: left photo placeholder (portrait, thin teal border), right text: "I'm Vanshika Surya. I help coaches and consultants build the client acquisition infrastructure their business actually needs — not just a website, but a full system from first click to booked call. I'm GoHighLevel trained and hold six digital marketing certifications. I'm building this agency publicly — no fake case studies, no inflated experience. Just real work, documented honestly. If you're a coach or consultant tired of losing leads to a system that doesn't exist, I'd like to help." Below: six certification text badges navy bordered: SEO · Meta Ads · Google Ads · Social Media Marketing · Website Fundamentals · Agentic AI — issuer: Digital Scholar. 9. FOOTER — Navy bg. Left: "Vanshika Surya" DM Sans 600 cream, below "High-Ticket Client Acquisition Systems" small Space Grotesk grey caps. Center: nav links small grey. Right: "DM AUDIT on Instagram" teal arrow. Bottom: 1px #1e3a5f line, "© 2025 Vanshika Surya. Serving US, Canada & UAE clients remotely." very small grey. ANIMATIONS Scroll reveal: elements fade up 20px on enter viewport, staggered 100ms delay per element, Intersection Observer API Hero SVG diagram: animated dot travels along teal connector lines Visitor→Client on loop, CSS stroke-dashoffset Navbar: transparent → navy transition 200ms ease on scroll Buttons: amber darkens 10% on hover, ghost fills teal 10% opacity on hover, 200ms ease Cards: subtle shadow lift on hover Smooth scroll all anchor links, 80px offset TECHNICAL Single HTML file, embedded CSS and JS Vanilla JS only, no jQuery, no frameworks Google Fonts only external dependency Fully responsive — mobile first, breakpoints 768px and 1024px Mobile: single column, hamburger menu, scaled fonts No lorem ipsum — all copy is above, use it exactly Semantic HTML throughout: nav, section, h1, h2, h3, p, ul Meta title: "Vanshika Surya — Client Acquisition Systems for Coaches & Consultants" Meta description: "I build high-ticket client acquisition systems for coaches and consultants — funnels, CRM, automated follow-up, and booking systems built on GoHighLevel." DO NOT No stock photos or AI faces No fake testimonials or fake statistics No motivational quotes No pricing tables No "we" language — always "I" No generic phrases like "leverage cutting-edge solutions" No purple, neon, glassmorphism, excessive gradients No overcrowded layouts — more whitespace always wins GOAL A US, Canadian, or UAE coach lands on this page and immediately thinks: "This person understands my problem exactly. This looks serious. I want to know more." — NOT "This looks like another AI marketing page." Restrained, confident, premium. Stands out by doing less. Build the complete single HTML file now.