168 lines
7.4 KiB
PHP
168 lines
7.4 KiB
PHP
<?php
|
|
/**
|
|
* Front Page template
|
|
*
|
|
* Renders the SEWJOY shopping homepage. Self-contained — does not call
|
|
* get_header() / get_footer() so the brand nav and footer can match the
|
|
* custom design system without affecting other templates.
|
|
*
|
|
* @package SewJoy_Theme
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
<head>
|
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
|
|
<?php wp_head(); ?>
|
|
</head>
|
|
|
|
<body <?php body_class( 'home-page' ); ?>>
|
|
<?php wp_body_open(); ?>
|
|
|
|
<div class="home">
|
|
|
|
<?php require get_template_directory() . '/template-parts/home-nav.php'; ?>
|
|
|
|
<!-- ============================================
|
|
HERO 1 — MAKE CREATION WEARABLE
|
|
============================================ -->
|
|
<section class="hero hero--primary" aria-labelledby="hero-1-heading">
|
|
<div class="hero__content">
|
|
<h1 id="hero-1-heading" class="hero__heading">MAKE CREATION WEARABLE</h1>
|
|
<p class="hero__sub">Timeless pieces. Designed by you. Made to be loved.</p>
|
|
|
|
<ul class="hero__badges">
|
|
<li class="hero-badge">
|
|
<span class="hero-badge__dot" aria-hidden="true"></span>
|
|
<div class="hero-badge__body">
|
|
<span class="hero-badge__title">CUSTOM MADE</span>
|
|
<span class="hero-badge__desc">Design your unique style in just 3 steps</span>
|
|
</div>
|
|
</li>
|
|
<li class="hero-badge">
|
|
<span class="hero-badge__dot" aria-hidden="true"></span>
|
|
<div class="hero-badge__body">
|
|
<span class="hero-badge__title">PREMIUM QUALITY</span>
|
|
<span class="hero-badge__desc">Carefully selected fabrics & craftsmanship</span>
|
|
</div>
|
|
</li>
|
|
<li class="hero-badge">
|
|
<span class="hero-badge__dot" aria-hidden="true"></span>
|
|
<div class="hero-badge__body">
|
|
<span class="hero-badge__title">SUSTAINABLE</span>
|
|
<span class="hero-badge__desc">Made to order, less waste, more care</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="hero__placeholder" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<div class="hero__big-number" aria-hidden="true">01</div>
|
|
<div class="hero__caption">CRAFTED FOR MAKERS</div>
|
|
</section>
|
|
|
|
<div class="section-break" role="presentation"></div>
|
|
|
|
<!-- ============================================
|
|
HERO 2 — Sew Your Style, Wear Your Story
|
|
============================================ -->
|
|
<section class="hero hero--secondary" aria-labelledby="hero-2-heading">
|
|
<div class="hero__content">
|
|
<h2 id="hero-2-heading" class="hero__heading hero__heading--large">Sew Your Style,<br>Wear Your Story.</h2>
|
|
<p class="hero__sub">DIY Clothing Kit. Made for Everyone.</p>
|
|
|
|
<ul class="hero__features">
|
|
<li class="hero-feature">
|
|
<span class="hero-feature__icon" aria-hidden="true">○</span>
|
|
<span class="hero-feature__label">GLOBAL DESIGNS</span>
|
|
</li>
|
|
<li class="hero-feature">
|
|
<span class="hero-feature__icon" aria-hidden="true">○</span>
|
|
<span class="hero-feature__label">BEGINNER FRIENDLY</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<a class="cta-button" href="<?php echo esc_url( home_url( '/shop' ) ); ?>">
|
|
<span>Shop the Collection</span>
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hero__big-number" aria-hidden="true">02</div>
|
|
<div class="hero__caption">DESIGNED BY YOU</div>
|
|
</section>
|
|
|
|
<div class="section-break" role="presentation"></div>
|
|
|
|
<!-- ============================================
|
|
TAILORED BOND — 3 cards
|
|
============================================ -->
|
|
<section class="tailored-bond" aria-labelledby="tailored-bond-heading">
|
|
<header class="tailored-bond__header">
|
|
<h2 id="tailored-bond-heading" class="tailored-bond__heading">TAILORED FOR EVERY BOND</h2>
|
|
<p class="tailored-bond__subtitle">为每一份珍贵的爱，量身定制</p>
|
|
</header>
|
|
|
|
<div class="tailored-bond__cards">
|
|
<article class="bond-card bond-card--personal">
|
|
<span class="bond-card__num" aria-hidden="true">01</span>
|
|
<div class="bond-card__body">
|
|
<span class="bond-card__index">01</span>
|
|
<h3 class="bond-card__title-cn">个人系列</h3>
|
|
<span class="bond-card__title-en">PERSONAL</span>
|
|
<p class="bond-card__desc">为自己设计<br>独一无二的风尚</p>
|
|
</div>
|
|
<a class="bond-card__cta" href="#">
|
|
<span>DESIGN NOW</span>
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
<span class="bond-card__big-num" aria-hidden="true">01</span>
|
|
</article>
|
|
|
|
<article class="bond-card bond-card--parent-kid">
|
|
<span class="bond-card__num" aria-hidden="true">02</span>
|
|
<div class="bond-card__body">
|
|
<span class="bond-card__index">02</span>
|
|
<h3 class="bond-card__title-cn">亲子系列</h3>
|
|
<span class="bond-card__title-en">PARENT & KID</span>
|
|
<p class="bond-card__desc">爱的服装穿搭<br>记录成长的每一刻</p>
|
|
</div>
|
|
<a class="bond-card__cta" href="#">
|
|
<span>DESIGN NOW</span>
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
<span class="bond-card__big-num" aria-hidden="true">02</span>
|
|
</article>
|
|
|
|
<article class="bond-card bond-card--pet">
|
|
<span class="bond-card__num" aria-hidden="true">03</span>
|
|
<div class="bond-card__body">
|
|
<span class="bond-card__index">03</span>
|
|
<h3 class="bond-card__title-cn">主宠系列</h3>
|
|
<span class="bond-card__title-en">PET</span>
|
|
<p class="bond-card__desc">舒适的同时兼具<br>给主子最好的爱</p>
|
|
</div>
|
|
<a class="bond-card__cta" href="#">
|
|
<span>DESIGN NOW</span>
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
<span class="bond-card__big-num" aria-hidden="true">03</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================
|
|
FOOTER (shared with page-shop via template-part)
|
|
============================================ -->
|
|
<?php require get_template_directory() . '/template-parts/home-footer.php'; ?>
|
|
|
|
</div><!-- .home -->
|
|
|
|
<?php wp_footer(); ?>
|
|
</body>
|
|
</html>
|