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 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">
<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> <p>
Pick the service you need, choose a provider who fits the work, and book online. Nearly two decades in the treatment room. Ashley builds each facial, wax, and airbrush tan
If you’re not sure which facial or tan is right, start with Ashley — she’s been in the for your skin and your comfort — including days when you feel anxious, body-conscious, or
treatment room since 2007 and can point you. unsure where to start. Honest guidance. No overpromising.
</p> </p>
<p class="cta-row"> <p>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/new-clients">Book a first visit</a> Professional lines she trusts for home care and whole-body support include
<a class="text-link" href="https://phoenixcameronpark.com/new-clients">What to expect</a> IMAGE Skincare and Microbiome Labs — explained simply, so you feel empowered, not overwhelmed.
</p> </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,11 +210,14 @@
</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>
Membership is the container for results — accountability, rhythm, and care that doesn’t
depend on willpower alone.
</p>
</header> </header>
<div class="mem-grid"> <div class="mem-grid">
<article class="mem mem--lead"> <article class="mem mem--lead">
@@ -155,44 +230,24 @@
<li>15% off skincare retail in-salon and online</li> <li>15% off skincare retail in-salon and online</li>
<li>3-month commitment · card on file</li> <li>3-month commitment · card on file</li>
</ul> </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>
<article class="mem"> <article class="mem">
<p class="mem__kicker">Spray tans</p> <p class="mem__kicker">Spray tans</p>
<h3>Tan memberships</h3> <h3>Tan memberships</h3>
<p class="mem__price"><span>From $95</span> / month</p> <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> <a class="text-link" href="https://phoenixcameronpark.com/membership">Explore tan plans</a>
</article> </article>
</div> </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> </div>
</section> </section>
<!-- Reviews: quote-led, not star grids --> <section class="section wrap section--narrow" id="reviews" aria-labelledby="reviews-title">
<section class="section section--narrow" id="reviews" aria-labelledby="reviews-title"> <div class="narrow">
<h2 id="reviews-title">From clients</h2> <h2 id="reviews-title">From the chair</h2>
<figure class="quote"> <figure class="quote">
<blockquote> <blockquote>
Ashley completely transformed my skin. After years of struggling with hormonal acne, Ashley completely transformed my skin. After years of struggling with hormonal acne,
@@ -214,17 +269,17 @@
</blockquote> </blockquote>
<figcaption>— Christina V.</figcaption> <figcaption>— Christina V.</figcaption>
</figure> </figure>
<p class="cta-row"> <a class="text-link" href="https://phoenixcameronpark.com/">More reviews</a>
<a class="text-link" href="https://phoenixcameronpark.com/">Read more reviews</a> </div>
</p>
</section> </section>
<!-- List: quiet, useful --> <section class="section section--band" id="list" aria-labelledby="list-title">
<section class="section section--band section--narrow" id="list" aria-labelledby="list-title"> <div class="wrap section--narrow">
<h2 id="list-title">Skincare list</h2> <div class="narrow">
<h2 id="list-title">Stay close</h2>
<p> <p>
Join for 10% off your first online skincare order, plus the notes we send on promotions Education, promotions, and simple tips — nothing spammy. 10% off your first online
and care tips. Unsubscribe any time. skincare order when you join. Unsubscribe any time.
</p> </p>
<form class="list-form" action="#" method="post" onsubmit="return false;"> <form class="list-form" action="#" method="post" onsubmit="return false;">
<label class="sr-only" for="fn">First name</label> <label class="sr-only" for="fn">First name</label>
@@ -232,12 +287,14 @@
<label class="sr-only" for="em">Email</label> <label class="sr-only" for="em">Email</label>
<input id="em" name="email" type="email" autocomplete="email" placeholder="Email" required /> <input id="em" name="email" type="email" autocomplete="email" placeholder="Email" required />
<button class="btn btn--primary" type="submit">Join the list</button> <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> </form>
</div>
</div>
</section> </section>
<!-- Visit --> <section class="section wrap section--narrow" id="visit" aria-labelledby="visit-title">
<section class="section section--narrow" id="visit" aria-labelledby="visit-title"> <div class="narrow">
<h2 id="visit-title">Visit</h2> <h2 id="visit-title">Visit</h2>
<p class="address"> <p class="address">
3460 Robin Lane, Suite 4<br /> 3460 Robin Lane, Suite 4<br />
@@ -247,18 +304,19 @@
<a href="tel:+15303509197">(530) 350-9197</a><br /> <a href="tel:+15303509197">(530) 350-9197</a><br />
<a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a> <a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a>
</p> </p>
<p class="cta-row"> <div class="cta-row">
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book online</a> <a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book online</a>
<a class="text-link" href="https://phoenixcameronpark.com/contact">Contact page</a> <a class="btn btn--soft" href="https://phoenixcameronpark.com/contact">Contact</a>
</p> </div>
</div>
</section> </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>