1cc5a8ecfe
Implements the Reply All Regrets™ frontend design: retro office aesthetic with manila/ink/stamp-red/olive palette, Fraunces + JetBrains Mono + Inter typography. Includes homepage, category, product detail, blog, about, cart templates with WooCommerce integration and interactive JS (filter, sort, gallery). Co-Authored-By: Paperclip <noreply@paperclip.ing>
350 lines
18 KiB
PHP
350 lines
18 KiB
PHP
<?php
|
|
/**
|
|
* Homepage / Front page
|
|
* Sections: Hero · Categories · Featured Products · Designs · Quote · Blog · Footer
|
|
*/
|
|
get_header();
|
|
|
|
// Fetch featured/bestselling products
|
|
$featured_products = wc_get_products([
|
|
'limit' => 6,
|
|
'status' => 'publish',
|
|
'orderby' => 'popularity',
|
|
'order' => 'DESC',
|
|
]);
|
|
|
|
// Fetch product categories
|
|
$categories = get_terms([
|
|
'taxonomy' => 'product_cat',
|
|
'hide_empty' => true,
|
|
'parent' => 0,
|
|
'number' => 4,
|
|
'exclude' => [get_option('default_product_cat')],
|
|
]);
|
|
|
|
// Fetch recent blog posts
|
|
$blog_posts = get_posts([
|
|
'numberposts' => 3,
|
|
'post_status' => 'publish',
|
|
'post_type' => 'post',
|
|
]);
|
|
|
|
// Shop URL
|
|
$shop_url = get_permalink(wc_get_page_id('shop'));
|
|
?>
|
|
|
|
<!-- ═══ HERO ═══════════════════════════════════════════════════════════════ -->
|
|
<section class="rar-hero">
|
|
<div class="rar-hero__grid">
|
|
<div>
|
|
<div class="rar-form-tag" style="margin-bottom:22px;">FORM 01 · NEW ARRIVALS · WEEK <?php echo date('W'); ?></div>
|
|
<h1>
|
|
Office<br>
|
|
supplies for<br>
|
|
<em class="rar-hero__em">people who hate</em><br>
|
|
the office.
|
|
</h1>
|
|
<p class="rar-hero__sub">
|
|
Mugs, canvases, planners, and apparel for the chronically CC'd. Each item
|
|
is a quiet rebellion you can drink coffee out of. Synergize responsibly.
|
|
</p>
|
|
<div class="rar-hero__cta">
|
|
<a href="<?php echo esc_url($shop_url); ?>" class="rar-btn rar-btn--stamp">
|
|
Shop the catalog
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
<a href="<?php echo esc_url(home_url('/blog/')); ?>" class="rar-btn rar-btn--ghost">Read the memo</a>
|
|
<span class="rar-hero__meta"><?php echo wp_count_posts('product')->publish; ?> items · ships in 3-5 biz days</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rar-hero__image">
|
|
<?php
|
|
// Show the hero product if available
|
|
$hero_products = wc_get_products(['limit' => 1, 'featured' => true, 'status' => 'publish']);
|
|
if (!empty($hero_products)) {
|
|
$hp = $hero_products[0];
|
|
$img_id = $hp->get_image_id();
|
|
if ($img_id) {
|
|
echo wp_get_attachment_image($img_id, 'rar-hero', false, ['style' => 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;']);
|
|
}
|
|
}
|
|
?>
|
|
<div class="rar-hero__image-label">FIG. 1 — HERO PRODUCT · 11OZ CERAMIC</div>
|
|
<div class="rar-hero__stamp"><span class="rar-stamp">Best Seller</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics row -->
|
|
<div class="rar-metrics">
|
|
<?php
|
|
$metrics = [
|
|
['142,038', 'Reply-Alls regretted'],
|
|
['41 states', 'Currently shipping'],
|
|
['4.8 ★', 'Avg. on Trustpilot'],
|
|
['0', 'Calls returned'],
|
|
];
|
|
foreach ($metrics as [$num, $label]) {
|
|
echo '<div class="rar-metrics__item">';
|
|
echo '<div class="rar-metrics__num rar-serif">' . esc_html($num) . '</div>';
|
|
echo '<div class="rar-metrics__label">' . esc_html($label) . '</div>';
|
|
echo '</div>';
|
|
}
|
|
?>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ CATEGORIES ══════════════════════════════════════════════════════════ -->
|
|
<section class="rar-cats">
|
|
<?php rar_section_head('FORM 02 · DEPARTMENTS', 'Shop by category', 'FILED QUARTERLY<br/>SEE INDEX P. 4'); ?>
|
|
<div class="rar-cats__grid">
|
|
<?php
|
|
$cat_meta = [
|
|
'mugs' => ['DEPT. 01', 'For passive aggression at room temp.'],
|
|
'canvas' => ['DEPT. 02', 'Wall art for the soul-tired.'],
|
|
'planners' => ['DEPT. 03', 'Productivity, with a wink.'],
|
|
'apparel' => ['DEPT. 04', 'Casual Friday, but make it bitter.'],
|
|
];
|
|
|
|
if (!empty($categories)) {
|
|
foreach ($categories as $i => $cat) {
|
|
$slug = $cat->slug;
|
|
$meta = $cat_meta[$slug] ?? ['DEPT. 0' . ($i + 1), $cat->description ?: 'Office essentials.'];
|
|
$url = get_term_link($cat);
|
|
?>
|
|
<a href="<?php echo esc_url($url); ?>" class="rar-cat-card">
|
|
<div class="rar-cat-card__header">
|
|
<span class="rar-cat-card__sku"><?php echo esc_html($meta[0]); ?></span>
|
|
<span class="rar-cat-card__count"><?php echo esc_html($cat->count); ?> items</span>
|
|
</div>
|
|
<div class="rar-cat-card__name"><?php echo esc_html($cat->name); ?></div>
|
|
<div class="rar-cat-card__desc"><?php echo esc_html($meta[1]); ?></div>
|
|
<span class="rar-cat-card__browse">
|
|
Browse
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
|
|
</span>
|
|
</a>
|
|
<?php
|
|
}
|
|
} else {
|
|
// Fallback static categories
|
|
$static_cats = [
|
|
['Mugs', 'DEPT. 01', 47, 'For passive aggression at room temp.', '/product-category/mugs/'],
|
|
['Canvas', 'DEPT. 02', 18, 'Wall art for the soul-tired.', '/product-category/canvas/'],
|
|
['Planners', 'DEPT. 03', 12, 'Productivity, with a wink.', '/product-category/planners/'],
|
|
['Apparel', 'DEPT. 04', 24, 'Casual Friday, but make it bitter.', '/product-category/apparel/'],
|
|
];
|
|
foreach ($static_cats as [$name, $sku, $count, $desc, $path]) {
|
|
?>
|
|
<a href="<?php echo esc_url(home_url($path)); ?>" class="rar-cat-card">
|
|
<div class="rar-cat-card__header">
|
|
<span class="rar-cat-card__sku"><?php echo esc_html($sku); ?></span>
|
|
<span class="rar-cat-card__count"><?php echo esc_html($count); ?> items</span>
|
|
</div>
|
|
<div class="rar-cat-card__name"><?php echo esc_html($name); ?></div>
|
|
<div class="rar-cat-card__desc"><?php echo esc_html($desc); ?></div>
|
|
<span class="rar-cat-card__browse">Browse →</span>
|
|
</a>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ FEATURED PRODUCTS ═══════════════════════════════════════════════════ -->
|
|
<section class="rar-products">
|
|
<?php rar_section_head('FORM 03 · FEATURED INVENTORY', 'The bestsellers.', 'UPDATED ' . strtoupper(date('m.d.Y')) . '<br/>SUBJECT TO CHANGE'); ?>
|
|
<div class="rar-products__grid">
|
|
<?php if (!empty($featured_products)) : ?>
|
|
<?php foreach ($featured_products as $product) : ?>
|
|
<?php
|
|
$img_id = $product->get_image_id();
|
|
$img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : '';
|
|
$sku = $product->get_sku() ?: 'SKU-' . $product->get_id();
|
|
$cat_terms = get_the_terms($product->get_id(), 'product_cat');
|
|
$cat_name = $cat_terms ? $cat_terms[0]->name : 'Product';
|
|
$price = $product->get_price_html();
|
|
$url = get_permalink($product->get_id());
|
|
?>
|
|
<a href="<?php echo esc_url($url); ?>" class="rar-card">
|
|
<div class="rar-card__media">
|
|
<div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
|
|
<?php if ($img_url) : ?>
|
|
<img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" />
|
|
<?php else : ?>
|
|
<div class="rar-placeholder__label"><?php echo esc_html(strtoupper($cat_name)); ?></div>
|
|
<?php endif; ?>
|
|
<?php if ($product->is_featured()) : ?>
|
|
<div class="rar-card__badge">Featured</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="rar-card__body">
|
|
<div class="rar-card__cat"><?php echo esc_html($cat_name); ?></div>
|
|
<div class="rar-card__title"><?php echo esc_html($product->get_name()); ?></div>
|
|
<div class="rar-card__row">
|
|
<span class="rar-card__price"><?php echo wp_kses_post($price); ?></span>
|
|
<span style="color:var(--ink-muted);display:inline-flex;align-items:center;gap:4px;">
|
|
View ·
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
<?php else : ?>
|
|
<!-- Placeholder cards -->
|
|
<?php
|
|
$placeholders = [
|
|
['001-A', 'Drinkware', 'Per My Last Email', '$24'],
|
|
['012-C', 'Wall Decor', 'Sent From My Deathbed', '$58'],
|
|
['034-B', 'Stationery', "The Quiet Quitter's Planner", '$32'],
|
|
['007-D', 'Drinkware', 'Looping In For Visibility', '$24'],
|
|
['021-A', 'Apparel', 'OOO Forever Tee', '$36'],
|
|
['045-F', 'Stickers', 'Circle-Back Sticker Pack', '$8'],
|
|
];
|
|
foreach ($placeholders as [$sku, $cat, $title, $price]) {
|
|
?>
|
|
<a href="<?php echo esc_url($shop_url); ?>" class="rar-card">
|
|
<div class="rar-card__media">
|
|
<div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
|
|
<div class="rar-placeholder__label"><?php echo esc_html(strtoupper($cat)); ?></div>
|
|
</div>
|
|
<div class="rar-card__body">
|
|
<div class="rar-card__cat"><?php echo esc_html($cat); ?></div>
|
|
<div class="rar-card__title"><?php echo esc_html($title); ?></div>
|
|
<div class="rar-card__row">
|
|
<span class="rar-card__price"><?php echo esc_html($price); ?></span>
|
|
<span style="color:var(--ink-muted);">View →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php
|
|
}
|
|
?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ SHOP BY DESIGN ═══════════════════════════════════════════════════════ -->
|
|
<section class="rar-designs">
|
|
<?php rar_section_head('FORM 04 · SHOP BY DESIGN', 'One slogan, many surfaces.', '9 DESIGNS · 47 SKUS<br/>SEE FULL CATALOG →'); ?>
|
|
<p style="font-size:14px;line-height:1.6;color:var(--ink-muted);max-width:560px;margin:-16px 0 32px;">
|
|
Every design lives across multiple products. Pick a phrase you'd like to commit to
|
|
and we'll show you every form it ships in — mug, canvas, tee, sticker, the works.
|
|
</p>
|
|
<div class="rar-designs__grid">
|
|
<?php
|
|
$designs = [
|
|
['Per My Last Email', 'Passive Aggressive', 'paper', ['Per my', 'last email'], 8],
|
|
['Sent from my Deathbed','Email Signatures', 'ink', ['Sent from', 'my deathbed'], 6],
|
|
['The Quiet Quitter', 'Lifestyle', 'olive', ['Quietly', 'quitting'], 5],
|
|
["OOO Forever", 'Vacation Mode', 'paper', ['OOO', 'forever'], 7],
|
|
["Let's Circle Back", 'Meeting Recovery', 'ink', ['Circle', 'back ↻'], 4],
|
|
['My Plate Is Full', 'Capacity Issues', 'paper', ['My plate', 'is full.'], 5],
|
|
];
|
|
$color_map = [
|
|
'paper' => ['bg' => '#FBF8EF', 'fg' => '#1A1A1A'],
|
|
'ink' => ['bg' => '#1A1A1A', 'fg' => '#F5F1E8'],
|
|
'olive' => ['bg' => '#7B8C5A', 'fg' => '#F5F1E8'],
|
|
];
|
|
foreach ($designs as [$title, $tag, $color, $lines, $count]) {
|
|
$cm = $color_map[$color];
|
|
$designs_url = home_url('/designs/');
|
|
?>
|
|
<a href="<?php echo esc_url($designs_url); ?>" class="rar-card">
|
|
<div class="rar-card__media" style="aspect-ratio:5/3;">
|
|
<div style="width:82%;aspect-ratio:4/2.4;background:<?php echo esc_attr($cm['bg']); ?>;border:1.5px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:<?php echo esc_attr($cm['fg']); ?>;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;line-height:1.15;text-align:center;padding:10px;">
|
|
<?php foreach ($lines as $line) echo '<div>' . esc_html($line) . '</div>'; ?>
|
|
</div>
|
|
</div>
|
|
<div class="rar-card__body">
|
|
<div class="rar-card__cat"><?php echo esc_html($tag); ?></div>
|
|
<div class="rar-card__title"><?php echo esc_html($title); ?></div>
|
|
<div class="rar-card__row">
|
|
<span class="rar-card__price"><?php echo esc_html($count); ?> products</span>
|
|
<span style="color:var(--ink-muted);display:inline-flex;align-items:center;gap:4px;">
|
|
Shop design ·
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"></path></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php
|
|
}
|
|
?>
|
|
</div>
|
|
<div style="display:flex;justify-content:center;margin-top:32px;">
|
|
<a href="<?php echo esc_url(home_url('/designs/')); ?>" class="rar-btn rar-btn--ghost">Browse all designs →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ TESTIMONIAL / EDITORIAL ═════════════════════════════════════════════ -->
|
|
<section class="rar-editorial">
|
|
<div class="rar-editorial__memo">MEMO 04 · CC: THE DESK-BOUND</div>
|
|
<div class="rar-editorial__inner">
|
|
<div class="rar-editorial__as-seen">❝ AS SEEN IN ❞</div>
|
|
<blockquote class="rar-editorial__quote">
|
|
"Finally, a brand that gets that the meeting could have been an email,
|
|
and the email could have been silence."
|
|
</blockquote>
|
|
<div class="rar-editorial__attr">— The Cubicle Quarterly · <?php echo date('M Y'); ?></div>
|
|
<div class="rar-editorial__press">
|
|
<span>FAST CO.</span>
|
|
<span>OFFICE LIFE MAG</span>
|
|
<span>THE PROCRASTINATOR</span>
|
|
<span>HR WEEKLY (REGRETTABLY)</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ FROM THE BLOG ════════════════════════════════════════════════════════ -->
|
|
<?php if (!empty($blog_posts)) : ?>
|
|
<section class="rar-blog-section">
|
|
<?php rar_section_head('FORM 05 · FROM THE MEMO', 'Recent dispatches.', 'WEEKLY ISSUE<br/>VOL. 4 · NO. ' . date('W')); ?>
|
|
<div class="rar-blog-grid">
|
|
<?php foreach ($blog_posts as $post) :
|
|
setup_postdata($post);
|
|
$thumb_url = get_the_post_thumbnail_url($post->ID, 'rar-blog-thumb');
|
|
$cats = get_the_category($post->ID);
|
|
$cat_name = $cats ? $cats[0]->name : 'Field Notes';
|
|
$read_time = max(1, ceil(str_word_count(strip_tags(get_post_field('post_content', $post->ID))) / 200));
|
|
?>
|
|
<a href="<?php the_permalink($post->ID); ?>" class="rar-blog-card">
|
|
<div class="rar-blog-card__thumb">
|
|
<?php if ($thumb_url) : ?>
|
|
<img src="<?php echo esc_url($thumb_url); ?>" alt="<?php echo esc_attr($post->post_title); ?>" />
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="rar-blog-card__tag"><?php echo esc_html(strtoupper($cat_name)); ?> · <?php echo strtoupper(date('M j', strtotime($post->post_date))); ?> · <?php echo esc_html($read_time); ?> MIN</div>
|
|
<div class="rar-blog-card__title"><?php echo esc_html($post->post_title); ?></div>
|
|
</a>
|
|
<?php endforeach; wp_reset_postdata(); ?>
|
|
</div>
|
|
</section>
|
|
<?php else : ?>
|
|
<section class="rar-blog-section">
|
|
<?php rar_section_head('FORM 05 · FROM THE MEMO', 'Recent dispatches.', 'WEEKLY ISSUE<br/>VOL. 4 · NO. 17'); ?>
|
|
<div class="rar-blog-grid">
|
|
<?php
|
|
$static_posts = [
|
|
['Field Notes', 'A taxonomy of "circle back" — when it means goodbye and when it means war.', 'APR 28', '6'],
|
|
['Investigation', 'We surveyed 400 office workers on which mug they hate the most.', 'APR 22', '11'],
|
|
['Op-Ed', 'In defense of the calendar block titled "Focus" that is just a nap.', 'APR 14', '4'],
|
|
];
|
|
foreach ($static_posts as [$tag, $title, $date, $read]) {
|
|
?>
|
|
<a href="<?php echo esc_url(home_url('/blog/')); ?>" class="rar-blog-card">
|
|
<div class="rar-blog-card__thumb"></div>
|
|
<div class="rar-blog-card__tag"><?php echo esc_html(strtoupper($tag)); ?> · <?php echo esc_html($date); ?> · <?php echo esc_html($read); ?> MIN</div>
|
|
<div class="rar-blog-card__title"><?php echo esc_html($title); ?></div>
|
|
</a>
|
|
<?php
|
|
}
|
|
?>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<?php get_footer(); ?>
|