Tony_tech/phoenix-website-hallmark
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prototype: Hallmark Split Studio homepage (local only)

Browse Source
This commit is contained in:
Leonard
2026-07-16 16:18:41 +00:00
parent 63156ad2c8
commit 7e1475e48e
1 changed files with 277 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototype/index.html
+277
View File
@@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phoenix Salon + Spa · Cameron Park, CA</title>
<meta name="description" content="Customized facials, spray tans, waxing, lashes, and hair in Cameron Park. Founded by licensed esthetician Ashley Thornhill." />
<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=Cormorant+Garamond:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Hallmark recreation prototype — local only. Not deployed. -->
<a class="skip" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header__inner">
<a class="wordmark" href="#main">
<img src="https://phoenixcameronpark.com/assets/phoenix-logo-D9DlHWbO.png" alt="" width="40" height="40" />
<span class="wordmark__text">
<span class="wordmark__name">Phoenix</span>
<span class="wordmark__sub">Salon + Spa</span>
</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#services">Services</a>
<a href="#memberships">Memberships</a>
<a href="#ashley">Ashley</a>
<a href="#reviews">Reviews</a>
<a href="#visit">Visit</a>
</nav>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/" rel="noopener">Book</a>
</div>
</header>
<main id="main">
<!-- Hero: Split Studio — photo dominant, text off-axis -->
<section class="hero split" aria-labelledby="hero-title">
<figure class="hero__media">
<img
src="https://phoenixcameronpark.com/assets/hero-spa-B1o1K7_o.jpg"
alt="Treatment room at Phoenix Salon + Spa in Cameron Park"
width="1920"
height="1080"
fetchpriority="high"
/>
</figure>
<div class="hero__copy">
<p class="place">Cameron Park, California</p>
<h1 id="hero-title">Skin work that lasts longer than the appointment.</h1>
<p class="lede">
Corrective facials, color-matched spray tans, waxing, lashes, and hair —
booked with the people who actually do the work.
</p>
<div class="hero__actions">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book your appointment</a>
<a class="text-link" href="#services">Browse services</a>
</div>
<p class="fine">
Appointments are held for you. Please cancel or reschedule at least 24 hours ahead
to avoid a cancellation fee.
</p>
</div>
</section>
<p class="ribbon" role="note">
Nominated in Style Magazine’s 2026 Readers’ Choice Awards —
<a href="https://phoenixcameronpark.com/">vote for Phoenix</a>
</p>
<!-- First visit: prose, not three equal cards -->
<section class="section section--narrow" id="start" aria-labelledby="start-title">
<h2 id="start-title">New here?</h2>
<p>
Pick the service you need, choose a provider who fits the work, and book online.
If you’re not sure which facial or tan is right, start with Ashley — she’s been in the
treatment room since 2007 and can point you.
</p>
<p class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/new-clients">Book a first visit</a>
<a class="text-link" href="https://phoenixcameronpark.com/new-clients">What to expect</a>
</p>
</section>
<!-- Services: alternating splits, uneven weights -->
<section class="section" id="services" aria-labelledby="services-title">
<header class="section__intro">
<h2 id="services-title">What we do</h2>
<p>Five service lines. Each customized in the chair — not sold as a menu special.</p>
</header>
<article class="split service">
<figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/facial-service-BAFzh2A9.jpg" alt="Facial treatment" width="1200" height="900" loading="lazy" />
</figure>
<div class="service__copy">
<h3>Facials</h3>
<p>Custom corrective facials for the skin you actually have — acne, texture, aging, barrier repair — with visible, lasting results.</p>
<a class="text-link" href="https://phoenixcameronpark.com/">Facials &amp; booking</a>
</div>
</article>
<article class="split service service--flip">
<figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/spray-tan-service-BeXCpY38.jpg" alt="Spray tan" width="1200" height="900" loading="lazy" />
</figure>
<div class="service__copy">
<h3>Spray tans</h3>
<p>Color-matched airbrush tans built for a natural finish that grows out clean — membership options if you keep a standing glow.</p>
<a class="text-link" href="https://phoenixcameronpark.com/membership">Tan memberships</a>
</div>
</article>
<article class="split service">
<figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/waxing-service-C-PoOvVS.jpg" alt="Waxing service" width="1200" height="900" loading="lazy" />
</figure>
<div class="service__copy">
<h3>Waxing</h3>
<p>Brazilian, bikini, and full-body waxing with the precision of someone who does this every day — not a once-a-week add-on.</p>
<a class="text-link" href="https://phoenixcameronpark.com/">Waxing services</a>
</div>
</article>
<div class="service-pair">
<article class="service-card">
<img src="https://phoenixcameronpark.com/assets/lashes-service-DmA0K5vx.jpg" alt="" width="800" height="600" loading="lazy" />
<h3>Lashes</h3>
<p>Classic, hybrid, and volume extensions, plus lash lifts and brow lamination.</p>
</article>
<article class="service-card">
<img src="https://phoenixcameronpark.com/assets/hair-service-DiM0-O1B.jpg" alt="" width="800" height="600" loading="lazy" />
<h3>Hair</h3>
<p>Cuts, color, and extensions from independent stylists who own their craft.</p>
</article>
</div>
</section>
<!-- Memberships: asymmetric, prices real -->
<section class="section section--band" id="memberships" aria-labelledby="mem-title">
<header class="section__intro">
<h2 id="mem-title">Memberships</h2>
<p>Steady care costs less than catch-up. Card on file; three-month commitment on Glow.</p>
</header>
<div class="mem-grid">
<article class="mem mem--lead">
<p class="mem__kicker">Facials &amp; skincare</p>
<h3>Phoenix Glow</h3>
<p class="mem__price"><span>$70</span> / month</p>
<ul>
<li>1 monthly skin-maintenance facial per billing cycle</li>
<li>20% off facial enhancements with your membership facial</li>
<li>15% off skincare retail in-salon and online</li>
<li>3-month commitment · card on file</li>
</ul>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/membership">Explore Glow</a>
</article>
<article class="mem">
<p class="mem__kicker">Spray tans</p>
<h3>Tan memberships</h3>
<p class="mem__price"><span>From $95</span> / month</p>
<p>Standing tan cadence without rebooking from scratch each time. Plans start at $95/month.</p>
<a class="text-link" href="https://phoenixcameronpark.com/membership">Explore tan plans</a>
</article>
</div>
</section>
<!-- Ashley: split -->
<section class="section split founder" id="ashley" aria-labelledby="ashley-title">
<figure class="founder__media">
<img src="https://phoenixcameronpark.com/assets/ashley-thornhill-grRkPiVr.jpg" alt="Ashley Thornhill, founder and lead esthetician" width="900" height="1100" loading="lazy" />
</figure>
<div class="founder__copy">
<p class="place">Founder + lead esthetician</p>
<h2 id="ashley-title">Ashley Thornhill</h2>
<blockquote>
Licensed esthetician since 2007 — corrective skin treatments, waxing, and custom spray tans.
</blockquote>
<p>
Nearly two decades in the treatment room. Ashley builds each facial, wax, and airbrush tan
to the person in the chair: customized facials, microdermabrasion, chemical peels,
Brazilian and full-body waxing, and color-matched spray tanning.
</p>
<p class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book with Ashley</a>
<a class="text-link" href="https://phoenixcameronpark.com/">Her story</a>
</p>
</div>
</section>
<!-- Reviews: quote-led, not star grids -->
<section class="section section--narrow" id="reviews" aria-labelledby="reviews-title">
<h2 id="reviews-title">From clients</h2>
<figure class="quote">
<blockquote>
Ashley completely transformed my skin. After years of struggling with hormonal acne,
her customized facials finally gave me clear, glowing skin. I trust her with everything.
</blockquote>
<figcaption>— Sarah M.</figcaption>
</figure>
<figure class="quote">
<blockquote>
Best spray tan I’ve ever had — so natural and even. Ashley matched my skin tone perfectly.
I’m a member now and never looking back.
</blockquote>
<figcaption>— Jessica L.</figcaption>
</figure>
<figure class="quote">
<blockquote>
Phoenix Salon + Spa is the best-kept secret in Cameron Park. The atmosphere is so calming
and every service I’ve had has exceeded expectations.
</blockquote>
<figcaption>— Christina V.</figcaption>
</figure>
<p class="cta-row">
<a class="text-link" href="https://phoenixcameronpark.com/">Read more reviews</a>
</p>
</section>
<!-- List: quiet, useful -->
<section class="section section--band section--narrow" id="list" aria-labelledby="list-title">
<h2 id="list-title">Skincare list</h2>
<p>
Join for 10% off your first online skincare order, plus the notes we send on promotions
and care tips. Unsubscribe any time.
</p>
<form class="list-form" action="#" method="post" onsubmit="return false;">
<label class="sr-only" for="fn">First name</label>
<input id="fn" name="first_name" type="text" autocomplete="given-name" placeholder="First name" required />
<label class="sr-only" for="em">Email</label>
<input id="em" name="email" type="email" autocomplete="email" placeholder="Email" required />
<button class="btn btn--primary" type="submit">Join the list</button>
<p class="fine">Prototype form — not connected. Use the live site to subscribe.</p>
</form>
</section>
<!-- Visit -->
<section class="section section--narrow" id="visit" aria-labelledby="visit-title">
<h2 id="visit-title">Visit</h2>
<p class="address">
3460 Robin Lane, Suite 4<br />
Cameron Park, CA 95682
</p>
<p>
<a href="tel:+15303509197">(530) 350-9197</a><br />
<a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a>
</p>
<p class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book online</a>
<a class="text-link" href="https://phoenixcameronpark.com/contact">Contact page</a>
</p>
</section>
</main>
<footer class="site-footer">
<div class="site-footer__inner">
<p class="site-footer__statement">
A results-driven skincare and beauty studio in Cameron Park —
long-term skin health, confidence, and work that holds up after you leave.
</p>
<p class="site-footer__meta">
<a href="https://phoenixcameronpark.com/">Live site</a>
·
<a href="https://www.instagram.com/PhoenixCameronPark/" rel="noopener">Instagram</a>
·
© 2026 Phoenix Salon + Spa
</p>
<p class="site-footer__note">
This page is a <strong>local Hallmark redesign prototype</strong>. It is not published
to phoenixcameronpark.com.
</p>
</div>
</footer>
</body>
</html>