Files
phoenix-website-hallmark/prototype/index.html
T

337 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="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=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>
<!-- 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="32" height="32" />
<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="#membership">Membership</a>
<a href="#ashley">Ashley</a>
<a href="#visit">Visit</a>
</nav>
<a class="btn btn--primary" href="https://phoenixcameronpark.com/">Book</a>
</div>
</header>
<main id="main">
<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="Warm, calm treatment room at Phoenix Salon + Spa"
width="1920"
height="1080"
fetchpriority="high"
/>
</figure>
<div class="hero__copy">
<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 youre in.
</p>
<p class="lede">
Corrective facials, color-matched spray tans, waxing, lashes, and hair —
professional results with a soft place to land.
</p>
<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">
Please cancel or reschedule at least 24 hours ahead so we can hold time for you.
</p>
</div>
</section>
<p class="ribbon wrap" role="note">
Nominated in Style Magazines 2026 Readers Choice —
<a href="https://phoenixcameronpark.com/">support Phoenix</a>
</p>
<!-- 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>
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>
<!-- 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>
Thats okay. Most people arent. Pick what you need — or book with Ashley and shell 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">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="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 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="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 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="service split">
<figure class="service__media">
<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 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>
<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 lifts and brow lamination.</p>
</article>
<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>
</article>
</div>
</section>
<section class="section section--band" id="membership" aria-labelledby="mem-title">
<div class="wrap">
<header class="section__intro">
<h2 id="mem-title">Consistency, made simple</h2>
<p>
Membership is the container for results — accountability, rhythm, and care that doesnt
depend on willpower alone.
</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 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>
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>
</section>
<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,
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 Ive ever had — so natural and even. Ashley matched my skin tone perfectly.
Im 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 Ive 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>
<a href="tel:+15303509197">(530) 350-9197</a><br />
<a href="mailto:ashley@phoenixcameronpark.com">ashley@phoenixcameronpark.com</a>
</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>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<p class="site-footer__statement">
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>
·
<a href="https://www.instagram.com/PhoenixCameronPark/" rel="noopener">Instagram</a>
·
© 2026 Phoenix Salon + Spa
</p>
<p class="site-footer__note">
<strong>Prototype v2</strong> — filtered through Ashleys 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>
</body>
</html>