PageSourceSearch

https://gemma-io.com/

html gemma-io.com collected 2026-10-02 01:29:51 UTC 61,720 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/assets/genni-logo-BaAjlWM9.png"/><link rel="preload" as="image" href="/assets/generation-original-DtLuff_0.png"/><link rel="preload" as="image" href="/assets/generation-style-By_iurKR.png"/><link rel="preload" as="image" href="/assets/generation-result-CzoOIYGw.png"/><link rel="preload" as="image" href="/assets/hero-phones-CAwWnbnA.jpg"/><link rel="preload" as="image" href="/assets/jet-black-m4MPiabu.webp"/><link rel="preload" as="image" href="/assets/espresso-J9BS1nY5.webp"/><link rel="preload" as="image" href="/assets/chocolate-CAC9IEMv.webp"/><link rel="preload" as="image" href="/assets/chestnut-dFlYdoAS.webp"/><link rel="preload" as="image" href="/assets/auburn-D919xg49.webp"/><link rel="stylesheet" href="/assets/styles-_h3d2E9l.css" data-precedence="default"/><link rel="preload" as="image" href="/assets/copper-BZdZhIkN.webp"/><link rel="preload" as="image" href="/assets/honey-DU9om1Of.webp"/><link rel="preload" as="image" href="/assets/platinum-uOR3kOPR.webp"/><link rel="preload" as="image" href="/assets/rose-gold-m7rBUw1f.webp"/><link rel="preload" as="image" href="/assets/cherry-CnWkUwoR.webp"/><link rel="preload" as="image" href="/assets/lavender-C8ELjkuU.webp"/><link rel="preload" as="image" href="/assets/electric-blue-BuV9iODZ.webp"/><link rel="preload" as="image" href="/assets/emerald-D06dkan_.webp"/><link rel="preload" as="image" href="/assets/magenta-BgkUvK7g.webp"/><link rel="preload" as="image" href="/assets/original-DY8fpzVn.webp"/><title>Genni — Discover Your Perfect Look | AI Hairstyle Try-On</title><meta name="author" content="Lovable"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@Lovable"/><meta name="description" content="Genni is the #1 AI beauty try-on app. Instantly try hundreds of hairstyles with photorealistic accuracy before you commit. From hair to makeup and more."/><meta property="og:title" content="Genni — Discover Your Perfect Look"/><meta property="og:description" content="AI beauty try-on. Hairstyles, makeup, shades and more — see it before you commit."/><link rel="modulepreload" href="/assets/index-BTqt9req.js"/><link rel="modulepreload" href="/assets/index-DBpiT_lZ.js"/><link rel="modulepreload" href="/assets/createLucideIcon-BRAU9Mlt.js"/></head><body><!--$--><div class="min-h-screen"><header class="fixed top-0 z-50 w-full backdrop-blur-xl bg-background/40 border-b border-border"><div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4"><a class="flex items-center gap-2 active" href="/" data-status="active" aria-current="page"><img src="/assets/genni-logo-BaAjlWM9.png" alt="Genni logo" class="h-10 w-10 rounded-xl object-cover"/><span class="font-display text-2xl">Genni</span></a><nav class="hidden items-center gap-8 md:flex"><a href="#features" class="text-sm text-muted-foreground hover:text-foreground transition">Features</a><a href="#how" class="text-sm text-muted-foreground hover:text-foreground transition">How it Works</a><a href="#about" class="text-sm text-muted-foreground hover:text-foreground transition">About</a><a href="#business" class="text-sm text-muted-foreground hover:text-foreground transition">For Business</a><a href="#newsletter" class="text-sm text-muted-foreground hover:text-foreground transition">Newsletter</a></nav><a href="https://apps.apple.com/ng/app/genni-hairstyle-try-on-app/id6756431811" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple h-4 w-4" aria-hidden="true"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"></path></svg><span class="hidden sm:inline">Download App</span></a></div></header><main>
1<section class="relative overflow-hidden pt-36 pb-24 md:pt-44 md:pb-32"><div class="absolute -top-40 left-1/2 h-[600px] w-[900px] -translate-x-1/2 rounded-full bg-primary/30 blur-[140px]"></div><div class="relative mx-auto mb-16 max-w-5xl px-6" style="opacity:0;transform:translateY(20px)"><div class="mb-6 flex items-center justify-center gap-3 text-xs uppercase tracking-[0.2em] text-muted-foreground"><span class="h-px w-8 bg-border"></span>Real Genni Generation<span class="h-px w-8 bg-border"></span></div><div class="grid grid-cols-3 items-center gap-3 md:gap-6"><figure class="group relative overflow-hidden rounded-2xl border border-border bg-card" style="opacity:0;transform:translateY(20px)"><img src="/assets/generation-original-DtLuff_0.png" alt="Your Photo" class="aspect-[4/5] w-full object-cover transition duration-500 group-hover:scale-105"/><figcaption class="absolute inset-x-0 bottom-0 flex items-center justify-between bg-gradient-to-t from-black/70 to-transparent px-3 py-2 text-[10px] font-medium uppercase tracking-wider text-white md:text-xs"><span>Your Photo</span></figcaption></figure><figure class="group relative overflow-hidden rounded-2xl border border-border bg-card" style="opacity:0;transform:translateY(20px)"><img src="/assets/generation-style-By_iurKR.png" alt="Pick a Style" class="aspect-[4/5] w-full object-cover transition duration-500 group-hover:scale-105"/><figcaption class="absolute inset-x-0 bottom-0 flex items-center justify-between bg-gradient-to-t from-black/70 to-transparent px-3 py-2 text-[10px] font-medium uppercase tracking-wider text-white md:text-xs"><span>Pick a Style</span></figcaption></figure><figure class="group relative overflow-hidden rounded-2xl border border-border bg-card" style="opacity:0;transform:translateY(20px)"><img src="/assets/generation-result-CzoOIYGw.png" alt="Genni Result" class="aspect-[4/5] w-full object-cover transition duration-500 group-hover:scale-105"/><figcaption class="absolute inset-x-0 bottom-0 flex items-center justify-between bg-gradient-to-t from-black/70 to-transparent px-3 py-2 text-[10px] font-medium uppercase tracking-wider text-white md:text-xs"><span>Genni Result</span><span class="rounded-full bg-accent/90 px-2 py-0.5 text-[9px] text-accent-foreground">AI</span></figcaption></figure></div></div><div class="relative mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-2 lg:items-center"><div style="opacity:0;transform:translateY(30px)"><span class="inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-4 py-1.5 text-xs font-medium text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-3.5 w-3.5" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>#1 AI Beauty Try-On App</span><h1 class="font-display mt-6 text-6xl leading-[1.05] md:text-7xl lg:text-8xl">Discover Your <em class="text-gradient not-italic">Perfect Look</em></h1><p class="mt-6 max-w-lg text-lg text-muted-foreground">No more bad hair days. Instantly try on hundreds of hairstyles with photorealistic accuracy — before you commit to the chair.</p><div class="mt-8 flex flex-wrap gap-4"><a href="https://apps.apple.com/ng/app/genni-hairstyle-try-on-app/id6756431811" target="_blank" rel="noreferrer" class="group inline-flex items-center gap-3 rounded-2xl bg-foreground px-6 py-4 text-background transition hover:scale-[1.02]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple h-7 w-7" aria-hidden="true"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"></path></svg><div class="text-left"><div class="text-[10px] uppercase tracking-widest opacity-70">Download on the</div><div class="text-base font-semibold leading-tight">App Store</div></div></a><a href="https://play.google.com/store/apps/details?id=com.blueskytechnologies.gemma" target="_blank" rel="noreferrer" class="group inline-flex items-center gap-3 rounded-2xl border border-border bg-card px-6 py-4 transition hover:scale-[1.02] hover:bg-secondary"><svg class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.24-.84-.76-.84-1.35zm13.81-5.38L6.05 21.34l8.49-8.49 2.27 2.27zm3.35-4.31c.34.27.59.69.59 1.19s-.22.9-.57 1.18l-2.29 1.32-2.5-2.5 2.5-2.5 2.27 1.31zM5.94 2.66l11.52 6.64-2.27 2.27L5.94 2.66z"></path></svg><div class="text-left"><div class="text-[10px] uppercase tracking-widest opacity-70">Get it on</div><div class="text-base font-semibold leading-tight">Google Play</div></div></a><button class="inline-flex items-center gap-2 rounded-2xl border border-border bg-card px-6 py-4 text-sm font-medium hover:bg-secondary transition"><span class="grid h-6 w-6 place-items-center rounded-full bg-primary">▶</span>See Transformation</button></div></div><div class="relative" style="opacity:0;transform:scale(0.9)"><img src="/assets/hero-phones-CAwWnbnA.jpg" alt="Genni beauty try-on app showing before and after hairstyle transformation" width="1280" height="1280" class="relative z-10 mx-auto w-full max-w-xl drop-shadow-2xl"/><div class="absolute left-0 top-12 z-20 flex items-center gap-3 rounded-2xl border border-border bg-card/80 px-4 py-3 backdrop-blur-md"><div class="grid h-10 w-10 place-items-center rounded-full bg-emerald-500/20 text-emerald-400 font-semibold text-sm">98%</div><div><div class="text-[10px] uppercase tracking-wider text-muted-foreground">Match Accuracy</div><div class="text-sm font-semibold">Photorealistic</div></div></div><div class="absolute -right-2 bottom-16 z-20 flex items-center gap-3 rounded-2xl border border-border bg-card/80 px-4 py-3 backdrop-blur-md"><div class="grid h-10 w-10 place-items-center rounded-full bg-accent/20 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap h-5 w-5" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><div><div class="text-[10px] uppercase tracking-wider text-muted-foreground">Generation Time</div><div class="text-sm font-semibold">&lt; 3 Seconds</div></div></div></div></div></section><section id="how" class="relative py-28"><div class="mx-auto max-w-7xl px-6"><div class="mx-auto max-w-2xl text-center"><span class="text-xs uppercase tracking-[0.3em] text-accent">How it works</span><h2 class="font-display mt-4 text-5xl md:text-6xl">Simple. Fast. <em class="text-gradient not-italic">Magical.</em></h2><p class="mt-4 text-muted-foreground">Transform your look in three easy steps. No appointments needed.</p></div><div class="mt-16 grid gap-6 md:grid-cols-3"><div class="relative overflow-hidden rounded-3xl border border-border bg-card/40 p-8 backdrop-blur-md" style="opacity:0;transform:translateY(30px)"><div class="absolute -right-8 -top-8 text-[140px] font-display text-primary/10 leading-none">1</div><div class="relative"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"></path><circle cx="12" cy="13" r="3"></circle></svg></div><h3 class="mt-6 text-xl font-semibold">Upload Your Photo</h3><p class="mt-2 text-sm text-muted-foreground">Start with a selfie or photo. Our AI auto-detects your face shape and features.</p></div></div><div class="relative overflow-hidden rounded-3xl border border-border bg-card/40 p-8 backdrop-blur-md" style="opacity:0;transform:translateY(30px)"><div class="absolute -right-8 -top-8 text-[140px] font-display text-primary/10 leading-none">2</div><div class="relative"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></div><h3 class="mt-6 text-xl font-semibold">Choose Your Style</h3><p class="mt-2 text-sm text-muted-foreground">Browse thousands of trending hairstyles, colors and shades — or upload a reference.</p></div></div><div class="relative overflow-hidden rounded-3xl border border-border bg-card/40 p-8 backdrop-blur-md" style="opacity:0;transform:translateY(30px)"><div class="absolute -right-8 -top-8 text-[140px] font-display text-primary/10 leading-none">3</div><div class="relative"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 
11.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></div><h3 class="mt-6 text-xl font-semibold">Instant Transformation</h3><p class="mt-2 text-sm text-muted-foreground">Watch the new look apply seamlessly in seconds. Photorealistic, every time.</p></div></div></div></div></section><section id="about" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="mx-auto max-w-3xl"><div class="mb-16 text-center" style="opacity:0;transform:translateY(20px)"><span class="text-xs uppercase tracking-[0.3em] text-accent">Our Story</span><h2 class="font-display mt-4 text-5xl md:text-6xl">Why we built <em class="text-gradient not-italic">Genni.</em></h2></div><div class="space-y-10"><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">The beauty industry is built on transformation, but the technology used to preview that transformation has lagged behind. In hair especially, a credible preview is difficult because the result depends on volume, texture, density, length, face shape, and lighting conditions — not just color or shape.</p><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">For years, virtual try-on in beauty has relied on simplified overlays and generic filters that suggest an outcome rather than simulate one. By contrast, newer hair try-on systems are explicitly using AI to reconstruct facial and head contours so the preview is more realistic and more decision-ready.</p><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">That gap matters because salon consultations are not just a courtesy; they are a core part of the service experience. Industry guidance consistently emphasizes that effective consultations help manage expectations, prevent dissatisfaction, improve trust, and reduce misunderstandings between stylist and client. Salon research also shows that hair and beauty work involves intensive emotional labor and repeated client-facing pressure, which makes clear alignment especially valuable.</p><p class="text-lg leading-[1.8] font-display text-2xl md:text-3xl text-gradient leading-[1.5] border-l-2 border-accent pl-6" style="opacity:0;transform:translateY(20px)">Genni was built to close that gap. It is not another filter or novelty effect; it is a photorealistic preview platform designed to show how a specific style will look on a specific person, using their own features and a more credible visual context. The goal is simple: help consumers make confident decisions before they commit, and help salons start every appointment from a shared visual understanding.</p><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">For consumers, Genni reduces uncertainty and the risk of regret. For salons, it turns the consultation from a translation exercise into an alignment exercise, with a clearer path to faster bookings, fewer corrections, and stronger client satisfaction. Genni therefore serves both sides of the market: the person in the chair and the professional behind it.</p><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">We started with hair because it is where the emotional and commercial stakes are highest. Research and industry commentary consistently link hair to confidence, self-image, and social perception, which makes hairstyle decisions unusually personal and unusually consequential. In other words, hair is not just a visual category; it is one of the most confidence-sensitive transformations in beauty.</p><p class="text-lg leading-[1.8] text-muted-foreground" style="opacity:0;transform:translateY(20px)">Genni is also the beginning of a broader category. Hair is the first application because the visual gap is widest there and because the connection between hair and confidence makes the decision especially meaningful. But the underlying architecture can extend to other beauty and transformation categories where customers are asking the same question: what will this look like on me?</p></div></div></div></section><section id="business" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="mx-auto max-w-3xl text-center"><span class="text-xs uppercase tracking-[0.3em] text-accent">For Business</span><h2 class="font-display mt-4 text-5xl md:text-6xl">Custom AI try-on <em class="text-gradient not-italic">for your brand.</em></h2><p class="mt-6 text-muted-foreground text-lg leading-relaxed">Genni Studio partners with beauty brands, salons, and e-commerce platforms to power photorealistic virtual try-on experiences. From hair extensions to color dyes — integrate our AI into your customer journey.</p></div><div class="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-4"><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-8 backdrop-blur" style="opacity:0;transform:translateY(20px)"><div class="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors h-6 w-6 text-primary-foreground" aria-hidden="true"><circle cx="6" cy="6" r="3"></circle><path d="M8.12 8.12 12 12"></path><path d="M20 4 8.12 15.88"></path><circle cx="6" cy="18" r="3"></circle><path d="M14.8 14.8 20 20"></path></svg></div><h3 class="mt-5 text-lg font-semibold">Hair Extensions Try-On</h3><p class="mt-2 text-sm text-muted-foreground leading-relaxed">Let customers preview how extensions blend with their natural hair — length, volume, texture and color match — before they buy.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-8 backdrop-blur" style="opacity:0;transform:translateY(20px)"><div class="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-check h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="m16 11 2 2 4-4"></path><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div><h3 class="mt-5 text-lg font-semibold">Wigs Try-On</h3><p class="mt-2 text-sm text-muted-foreground leading-relaxed">From lace-front to full-cap, our AI maps wigs onto any face with realistic fit, hairline accuracy, and true-to-life movement.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-8 backdrop-blur" style="opacity:0;transform:translateY(20px)"><div class="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></div><h3 class="mt-5 text-lg font-semibold">Hair Coloring</h3><p class="mt-2 text-sm text-muted-foreground leading-relaxed">Show clients exactly how highlights, balayage, ombre, or full-color transforms will look on their own hair and skin tone.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-8 backdrop-blur" style="opacity:0;transform:translateY(20px)"><div class="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 
11.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></div><h3 class="mt-5 text-lg font-semibold">Color Dyes</h3><p class="mt-2 text-sm text-muted-foreground leading-relaxed">Power product pages with true-to-pigment dye previews. Reduce shade-mismatch returns for semi-permanent and permanent color lines.</p></div></div><div class="mt-12 overflow-hidden rounded-[2rem] border border-border bg-gradient-to-b from-card/70 to-card/20 p-6 backdrop-blur md:p-10" style="opacity:0;transform:translateY(28px)"><div class="grid items-center gap-10 lg:grid-cols-[minmax(0,380px)_1fr]"><div class="relative mx-auto w-full max-w-[360px]"><div class="absolute -inset-4 -z-10 rounded-[2.6rem] opacity-50 blur-3xl transition-colors duration-700" style="background:#6b4129"></div><div class="overflow-hidden rounded-[2rem] shadow-[0_30px_80px_-28px_rgba(0,0,0,0.7)]"><div class="relative aspect-[3/4] w-full bg-[oklch(0.17_0.04_305)]"><img src="/assets/jet-black-m4MPiabu.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/espresso-J9BS1nY5.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/chocolate-CAC9IEMv.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/chestnut-dFlYdoAS.webp" alt="" aria-hidden="false" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:1"/><img src="/assets/auburn-D919xg49.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/copper-BZdZhIkN.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/honey-DU9om1Of.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/platinum-uOR3kOPR.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/rose-gold-m7rBUw1f.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/cherry-CnWkUwoR.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/lavender-C8ELjkuU.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/electric-blue-BuV9iODZ.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/emerald-D06dkan_.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/magenta-BgkUvK7g.webp" alt="" aria-hidden="true" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out" style="opacity:0"/><img src="/assets/original-DY8fpzVn.webp" alt="Original hair color" draggable="false" class="absolute inset-0 h-full w-full object-cover transition-opacity duration-300 ease-out" style="opacity:0"/></div></div><div class="mt-3 flex items-center justify-center gap-2 text-sm"><span class="inline-block h-3.5 w-3.5 rounded-full ring-1 ring-white/40" style="background:#6b4129"></span><span class="font-medium text-foreground">Chestnut</span><span class="font-mono text-xs uppercase text-muted-foreground">#6b4129</span></div></div><div><span class="text-xs uppercase tracking-[0.3em] text-accent">Live demo</span>
1<h3 class="font-display mt-2 text-3xl md:text-4xl">Pick any shade. <em class="text-gradient not-italic">See it on, instantly.</em></h3><p class="mt-3 max-w-prose text-sm leading-relaxed text-muted-foreground">Real results from Genni&#x27;s AI on the same photo. Spin the hue or tap a shade — every tone is rendered onto the hair with true-to-life gloss, depth, and natural roots.</p><div class="mt-7 flex flex-wrap items-start gap-5"><div class="relative aspect-square w-40 shrink-0 cursor-pointer touch-none select-none" role="slider" aria-label="Hue" aria-valuenow="22" aria-valuemin="0" aria-valuemax="360"><div class="absolute inset-0 rounded-full" style="background:conic-gradient(from 0deg, hsl(0 80% 55%), hsl(60 80% 55%), hsl(120 80% 55%), hsl(180 80% 55%), hsl(240 80% 55%), hsl(300 80% 55%), hsl(360 80% 55%));-webkit-mask:radial-gradient(transparent 60%, #000 62%);mask:radial-gradient(transparent 60%, #000 62%)"></div><div class="pointer-events-none absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-[3px] border-white shadow-[0_2px_8px_rgba(0,0,0,0.5)]" style="left:65.60982313773376%;top:11.008546813324955%;background:hsl(21.818181818181817 80% 55%)"></div></div><div class="relative aspect-square w-40 shrink-0 cursor-crosshair touch-none select-none overflow-hidden rounded-2xl border border-white/15" role="slider" aria-label="Saturation and brightness" aria-valuetext="saturation 62%, brightness 42%" style="background-color:hsl(21.818181818181817 100% 50%);background-image:linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0))"><div class="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.4)]" style="left:61.6822429906542%;top:58.0392156862745%;background:#6b4129"></div></div></div><div class="mt-7 space-y-4"><div><p class="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">Natural shades</p><div class="flex flex-wrap gap-2.5"><button type="button" title="Jet Black" aria-label="Jet Black" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#1b1614"></button><button type="button" title="Espresso" aria-label="Espresso" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#2f211a"></button><button type="button" title="Chocolate" aria-label="Chocolate" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#46291a"></button><button type="button" title="Chestnut" aria-label="Chestnut" aria-pressed="true" class="h-9 w-9 rounded-full transition hover:scale-110 ring-2 ring-white ring-offset-2 ring-offset-[oklch(0.20_0.05_305)]" style="background:#6b4129"></button><button type="button" title="Auburn" aria-label="Auburn" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#7e3a22"></button><button type="button" title="Copper" aria-label="Copper" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#b35a28"></button><button type="button" title="Honey" aria-label="Honey" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#c89a57"></button><button type="button" title="Platinum" aria-label="Platinum" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#e7dcc1"></button></div></div><div><p class="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">Fashion colors</p><div class="flex flex-wrap gap-2.5"><button type="button" title="Rose Gold" aria-label="Rose Gold" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#d98a86"></button><button type="button" title="Cherry" aria-label="Cherry" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#a51f37"></button><button type="button" title="Lavender" aria-label="Lavender" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#9d80d6"></button><button type="button" title="Electric Blue" aria-label="Electric Blue" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#2f6df0"></button><button type="button" title="Emerald" aria-label="Emerald" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#1e8a63"></button><button type="button" title="Magenta" aria-label="Magenta" aria-pressed="false" class="h-9 w-9 rounded-full transition hover:scale-110 ring-1 ring-white/25" style="background:#c12a82"></button></div></div></div><div class="mt-7 flex flex-wrap gap-3"><button type="button" class="inline-flex select-none items-center gap-2 rounded-xl border border-border bg-card/50 px-4 py-2 text-sm text-muted-foreground transition hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye h-4 w-4" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg> Hold to compare</button><button type="button" class="inline-flex items-center gap-2 rounded-xl border border-border bg-card/50 px-4 py-2 text-sm text-muted-foreground transition hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw h-4 w-4" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> Reset</button></div></div></div></div><div class="mt-20 grid gap-6 md:grid-cols-3"><div class="rounded-3xl border border-border bg-card/40 p-8 text-center backdrop-blur-md" style="opacity:0;transform:scale(0.95)"><div class="mx-auto grid h-14 w-14 place-items-center rounded-full bg-primary/10 text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-7 w-7" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg></div><div class="font-display mt-5 text-5xl text-gradient">30–40%</div><p class="mt-3 text-sm text-muted-foreground">Conversion lift from try-on confidence</p></div><div class="rounded-3xl border border-border bg-card/40 p-8 text-center backdrop-blur-md" style="opacity:0;transform:scale(0.95)"><div class="mx-auto grid h-14 w-14 place-items-center rounded-full bg-primary/10 text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down h-7 w-7" aria-hidden="true"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg></div><div class="font-display mt-5 text-5xl text-gradient">~50%</div><p class="mt-3 text-sm text-muted-foreground">Reduction in shade-mismatch returns</p></div><div class="rounded-3xl border border-border bg-card/40 p-8 text-center backdrop-blur-md" style="opacity:0;transform:scale(0.95)"><div class="mx-auto grid h-14 w-14 place-items-center rounded-full bg-primary/10 text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gem h-7 w-7" aria-hidden="true"><path d="M10.5 3 8 9l4 13 4-13-2.5-6"></path><path d="M17 3a2 2 0 0 1 1.6.8l3 4a2 2 0 0 1 .013 2.382l-7.99 10.986a2 2 0 0 1-3.247 0l-7.99-10.986A2 2 0 0 1 2.4 7.8l2.998-3.997A2 2 0 0 1 7 3z"></path><path d="M2 9h20"></path></svg></div><div class="font-display mt-5 text-5xl text-gradient">White-label</div><p class="mt-3 text-sm text-muted-foreground">SDK &amp; API with your branding</p></div></div><div class="mt-16 text-center" style="opacity:1;transform:translateY(20px)"><a href="mailto:[email protected]" class="inline-flex items-center gap-3 rounded-2xl bg-foreground px-6 py-4 text-background hover:scale-[1.02] transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase h-5 w-5" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg><span class="font-medium">Partner with Genni Studio</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div></section><section id="offer" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/20 via-card/40 to-accent/10 p-10 backdrop-blur md:p-16" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-20 -right-20 h-80 w-80 rounded-full bg-primary/20 blur-[120px]"></div><div class="absolute -bottom-20 -left-20 h-80 w-80 rounded-full bg-accent/20 blur-[120px]"></div><div class="relative mx-auto max-w-3xl text-center"><span class="inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-4 py-1.5 text-xs font-medium text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3.5 w-3.5" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>Limited to 5 brands this month</span><h2 class="font-display mt-6 text-4xl leading-tight md:text-5xl">Increase online conversion by <em class="text-gradient not-italic">20–40%</em> with AI try-on.</h2><p class="mt-6 text-lg leading-relaxed text-muted-foreground">We help wig brands, hair extension and hair coloring brands increase online conversion by 20–40% using AI try-on. We&#x27;re so confident it works that we&#x27;ll build the full integration for free and you don&#x27;t pay until you see results. We&#x27;re taking 5 brands this month.</p><div class="mt-10 flex flex-wrap items-center justify-center gap-4"><a href="https://calendly.com/bethel-blueskytechnologiescom/30min" target="_blank" rel="noreferrer" class="inline-flex items-center gap-3 rounded-2xl bg-foreground px-6 py-4 text-background hover:scale-[1.02] transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-5 w-5" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg><span class="font-medium">Book a free consultation</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><a href="mailto:[email protected]" class="inline-flex items-center gap-3 rounded-2xl border border-border bg-card px-6 py-4 hover:bg-secondary transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-5 w-5" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><span class="font-medium">[email protected]</span></a></div></div></div></div></section><section id="consultation" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/20 via-card/40 to-accent/10 p-8 backdrop-blur md:p-14"><div class="absolute -top-20 left-1/2 h-60 w-[120%] -translate-x-1/2 roun
1ded-full bg-primary/30 blur-[100px]"></div><div class="relative"><div class="text-center"><div class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-8 w-8 text-primary-foreground" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg></div><h2 class="font-display mt-6 text-4xl md:text-5xl">Book a free <em class="text-gradient not-italic">consultation.</em></h2><p class="mx-auto mt-4 max-w-xl text-muted-foreground">Pick a time that works for you. Whether you are a salon, brand, or e-commerce platform, let us show you how Genni Studio can transform your customer experience.</p></div><div class="mt-6 text-center text-sm text-muted-foreground"><span>Prefer email? </span><a href="mailto:[email protected]" class="inline-flex items-center gap-1 text-foreground hover:underline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-4 w-4" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg><span>[email protected]</span></a></div></div></div></div></section><section id="features" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:items-end"><div><span class="text-xs uppercase tracking-[0.3em] text-accent">Why Genni</span><h2 class="font-display mt-4 text-5xl md:text-6xl">The ultimate <em class="text-gradient not-italic">styling</em> experience.</h2></div><p class="text-muted-foreground">We started with hair and hairstyles. Next: makeup, shades, lipstick. Genni helps you discover your look and feel confident in every beauty product before you buy.</p></div><div class="mt-16 grid gap-4 md:grid-cols-2 lg:grid-cols-4"><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-6 backdrop-blur" style="opacity:0;transform:translateY(20px)"><h3 class="font-display text-2xl">Instant Transformation</h3><p class="mt-3 text-sm text-muted-foreground">Visualize a new you in seconds. From bangs to bobs, see it all before you snip.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-6 backdrop-blur" style="opacity:0;transform:translateY(20px)"><h3 class="font-display text-2xl">Risk-Free Experimentation</h3><p class="mt-3 text-sm text-muted-foreground">Try bold colors and daring cuts without the regret. Your hair, your rules.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-6 backdrop-blur" style="opacity:0;transform:translateY(20px)"><h3 class="font-display text-2xl">Personalized For You</h3><p class="mt-3 text-sm text-muted-foreground">Our AI understands your face shape and features to recommend the perfect style.</p></div><div class="rounded-3xl border border-border bg-gradient-to-b from-card/60 to-card/10 p-6 backdrop-blur" style="opacity:0;transform:translateY(20px)"><h3 class="font-display text-2xl">Beyond Hair</h3><p class="mt-3 text-sm text-muted-foreground">Coming soon: makeup, shades, lipstick and more. The complete beauty try-on.</p></div></div><div class="mt-12 grid gap-8 rounded-3xl border border-border bg-card/40 p-10 backdrop-blur md:grid-cols-3"><div class="text-center"><div class="font-display text-6xl text-gradient">99.8%</div><div class="mt-2 text-sm uppercase tracking-widest text-muted-foreground">Style Accuracy</div></div><div class="text-center"><div class="font-display text-6xl text-gradient">&lt; 2s</div><div class="mt-2 text-sm uppercase tracking-widest text-muted-foreground">Generation Time</div></div><div class="text-center"><div class="font-display text-6xl text-gradient">500+</div><div class="mt-2 text-sm uppercase tracking-widest text-muted-foreground">Style Library</div></div></div></div></section><section class="relative overflow-hidden py-14"><div class="mx-auto mb-8 max-w-7xl px-6 text-center"><span class="text-xs uppercase tracking-[0.3em] text-accent">Trusted By</span></div><div class="relative flex overflow-hidden"><div class="animate-marquee-scroll flex w-max items-center gap-16">
1<span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span><span class="font-display text-3xl text-muted-foreground/40 md:text-4xl">Dom-Hair.Inc</span></div></div></section><section class="py-28"><div class="mx-auto max-w-4xl px-6 text-center"><div class="flex justify-center gap-1 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-current" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><p class="font-display mt-6 text-3xl md:text-5xl leading-tight">&quot;Genni completely transformed how I choose my hairstyles. It&#x27;s like <em class="text-gradient not-italic">magic.</em>&quot;</p><p class="mt-6 text-sm uppercase tracking-widest text-muted-foreground">— Sarah J.</p></div></section><section id="newsletter" class="py-28"><div class="mx-auto max-w-7xl px-6"><div class="mx-auto max-w-2xl text-center"><span class="text-xs uppercase tracking-[0.3em] text-accent">From the Blog</span><h2 class="font-display mt-4 text-5xl md:text-6xl">Latest <em class="text-gradient not-italic">articles.</em></h2><p class="mt-4 text-muted-foreground">Insights, stories, and haircare wisdom from the Genni team.</p></div><div class="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-3"><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/10 via-card/40 to-accent/10 p-10 backdrop-blur" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-20 -right-20 h-60 w-60 rounded-full bg-accent/10 blur-[100px]"></div><div class="relative flex flex-col gap-6"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></div><div><h3 class="font-display text-2xl md:text-3xl">Real Talk</h3><p class="mt-3 text-muted-foreground">Honest conversations about AI, beauty tech, and building the future of digital commerce. Fresh perspectives from the Genni team.</p></div><a href="https://open.substack.com/pub/gennistudio/p/real-talk?r=7r8jkv&amp;
1utm_campaign=post&amp;utm_medium=web&amp;showWelcomeOnShare=true" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 rounded-2xl bg-foreground px-6 py-3.5 text-sm font-medium text-background hover:scale-[1.02] transition self-start">Read on Substack<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/10 via-card/40 to-accent/10 p-10 backdrop-blur" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-20 -right-20 h-60 w-60 rounded-full bg-accent/10 blur-[100px]"></div><div class="relative flex flex-col gap-6"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div><div><h3 class="font-display text-2xl md:text-3xl">The Hair Files: Understanding Your Hair Type — And Why It Matters</h3><p class="mt-3 text-muted-foreground">Your best hair routine starts with accepting your natural texture. We investigate the mysteries, myths, and magic of hair.</p></div><a href="https://open.substack.com/pub/gennistudio/p/the-hair-files-understanding-your?r=7r8jkv&amp;utm_campaign=post&amp;utm_medium=web&amp;showWelcomeOnShare=true" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 rounded-2xl bg-foreground px-6 py-3.5 text-sm font-medium text-background hover:scale-[1.02] transition self-start">Read on Substack<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/10 via-card/40 to-accent/10 p-10 backdrop-blur" style="opacity:0;transform:translateY(30px)"><div class="absolute -top-20 -right-20 h-60 w-60 rounded-full bg-accent/10 blur-[100px]"></div><div class="relative flex flex-col gap-6"><div class="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary to-accent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-6 w-6 text-primary-foreground" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></div><div><h3 class="font-display text-2xl md:text-3xl">THE HAIR FILES | Debunking Myths</h3><p class="mt-3 text-muted-foreground">Separating strand facts from strand fiction. This week we tackle four persistent hair myths that have been holding us back.</p></div><a href="https://gennistudio.substack.com/p/the-hair-files-debunking-myths" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 rounded-2xl bg-foreground px-6 py-3.5 text-sm font-medium text-background hover:scale-[1.02] transition self-start">Read on Substack<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div></div></div></section><section class="py-20"><div class="mx-auto max-w-5xl px-6"><div class="relative overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-primary/30 via-card/40 to-accent/20 p-12 text-center backdrop-blur md:p-20"><div class="absolute -top-20 left-1/2 h-60 w-[120%] -translate-x-1/2 roun
1ded-full bg-primary/30 blur-[100px]"></div><div class="relative"><h2 class="font-display text-5xl md:text-6xl">Your next look is <em class="text-gradient not-italic">one tap away.</em></h2><p class="mx-auto mt-4 max-w-xl text-muted-foreground">Join thousands discovering their perfect look with Genni — the AI beauty studio in your pocket.</p><div class="mt-8 flex flex-wrap items-center justify-center gap-4"><a href="https://apps.apple.com/ng/app/genni-hairstyle-try-on-app/id6756431811" target="_blank" rel="noreferrer" class="inline-flex items-center gap-3 rounded-2xl bg-foreground px-6 py-4 text-background hover:scale-[1.02] transition"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple h-7 w-7" aria-hidden="true"><path d="M12 6.528V3a1 1 0 0 1 1-1h0"></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"></path></svg><div class="text-left"><div class="text-[10px] uppercase tracking-widest opacity-70">Download on the</div><div class="text-base font-semibold leading-tight">App Store</div></div></a><a href="https://play.google.com/store/apps/details?id=com.blueskytechnologies.gemma" target="_blank" rel="noreferrer" class="inline-flex items-center gap-3 rounded-2xl border border-border bg-card px-6 py-4 hover:scale-[1.02] transition hover:bg-secondary"><svg class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.24-.84-.76-.84-1.35zm13.81-5.38L6.05 21.34l8.49-8.49 2.27 2.27zm3.35-4.31c.34.27.59.69.59 1.19s-.22.9-.57 1.18l-2.29 1.32-2.5-2.5 2.5-2.5 2.27 1.31zM5.94 2.66l11.52 6.64-2.27 2.27L5.94 2.66z"></path></svg><div class="text-left"><div class="text-[10px] uppercase tracking-widest opacity-70">Get it on</div><div class="text-base font-semibold leading-tight">Google Play</div></div></a></div></div></div></div></section></main><footer class="border-t border-border py-10"><div class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 md:flex-row"><a class="flex items-center gap-2 active" href="/" data-status="active" aria-current="page"><img src="/assets/genni-logo-BaAjlWM9.png" alt="Genni logo" class="h-8 w-8 rounded-xl object-cover"/><span class="font-display text-xl">Genni</span></a><nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm font-medium text-foreground"><a href="/privacy" class="transition hover:text-accent">Privacy Policy</a><a href="/terms" class="transition hover:text-accent">Terms and Conditions</a></nav><p class="text-xs text-muted-foreground">© 2026 Genni Studio. Discover your perfect look.</p></div></footer></div>
1<script>(function(t){let s;try{s=JSON.parse(sessionStorage.getItem(t.storageKey)||"{}")}catch(e){console.error(e);return}const c=t.key||window.history.state?.__TSR_key,r=c?s[c]:void 0;if(t.shouldScrollRestoration&&r&&typeof r=="object"&&Object.keys(r).length>0){for(const e in r){const o=r[e];if(!o||typeof o!="object")continue;const l=o.scrollX,i=o.scrollY;if(!(!Number.isFinite(l)||!Number.isFinite(i))){if(e==="window")window.scrollTo({top:i,left:l,behavior:t.behavior});else if(e){let n;try{n=document.querySelector(e)}catch{continue}n&&(n.scrollLeft=l,n.scrollTop=i)}}}return}const a=window.location.hash.split("#",2)[1];if(a){const e=window.history.state?.__hashScrollIntoViewOptions??!0;if(e){const o=document.getElementById(a);o&&o.scrollIntoView(e)}return}window.scrollTo({top:0,left:0,behavior:t.behavior})})({"storageKey":"tsr-scroll-restoration-v1_3","shouldScrollRestoration":true});document.currentScript.remove()</script>
1<!--/$-->
1<script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-BTqt9req.js"],assets:$R[5]=[$R[6]={tag:"script",attrs:$R[7]={type:"module",async:!0},children:"import(\"/assets/index-BTqt9req.js\")"}]},"/":$R[8]={preloads:$R[9]=["/assets/index-DBpiT_lZ.js","/assets/createLucideIcon-BRAU9Mlt.js"]}}},matches:$R[10]=[$R[11]={i:"__root__�",u:1790904590972,s:"success",ssr:!0},$R[12]={i:"��",u:1790904590972,s:"success",ssr:!0}],lastMatchId:"��"})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script>
1<script type="module" async="">import("/assets/index-BTqt9req.js")</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.