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
+219 -160
View File
@@ -4,21 +4,21 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phoenix Salon + Spa · Cameron Park, CA</title> <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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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="tokens.css" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <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> <a class="skip" href="#main">Skip to content</a>
<header class="site-header"> <header class="site-header">
<div class="site-header__inner"> <div class="site-header__inner">
<a class="wordmark" href="#main"> <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__text">
<span class="wordmark__name">Phoenix</span> <span class="wordmark__name">Phoenix</span>
<span class="wordmark__sub">Salon + Spa</span> <span class="wordmark__sub">Salon + Spa</span>
@@ -26,111 +26,183 @@
</a> </a>
<nav class="nav" aria-label="Primary"> <nav class="nav" aria-label="Primary">
<a href="#services">Services</a> <a href="#services">Services</a>
<a href="#memberships">Memberships</a> <a href="#membership">Membership</a>
<a href="#ashley">Ashley</a> <a href="#ashley">Ashley</a>
<a href="#reviews">Reviews</a>
<a href="#visit">Visit</a> <a href="#visit">Visit</a>
</nav> </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> </div>
</header> </header>
<main id="main"> <main id="main">
<!-- Hero: Split Studio — photo dominant, text off-axis --> <section class="hero wrap split" aria-labelledby="hero-title">
<section class="hero split" aria-labelledby="hero-title">
<figure class="hero__media"> <figure class="hero__media">
<img <img
src="https://phoenixcameronpark.com/assets/hero-spa-B1o1K7_o.jpg" 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" width="1920"
height="1080" height="1080"
fetchpriority="high" fetchpriority="high"
/> />
</figure> </figure>
<div class="hero__copy"> <div class="hero__copy">
<p class="place">Cameron Park, California</p> <p class="place">Cameron Park · Placerville area</p>
<h1 id="hero-title">Skin work that lasts longer than the appointment.</h1> <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"> <p class="lede">
Corrective facials, color-matched spray tans, waxing, lashes, and hair — 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> </p>
<div class="hero__actions"> <div class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book your appointment</a> <a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book an appointment</a>
<a class="text-link" href="#services">Browse services</a> <a class="text-link" href="#ashley">Meet Ashley</a>
</div> </div>
<p class="fine"> <p class="fine">
Appointments are held for you. Please cancel or reschedule at least 24 hours ahead Please cancel or reschedule at least 24 hours ahead so we can hold time for you.
to avoid a cancellation fee.
</p> </p>
</div> </div>
</section> </section>
<p class="ribbon" role="note"> <p class="ribbon wrap" role="note">
Nominated in Style Magazine’s 2026 Readers’ Choice Awards — Nominated in Style Magazine’s 2026 Readers’ Choice —
<a href="https://phoenixcameronpark.com/">vote for Phoenix</a> <a href="https://phoenixcameronpark.com/">support Phoenix</a>
</p> </p>
<!-- First visit: prose, not three equal cards --> <!-- Ashley earlier — trust first -->
<section class="section section--narrow" id="start" aria-labelledby="start-title"> <section class="section section--band" id="ashley" aria-labelledby="ashley-title">
<h2 id="start-title">New here?</h2> <div class="wrap split split--flip">
<p> <figure class="founder__media split__media">
Pick the service you need, choose a provider who fits the work, and book online. <img
If you’re not sure which facial or tan is right, start with Ashley — she’s been in the src="https://phoenixcameronpark.com/assets/ashley-thornhill-grRkPiVr.jpg"
treatment room since 2007 and can point you. alt="Ashley Thornhill, founder and lead esthetician"
</p> width="900"
<p class="cta-row"> height="1100"
<a class="btn btn--primary" href="https://phoenixcameronpark.com/new-clients">Book a first visit</a> loading="lazy"
<a class="text-link" href="https://phoenixcameronpark.com/new-clients">What to expect</a> />
</p> </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>
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>
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> </section>
<!-- Services: alternating splits, uneven weights --> <!-- New clients: decision list, not 3 cards -->
<section class="section" id="services" aria-labelledby="services-title"> <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"> <header class="section__intro">
<h2 id="services-title">What we do</h2> <h2 id="services-title">How we care for you</h2>
<p>Five service lines. Each customized in the chair — not sold as a menu special.</p> <p>
Beautiful skin and confidence are built through consistency — professional treatments,
education, and home care that actually fits your life.
</p>
</header> </header>
<article class="split service"> <article class="service split">
<figure class="service__media"> <figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/facial-service-BAFzh2A9.jpg" alt="Facial treatment" width="1200" height="900" loading="lazy" /> <img src="https://phoenixcameronpark.com/assets/facial-service-BAFzh2A9.jpg" alt="Facial treatment" width="1200" height="900" loading="lazy" />
</figure> </figure>
<div class="service__copy"> <div class="service__copy">
<h3>Facials</h3> <h3>Facials</h3>
<p>Custom corrective facials for the skin you actually have — acne, texture, aging, barrier repair — with visible, lasting results.</p> <p>
<a class="text-link" href="https://phoenixcameronpark.com/">Facials &amp; booking</a> 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> </div>
</article> </article>
<article class="split service service--flip"> <article class="service split split--flip">
<figure class="service__media"> <figure class="service__media">
<img src="https://phoenixcameronpark.com/assets/spray-tan-service-BeXCpY38.jpg" alt="Spray tan" width="1200" height="900" loading="lazy" /> <img src="https://phoenixcameronpark.com/assets/spray-tan-service-BeXCpY38.jpg" alt="Spray tan" width="1200" height="900" loading="lazy" />
</figure> </figure>
<div class="service__copy"> <div class="service__copy">
<h3>Spray tans</h3> <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> <a class="text-link" href="https://phoenixcameronpark.com/membership">Tan memberships</a>
</div> </div>
</article> </article>
<article class="split service"> <article class="service split">
<figure class="service__media"> <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> </figure>
<div class="service__copy"> <div class="service__copy">
<h3>Waxing</h3> <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> <a class="text-link" href="https://phoenixcameronpark.com/">Waxing services</a>
</div> </div>
</article> </article>
<div class="service-pair"> <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" /> <img src="https://phoenixcameronpark.com/assets/lashes-service-DmA0K5vx.jpg" alt="" width="800" height="600" loading="lazy" />
<h3>Lashes</h3> <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>
<article class="service-card"> <article>
<img src="https://phoenixcameronpark.com/assets/hair-service-DiM0-O1B.jpg" alt="" width="800" height="600" loading="lazy" /> <img src="https://phoenixcameronpark.com/assets/hair-service-DiM0-O1B.jpg" alt="" width="800" height="600" loading="lazy" />
<h3>Hair</h3> <h3>Hair</h3>
<p>Cuts, color, and extensions from independent stylists who own their craft.</p> <p>Cuts, color, and extensions from independent stylists who own their craft.</p>
@@ -138,127 +210,113 @@
</div> </div>
</section> </section>
<!-- Memberships: asymmetric, prices real --> <section class="section section--band" id="membership" aria-labelledby="mem-title">
<section class="section section--band" id="memberships" aria-labelledby="mem-title"> <div class="wrap">
<header class="section__intro"> <header class="section__intro">
<h2 id="mem-title">Memberships</h2> <h2 id="mem-title">Consistency, made simple</h2>
<p>Steady care costs less than catch-up. Card on file; three-month commitment on Glow.</p> <p>
</header> Membership is the container for results — accountability, rhythm, and care that doesn’t
<div class="mem-grid"> depend on willpower alone.
<article class="mem mem--lead"> </p>
<p class="mem__kicker">Facials &amp; skincare</p> </header>
<h3>Phoenix Glow</h3> <div class="mem-grid">
<p class="mem__price"><span>$70</span> / month</p> <article class="mem mem--lead">
<ul> <p class="mem__kicker">Facials &amp; skincare</p>
<li>1 monthly skin-maintenance facial per billing cycle</li> <h3>Phoenix Glow</h3>
<li>20% off facial enhancements with your membership facial</li> <p class="mem__price"><span>$70</span> / month</p>
<li>15% off skincare retail in-salon and online</li> <ul>
<li>3-month commitment · card on file</li> <li>1 monthly skin-maintenance facial per billing cycle</li>
</ul> <li>20% off facial enhancements with your membership facial</li>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/membership">Explore Glow</a> <li>15% off skincare retail in-salon and online</li>
</article> <li>3-month commitment · card on file</li>
<article class="mem"> </ul>
<p class="mem__kicker">Spray tans</p> <a class="btn btn--primary" href="https://phoenixcameronpark.com/membership">Explore Glow membership</a>
<h3>Tan memberships</h3> </article>
<p class="mem__price"><span>From $95</span> / month</p> <article class="mem">
<p>Standing tan cadence without rebooking from scratch each time. Plans start at $95/month.</p> <p class="mem__kicker">Spray tans</p>
<a class="text-link" href="https://phoenixcameronpark.com/membership">Explore tan plans</a> <h3>Tan memberships</h3>
</article> <p class="mem__price"><span>From $95</span> / 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>
</div> </div>
</section> </section>
<!-- Ashley: split --> <section class="section wrap section--narrow" id="reviews" aria-labelledby="reviews-title">
<section class="section split founder" id="ashley" aria-labelledby="ashley-title"> <div class="narrow">
<figure class="founder__media"> <h2 id="reviews-title">From the chair</h2>
<img src="https://phoenixcameronpark.com/assets/ashley-thornhill-grRkPiVr.jpg" alt="Ashley Thornhill, founder and lead esthetician" width="900" height="1100" loading="lazy" /> <figure class="quote">
</figure> <blockquote>
<div class="founder__copy"> Ashley completely transformed my skin. After years of struggling with hormonal acne,
<p class="place">Founder + lead esthetician</p> her customized facials finally gave me clear, glowing skin. I trust her with everything.
<h2 id="ashley-title">Ashley Thornhill</h2> </blockquote>
<blockquote> <figcaption>— Sarah M.</figcaption>
Licensed esthetician since 2007 — corrective skin treatments, waxing, and custom spray tans. </figure>
</blockquote> <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>
<a class="text-link" href="https://phoenixcameronpark.com/">More reviews</a>
</div>
</section>
<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>
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>
<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. Subscribe on the live site.</p>
</form>
</div>
</div>
</section>
<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 />
Cameron Park, CA 95682
</p>
<p> <p>
Nearly two decades in the treatment room. Ashley builds each facial, wax, and airbrush tan <a href="tel:+15303509197">(530) 350-9197</a><br />
to the person in the chair: customized facials, microdermabrasion, chemical peels, <a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a>
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> </p>
<div class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book online</a>
<a class="btn btn--soft" href="https://phoenixcameronpark.com/contact">Contact</a>
</div>
</div> </div>
</section> </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> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="site-footer__inner"> <div class="wrap">
<p class="site-footer__statement"> <p class="site-footer__statement">
A results-driven skincare and beauty studio in Cameron Park — Clean. Safe. Professional. Warm. Intentional.
long-term skin health, confidence, and work that holds up after you leave. A place you can trust with your skin — and yourself.
</p> </p>
<p class="site-footer__meta"> <p class="site-footer__meta">
<a href="https://phoenixcameronpark.com/">Live site</a> <a href="https://phoenixcameronpark.com/">Live site</a>
@@ -268,8 +326,9 @@
© 2026 Phoenix Salon + Spa © 2026 Phoenix Salon + Spa
</p> </p>
<p class="site-footer__note"> <p class="site-footer__note">
This page is a <strong>local Hallmark redesign prototype</strong>. It is not published <strong>Prototype v2</strong> — filtered through Ashley’s vision (Gitea brain dump).
to phoenixcameronpark.com. Not published to production. Clone <code>Tony_tech/phoenix-website-hallmark</code> and open
<code>prototype/index.html</code>.
</p> </p>
</div> </div>
</footer> </footer>