<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing page: GSAP Carousel / gallery</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..900;1,9..40,400..900&display=swap" rel="stylesheet" />
<div class="grain"></div>
<!-- NAV -->
<nav class="nav" id="nav">
<div class="logo">
<span class="logo-dot"></span>
DERMEXCEL
</div>
<ul class="nav-links">
<li><a href="#">Products</a></li>
<li><a href="#">Treatment plans</a></li>
<li><a href="#">Diagnosis</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="nav-cta">
Diagnosis Diagnosis
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="7" y1="17" x2="17" y2="7" />
<polyline points="7 7 17 7 17 17" />
</svg>
</button>
</nav>
<!-- HERO -->
<section class="hero">
<h1 class="small-team" id="smallTeam">
<span class="word"><span>Small</span></span> <span class="word"><span>team,</span></span>
</h1>
<div class="big-results-wrap">
<div class="big-results" id="bigResults">
<span class="letter">b</span><span class="letter">i</span><span class="letter">g</span><span class="letter"> </span><span class="letter">r</span><span class="letter">e</span><span class="letter">s</span><span class="letter">u</span><span class="letter">l</span><span class="letter">t</span><span class="letter">s</span>
</div>
</div>
<!-- Card row of portraits -->
<div class="cards-row" id="cardsRow">
<div class="card card-1" data-rot="-9" data-depth="14">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/dhs-brand-3x4-07.jpg?v=1782043727?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-2" data-rot="-5" data-depth="10">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/enr-1x1-01.jpg?v=1782002435?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-3" data-rot="-2" data-depth="8">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/dhs-brand-3x4-05.jpg?v=1782043916?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-4" data-rot="3" data-depth="12">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/fes-3x4-09.jpg?v=1782034037?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-5" data-rot="0" data-depth="6">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/enr20-3x4-01.jpg?v=1782002435?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-6" data-rot="4" data-depth="11">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/dcs-3x4-01.jpg?v=1782035651?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-7" data-rot="7" data-depth="9">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/fes-3x4-01.jpg?v=1782034037?v=1782042890?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
<div class="card card-8" data-rot="-4" data-depth="13">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/dhs-brand-3x4-07.jpg?v=1782043727?w=400&h=600&fit=crop&crop=faces&q=80" alt="" />
</div>
</div>
<div class="subline" id="subline">
<button class="arrow-pill">
Meet the crew
<span class="ar">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="7" y1="17" x2="17" y2="7" />
<polyline points="7 7 17 7 17 17" />
</svg>
</span>
</button>
<div class="subline-text">8 people. 60+ shipped projects. Zero filler.</div>
</div>
</section>
<!-- ============ SECTION 2: TEAM GRID ============ -->
<section class="team-section">
<div class="team-head">
<div>
<div class="eyebrow">CLINICAL FRAMEWORK ARCHITECTURE</div>
<h2>Biocentric Integration<br />of <em>Dermal Systems</em> and <em>Cellar Identity</em>.</h2>
</div>
<p>Explore the systemic lifecycle matrix balancing infrastructural process design and custom target therapeutics formulas.</p>
</div>
<div class="team-grid" id="teamGrid">
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/enr-1x1-01.jpg?v=1782002435?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Mateus Aldana</div>
<div class="rl">Creative Director</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/dermd_portrait-02.jpg?v=1782006127?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Eli Ramirez</div>
<div class="rl">Design Lead</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/moist-3x4-05.jpg?v=1781995150?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Naomi Park</div>
<div class="rl">Brand Strategist</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/lit-3x4-09.jpg?v=1781989746?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Theo Vance</div>
<div class="rl">Senior Engineer</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/ret-9x16-02.jpg?v=1781973910?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Kit Bellamy</div>
<div class="rl">Art Direction</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/col-1x1-07.jpg?v=1781969450?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Ravi Saigal</div>
<div class="rl">Motion · 3D</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/lit-3x4-14.jpg?v=1781989745?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Iris Caldwell</div>
<div class="rl">Producer</div>
</div>
</div>
<div class="t-card">
<img src="https://cdn.shopify.com/s/files/1/0185/5999/1872/files/fes-3x4-01.jpg?v=1782034037?w=400&h=540&fit=crop&crop=faces&q=80" alt="" />
<div class="t-meta">
<div class="nm">Maya Okafor</div>
<div class="rl">Founder · CEO</div>
</div>
</div>
</div>
</section>
<!-- ============ SECTION 3: STATS ============ -->
<section class="stats">
<div class="stats-inner">
<h3>Cellular Dermal<br /> <em>Intelligence</em>.</h3>
<div class="stat-block">
<div class="num" data-count="62"><span>0</span></div>
<div class="lbl">Projects shipped</div>
</div>
<div class="stat-block">
<div class="num" data-count="14"><span>0</span><small>yrs</small></div>
<div class="lbl">Combined craft</div>
</div>
<div class="stat-block">
<div class="num" data-count="9"><span>0</span><small>.4</small></div>
<div class="lbl">Avg NPS</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
