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

prototype: homepage v2 — Ashley vision (cream/gold/Playfair)

Browse Source
This commit is contained in:
Leonard
2026-07-16 16:41:41 +00:00
parent c645cf14ee
commit 89524b364f
1 changed files with 219 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototype/index.html
+154 -95
View File
@@ -4,21 +4,21 @@
<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." />
<meta name="description" content="Clean, warm, professional skin and beauty care in Cameron Park. Ashley Thornhill — esthetician since 2007. Facials, spray tans, waxing, lashes, and hair." />
<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 href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display: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. -->
<!-- v2 · Ashley vision filter · prototype only · not live -->
<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" />
<img src="https://phoenixcameronpark.com/assets/phoenix-logo-D9DlHWbO.png" alt="" width="32" height="32" />
<span class="wordmark__text">
<span class="wordmark__name">Phoenix</span>
<span class="wordmark__sub">Salon + Spa</span>
@@ -26,111 +26,183 @@
</a>
<nav class="nav" aria-label="Primary">
<a href="#services">Services</a>
<a href="#memberships">Memberships</a>
<a href="#membership">Membership</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>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book</a>
</div>
</header>
<main id="main">
<!-- Hero: Split Studio — photo dominant, text off-axis -->
<section class="hero split" aria-labelledby="hero-title">
<section class="hero wrap 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"
alt="Warm, calm treatment room at Phoenix Salon + Spa"
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="place">Cameron Park · Placerville area</p>
<h1 id="hero-title">She sees the whole person.</h1>
<p class="trust-line">
Ashley actually cares. She knows skin. Phoenix feels clean, safe, warm, and intentional —
so you can trust the chair you’re in.
</p>
<p class="lede">
Corrective facials, color-matched spray tans, waxing, lashes, and hair —
booked with the people who actually do the work.
professional results with a soft place to land.
</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 class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book an appointment</a>
<a class="text-link" href="#ashley">Meet Ashley</a>
</div>
<p class="fine">
Appointments are held for you. Please cancel or reschedule at least 24 hours ahead
to avoid a cancellation fee.
Please cancel or reschedule at least 24 hours ahead so we can hold time for you.
</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 class="ribbon wrap" role="note">
Nominated in Style Magazine’s 2026 Readers’ Choice —
<a href="https://phoenixcameronpark.com/">support 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>
<!-- Ashley earlier — trust first -->
<section class="section section--band" id="ashley" aria-labelledby="ashley-title">
<div class="wrap split split--flip">
<figure class="founder__media split__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="split__copy">
<p class="place">Founder + lead esthetician</p>
<h2 id="ashley-title">Ashley Thornhill</h2>
<hr class="gold-rule" />
<blockquote>
Licensed since 2007. Corrective skin, waxing, and custom spray tans —
always with the person, not just the service, in mind.
</blockquote>
<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.
Nearly two decades in the treatment room. Ashley builds each facial, wax, and airbrush tan
for your skin and your comfort — including days when you feel anxious, body-conscious, or
unsure where to start. Honest guidance. No overpromising.
</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>
Professional lines she trusts for home care and whole-body support include
IMAGE Skincare and Microbiome Labs — explained simply, so you feel empowered, not overwhelmed.
</p>
<div 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>
</div>
</div>
</div>
</section>
<!-- Services: alternating splits, uneven weights -->
<section class="section" id="services" aria-labelledby="services-title">
<!-- New clients: decision list, not 3 cards -->
<section class="section wrap section--narrow" id="start" aria-labelledby="start-title">
<div class="narrow">
<h2 id="start-title">Not sure where to start?</h2>
<p>
That’s okay. Most people aren’t. Pick what you need — or book with Ashley and she’ll help you choose.
</p>
<ul class="decide">
<li>
<a href="https://phoenixcameronpark.com/">
<span class="decide__label">Skin — facials &amp; correction</span>
<span class="decide__go">Book →</span>
</a>
</li>
<li>
<a href="https://phoenixcameronpark.com/">
<span class="decide__label">Glow — spray tan</span>
<span class="decide__go">Book →</span>
</a>
</li>
<li>
<a href="https://phoenixcameronpark.com/">
<span class="decide__label">Waxing — confidence &amp; consistency</span>
<span class="decide__go">Book →</span>
</a>
</li>
<li>
<a href="https://phoenixcameronpark.com/">
<span class="decide__label">Lashes or hair</span>
<span class="decide__go">Book →</span>
</a>
</li>
</ul>
<a class="text-link" href="https://phoenixcameronpark.com/new-clients">What to expect as a new client</a>
</div>
</section>
<section class="section wrap" 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>
<h2 id="services-title">How we care for you</h2>
<p>
Beautiful skin and confidence are built through consistency — professional treatments,
education, and home care that actually fits your life.
</p>
</header>
<article class="split service">
<article class="service split">
<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>
<p>
Custom corrective facials that reset and assess — barrier, acne, hydration, aging —
with clear education so you understand what your skin needs next.
</p>
<a class="text-link" href="https://phoenixcameronpark.com/">Explore facials</a>
</div>
</article>
<article class="split service service--flip">
<article class="service split split--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>
<p>
Color-matched airbrush tans with prep and chemistry that matter — natural, even,
and kind to people who feel vulnerable in the room.
</p>
<a class="text-link" href="https://phoenixcameronpark.com/membership">Tan memberships</a>
</div>
</article>
<article class="split service">
<article class="service split">
<figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/waxing-service-C-PoOvVS.jpg" alt="Waxing service" width="1200" height="900" loading="lazy" />
<img src="https://phoenixcameronpark.com/assets/waxing-service-C-PoOvVS.jpg" alt="Waxing" 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>
<p>
Brazilian, bikini, and full-body waxing with skill and care — consistency and confidence,
not a rushed add-on.
</p>
<a class="text-link" href="https://phoenixcameronpark.com/">Waxing services</a>
</div>
</article>
<div class="service-pair">
<article class="service-card">
<article>
<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>
<p>Classic, hybrid, and volume extensions, plus lifts and brow lamination.</p>
</article>
<article class="service-card">
<article>
<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>
@@ -138,11 +210,14 @@
</div>
</section>
<!-- Memberships: asymmetric, prices real -->
<section class="section section--band" id="memberships" aria-labelledby="mem-title">
<section class="section section--band" id="membership" aria-labelledby="mem-title">
<div class="wrap">
<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>
<h2 id="mem-title">Consistency, made simple</h2>
<p>
Membership is the container for results — accountability, rhythm, and care that doesn’t
depend on willpower alone.
</p>
</header>
<div class="mem-grid">
<article class="mem mem--lead">
@@ -155,44 +230,24 @@
<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>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/membership">Explore Glow membership</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>
<p>
Keep a standing glow without rebooking from scratch every 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>
<section class="section wrap section--narrow" id="reviews" aria-labelledby="reviews-title">
<div class="narrow">
<h2 id="reviews-title">From the chair</h2>
<figure class="quote">
<blockquote>
Ashley completely transformed my skin. After years of struggling with hormonal acne,
@@ -214,17 +269,17 @@
</blockquote>
<figcaption>— Christina V.</figcaption>
</figure>
<p class="cta-row">
<a class="text-link" href="https://phoenixcameronpark.com/">Read more reviews</a>
</p>
<a class="text-link" href="https://phoenixcameronpark.com/">More reviews</a>
</div>
</section>
<!-- List: quiet, useful -->
<section class="section section--band section--narrow" id="list" aria-labelledby="list-title">
<h2 id="list-title">Skincare list</h2>
<section class="section section--band" id="list" aria-labelledby="list-title">
<div class="wrap section--narrow">
<div class="narrow">
<h2 id="list-title">Stay close</h2>
<p>
Join for 10% off your first online skincare order, plus the notes we send on promotions
and care tips. Unsubscribe any time.
Education, promotions, and simple tips — nothing spammy. 10% off your first online
skincare order when you join. Unsubscribe any time.
</p>
<form class="list-form" action="#" method="post" onsubmit="return false;">
<label class="sr-only" for="fn">First name</label>
@@ -232,12 +287,14 @@
<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>
<p class="fine">Prototype form — not connected. Subscribe on the live site.</p>
</form>
</div>
</div>
</section>
<!-- Visit -->
<section class="section section--narrow" id="visit" aria-labelledby="visit-title">
<section class="section wrap section--narrow" id="visit" aria-labelledby="visit-title">
<div class="narrow">
<h2 id="visit-title">Visit</h2>
<p class="address">
3460 Robin Lane, Suite 4<br />
@@ -247,18 +304,19 @@
<a href="tel:+15303509197">(530) 350-9197</a><br />
<a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a>
</p>
<p class="cta-row">
<div 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>
<a class="btn btn--soft" href="https://phoenixcameronpark.com/contact">Contact</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="site-footer__inner">
<div class="wrap">
<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.
Clean. Safe. Professional. Warm. Intentional.
A place you can trust with your skin — and yourself.
</p>
<p class="site-footer__meta">
<a href="https://phoenixcameronpark.com/">Live site</a>
@@ -268,8 +326,9 @@
© 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.
<strong>Prototype v2</strong> — filtered through Ashley’s vision (Gitea brain dump).
Not published to production. Clone <code>Tony_tech/phoenix-website-hallmark</code> and open
<code>prototype/index.html</code>.
</p>
</div>
</footer>