177 lines
8.4 KiB
PHP
177 lines
8.4 KiB
PHP
<?php
|
||
/**
|
||
* Template Name: Design Yours
|
||
*
|
||
* Self-contained Design Yours / Custom Design Flow landing. Mirrors
|
||
* front-page.php and page-shop.php: own DOCTYPE, <head>, brand nav
|
||
* (from template-part), 3-step splash carousel, 3-series cards (reuses
|
||
* front-page's bond-card markup verbatim), 4 Featured Designs cards
|
||
* (hardcoded), footer (from template-part).
|
||
*
|
||
* @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 home--design">
|
||
|
||
<?php require get_template_directory() . '/template-parts/home-nav.php'; ?>
|
||
|
||
<!-- ============================================
|
||
DY SPLASH — 3-step carousel (interactive via design.js)
|
||
============================================ -->
|
||
<section class="dy-splash" aria-label="Design process">
|
||
<div class="dy-splash__viewport">
|
||
|
||
<article class="dy-splash__slide is-active" data-slide="0" style="--slide-tone: #F0E8DC;">
|
||
<div class="dy-splash__image" aria-hidden="true"></div>
|
||
<div class="dy-splash__overlay">
|
||
<span class="dy-splash__eyebrow">STEP 01 OF 03</span>
|
||
<h2 class="dy-splash__title">Choose Your Style</h2>
|
||
<p class="dy-splash__desc">Start with a base style from our curated library — Classic Shirt, A-Line Dress, Casual Tee, and more.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dy-splash__slide" data-slide="1" style="--slide-tone: #E8D8C8;">
|
||
<div class="dy-splash__image" aria-hidden="true"></div>
|
||
<div class="dy-splash__overlay">
|
||
<span class="dy-splash__eyebrow">STEP 02 OF 03</span>
|
||
<h2 class="dy-splash__title">Pick Your Fabric</h2>
|
||
<p class="dy-splash__desc">Choose from over 40 premium fabrics — Linen, Silk, Cotton, Cashmere — all sustainably sourced.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="dy-splash__slide" data-slide="2" style="--slide-tone: #D9C9B0;">
|
||
<div class="dy-splash__image" aria-hidden="true"></div>
|
||
<div class="dy-splash__overlay">
|
||
<span class="dy-splash__eyebrow">STEP 03 OF 03</span>
|
||
<h2 class="dy-splash__title">Add Accessories</h2>
|
||
<p class="dy-splash__desc">Complete your look with matching buttons, trims, and a personalized label — the final touch.</p>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
<button type="button" class="dy-splash__arrow dy-splash__arrow--prev" aria-label="Previous slide">‹</button>
|
||
<button type="button" class="dy-splash__arrow dy-splash__arrow--next" aria-label="Next slide">›</button>
|
||
|
||
<div class="dy-splash__dots" role="tablist" aria-label="Choose slide">
|
||
<button type="button" class="dy-splash__dot is-active" data-go="0" aria-label="Slide 1" aria-selected="true"></button>
|
||
<button type="button" class="dy-splash__dot" data-go="1" aria-label="Slide 2" aria-selected="false"></button>
|
||
<button type="button" class="dy-splash__dot" data-go="2" aria-label="Slide 3" aria-selected="false"></button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================
|
||
DY THREE SERIES — reuse front-page bond-card markup
|
||
============================================ -->
|
||
<section class="dy-three-series" aria-label="Three series">
|
||
<header class="dy-three-series__header">
|
||
<h2 class="dy-three-series__heading">START BY CHOOSE COLLECTION</h2>
|
||
<p class="dy-three-series__subtitle">为每一份珍贵的爱，量身定制</p>
|
||
</header>
|
||
|
||
<div class="dy-three-series__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>
|
||
|
||
<!-- ============================================
|
||
DY FEATURED DESIGNS — 4 hardcoded cards
|
||
============================================ -->
|
||
<section class="dy-featured" aria-label="Featured designs">
|
||
<header class="dy-featured__header">
|
||
<h2 class="dy-featured__heading">Featured Designs</h2>
|
||
<p class="dy-featured__subhead">Get inspired by designs from our community of makers.</p>
|
||
</header>
|
||
|
||
<div class="dy-featured__row">
|
||
<?php
|
||
$featured = array(
|
||
array( 'Linen Wrap Dress', 'BY LENA M.', '#D9C9B0' ),
|
||
array( 'Silk Charmeuse Blouse', 'BY YUKI T.', '#E8D8C8' ),
|
||
array( 'Tailored Wool Blazer', 'BY ARIA K.', '#8A6E55' ),
|
||
array( 'Cotton Tee Bundle', 'BY NOOR S.', '#EFE6D6' ),
|
||
);
|
||
foreach ( $featured as $f ) {
|
||
list( $title, $maker, $tone ) = $f;
|
||
?>
|
||
<article class="dy-feat-card" style="--card-tone: <?php echo esc_attr( $tone ); ?>;">
|
||
<div class="dy-feat-card__media" aria-hidden="true"></div>
|
||
<div class="dy-feat-card__body">
|
||
<h3 class="dy-feat-card__title"><?php echo esc_html( $title ); ?></h3>
|
||
<span class="dy-feat-card__maker"><?php echo esc_html( $maker ); ?></span>
|
||
<a class="dy-feat-card__cta" href="#">
|
||
<span>CUSTOMIZE</span>
|
||
<span aria-hidden="true">→</span>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
<?php
|
||
}
|
||
?>
|
||
</div>
|
||
</section>
|
||
|
||
<?php require get_template_directory() . '/template-parts/home-footer.php'; ?>
|
||
|
||
</div><!-- .home -->
|
||
|
||
<?php wp_footer(); ?>
|
||
</body>
|
||
</html>
|