Landing Page
<!-- ONEAURA LANDING PAGE - Paste this entire code into Shopify Page HTML editor -->
<style>
/* Hide default page title and adjust container */
.page-header, .template-page .page-title { display: none !important; }
.page-content, .main-content, .template-page .page-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.shopify-section-template--page { padding: 0 !important; }
/* Base Styles */
.oa-landing * { box-sizing: border-box; margin: 0; padding: 0; }
.oa-landing { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #0a0a0a; line-height: 1.5; }
.oa-landing img { max-width: 100%; height: auto; }
.oa-landing a { text-decoration: none; color: inherit; }
/* Navigation */
.oa-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #e5e5e5; background: #fff; position: sticky; top: 0; z-index: 100; }
.oa-nav-logo { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.oa-nav-links { display: flex; gap: 32px; }
.oa-nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; }
.oa-nav-links a:hover { opacity: 0.7; }
.oa-nav-icons { display: flex; gap: 16px; }
.oa-nav-icons a { font-size: 18px; }
@media (max-width: 768px) { .oa-nav-links { display: none; } }
/* Hero */
.oa-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 85vh; }
.oa-hero-content { display: flex; flex-direction: column; justify-content: center; padding: 64px; }
.oa-hero-badge { display: inline-block; background: #0a0a0a; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; padding: 8px 16px; margin-bottom: 32px; width: fit-content; }
.oa-hero-title { font-size: clamp(48px, 8vw, 80px); font-weight: 700; line-height: 0.95; letter-spacing: -2px; margin-bottom: 24px; }
.oa-hero-subtitle { font-size: 18px; color: #525252; margin-bottom: 40px; max-width: 400px; }
.oa-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.oa-btn { padding: 16px 32px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; border: none; cursor: pointer; transition: all 0.2s; }
.oa-btn-primary { background: #0a0a0a; color: #fff; }
.oa-btn-primary:hover { background: #262626; }
.oa-btn-secondary { background: transparent; border: 1px solid #0a0a0a; color: #0a0a0a; }
.oa-btn-secondary:hover { background: #f5f5f5; }
.oa-hero-image { background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oa-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.oa-hero-placeholder { color: #a3a3a3; font-size: 14px; }
@media (max-width: 900px) {
.oa-hero { grid-template-columns: 1fr; }
.oa-hero-content { padding: 48px 24px; }
.oa-hero-image { min-height: 400px; }
}
/* Ticker */
.oa-ticker { background: #0a0a0a; color: #fff; padding: 14px 0; overflow: hidden; }
.oa-ticker-inner { display: flex; animation: oaTicker 20s linear infinite; white-space: nowrap; }
.oa-ticker-item { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; padding: 0 48px; }
@keyframes oaTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Section Titles */
.oa-section { padding: 80px 24px; }
.oa-section-header { text-align: center; margin-bottom: 48px; }
.oa-section-title { font-size: 36px; font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; }
.oa-section-subtitle { font-size: 16px; color: #525252; }
/* Colour Pills */
.oa-colours { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 48px; }
.oa-colour-pill { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid #e5e5e5; border-radius: 100px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; background: #fff; }
.oa-colour-pill:hover { border-color: #0a0a0a; }
.oa-colour-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
/* Product Grid */
.oa-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.oa-product { text-align: center; }
.oa-product-image { aspect-ratio: 1; background: #f5f5f5; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.oa-product-image img { width: 100%; height: 100%; object-fit: cover; }
.oa-product-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.oa-product-price { font-size: 14px; color: #525252; }
@media (max-width: 900px) { .oa-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .oa-products { grid-template-columns: 1fr; max-width: 300px; } }
/* Statement */
.oa-statement { background: #0a0a0a; color: #fff; padding: 80px 24px; text-align: center; }
.oa-statement-text { font-size: clamp(24px, 4vw, 36px); font-weight: 600; max-width: 700px; margin: 0 auto; line-height: 1.4; }
/* Hooks */
.oa-hooks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.oa-hook { background: #fafafa; padding: 32px; }
.oa-hook-number { font-size: 48px; font-weight: 700; color: #e5e5e5; margin-bottom: 16px; }
.oa-hook-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.oa-hook-text { font-size: 14px; color: #525252; line-height: 1.6; }
@media (max-width: 900px) { .oa-hooks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .oa-hooks { grid-template-columns: 1fr; } }
/* Drop Section */
.oa-drop { background: #fafafa; }
.oa-drop-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 800px; margin: 0 auto; }
.oa-drop-swatch { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; }
.oa-drop-swatch:hover { transform: scale(1.1); border-color: #0a0a0a; }
/* Features */
.oa-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; text-align: center; }
.oa-feature-icon { font-size: 32px; margin-bottom: 16px; }
.oa-feature-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.oa-feature-text { font-size: 13px; color: #525252; }
@media (max-width: 768px) { .oa-features { grid-template-columns: repeat(2, 1fr); } }
/* Stats */
.oa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; text-align: center; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 48px 24px; }
.oa-stat-number { font-size: 36px; font-weight: 700; margin-bottom: 8px; }
.oa-stat-label { font-size: 13px; color: #525252; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 600px) { .oa-stats { grid-template-columns: repeat(2, 1fr); } }
/* Footer */
.oa-footer { background: #0a0a0a; color: #fff; padding: 64px 24px 32px; }
.oa-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 48px; }
.oa-footer-logo { font-size: 24px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px; }
.oa-footer-tagline { font-size: 14px; color: #a3a3a3; margin-bottom: 24px; }
.oa-footer-social { display: flex; gap: 16px; }
.oa-footer-social a { color: #fff; font-size: 18px; }
.oa-footer-social a:hover { opacity: 0.7; }
.oa-footer-heading { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.oa-footer-links { display: flex; flex-direction: column; gap: 12px; }
.oa-footer-links a { font-size: 14px; color: #a3a3a3; }
.oa-footer-links a:hover { color: #fff; }
.oa-footer-bottom { text-align: center; padding-top: 32px; border-top: 1px solid #262626; font-size: 13px; color: #525252; }
@media (max-width: 768px) { .oa-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .oa-footer-grid { grid-template-columns: 1fr; } }
</style>
<div class="oa-landing">
<!-- Navigation -->
<nav class="oa-nav">
<div class="oa-nav-logo">ONEAURA</div>
<div class="oa-nav-links">
<a href="/collections/all">SHOP ALL</a>
<a href="/collections/hoodies">HOODIES</a>
<a href="/pages/about">ABOUT</a>
<a href="/pages/contact">CONTACT</a>
</div>
<div class="oa-nav-icons">
<a href="/search">🔍</a>
<a href="/cart">🛒</a>
</div>
</nav>
<!-- Hero Section -->
<section class="oa-hero">
<div class="oa-hero-content">
<span class="oa-hero-badge">CREATORS CLUB</span>
<h1 class="oa-hero-title">Not for everyone.</h1>
<p class="oa-hero-subtitle">Built for the ones building something. 19 colourways. One identity. Worldwide shipping.</p>
<div class="oa-hero-buttons">
<a href="/collections/hoodies" class="oa-btn oa-btn-primary">SHOP COLLECTION</a>
<a href="/pages/about" class="oa-btn oa-btn-secondary">OUR STORY</a>
</div>
</div>
<div class="oa-hero-image">
<!-- Replace src with your hero image URL from Shopify Files -->
<img src="https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=800&q=80" alt="Oneaura Hoodie">
</div>
</section>
<!-- Ticker -->
<div class="oa-ticker">
<div class="oa-ticker-inner">
<span class="oa-ticker-item">★ FREE SHIPPING OVER $150</span>
<span class="oa-ticker-item">★ 400GSM PREMIUM HEAVYWEIGHT</span>
<span class="oa-ticker-item">★ 19 COLOURWAYS</span>
<span class="oa-ticker-item">★ BRISBANE BASED</span>
<span class="oa-ticker-item">★ FREE SHIPPING OVER $150</span>
<span class="oa-ticker-item">★ 400GSM PREMIUM HEAVYWEIGHT</span>
<span class="oa-ticker-item">★ 19 COLOURWAYS</span>
<span class="oa-ticker-item">★ BRISBANE BASED</span>
</div>
</div>
<!-- Collection Section -->
<section class="oa-section">
<div class="oa-section-header">
<h2 class="oa-section-title">The Collection</h2>
<p class="oa-section-subtitle">Premium 400GSM heavyweight fleece. Made for creators.</p>
</div>
<!-- Colour Pills -->
<div class="oa-colours">
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#0a0a0a"></span>Midnight</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#ffffff;border-color:#d4d4d4"></span>Cloud</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#78716c"></span>Slate</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#1e3a5f"></span>Ocean</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#2d4a3e"></span>Forest</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#8b2635"></span>Crimson</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#f5f5dc"></span>Sand</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#e8d5b7"></span>Oat</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#c4b7a6"></span>Mushroom</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#4a3728"></span>Espresso</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#b8860b"></span>Mustard</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#d2691e"></span>Rust</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#e6c8c8"></span>Blush</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#c8a2c8"></span>Lilac</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#87ceeb"></span>Sky</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#98d8c8"></span>Sage</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#262626"></span>Charcoal</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#d4d4d4"></span>Ash</span>
<span class="oa-colour-pill"><span class="oa-colour-swatch" style="background:#1a1a2e"></span>Navy</span>
</div>
<!-- Products Grid - Replace image URLs with your Shopify product images -->
<div class="oa-products">
<a href="/products/hoodie-midnight" class="oa-product">
<div class="oa-product-image">
<img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?w=400&q=80" alt="Midnight Hoodie">
</div>
<div class="oa-product-title">Creators Hoodie — Midnight</div>
<div class="oa-product-price">$149.00 AUD</div>
</a>
<a href="/products/hoodie-cloud" class="oa-product">
<div class="oa-product-image">
<img src="https://images.unsplash.com/photo-1618354691373-d851c5c3a990?w=400&q=80" alt="Cloud Hoodie">
</div>
<div class="oa-product-title">Creators Hoodie — Cloud</div>
<div class="oa-product-price">$149.00 AUD</div>
</a>
<a href="/products/hoodie-slate" class="oa-product">
<div class="oa-product-image">
<img src="https://images.unsplash.com/photo-1578768079052-aa76e52ff62e?w=400&q=80" alt="Slate Hoodie">
</div>
<div class="oa-product-title">Creators Hoodie — Slate</div>
<div class="oa-product-price">$149.00 AUD</div>
</a>
<a href="/products/hoodie-ocean" class="oa-product">
<div class="oa-product-image">
<img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=400&q=80" alt="Ocean Hoodie">
</div>
<div class="oa-product-title">Creators Hoodie — Ocean</div>
<div class="oa-product-price">$149.00 AUD</div>
</a>
</div>
</section>
<!-- Statement -->
<section class="oa-statement">
<p class="oa-statement-text">"We don't dress trends. We dress the ones brave enough to start them."</p>
</section>
<!-- Hooks Section -->
<section class="oa-section">
<div class="oa-hooks">
<div class="oa-hook">
<div class="oa-hook-number">01</div>
<h3 class="oa-hook-title">Built Different</h3>
<p class="oa-hook-text">400GSM heavyweight fleece. The kind of weight that makes you feel like you're wearing armour for your ambition.</p>
</div>
<div class="oa-hook">
<div class="oa-hook-number">02</div>
<h3 class="oa-hook-title">For Creators Only</h3>
<p class="oa-hook-text">Not for everyone. For the ones building, creating, shipping. The ones who understand that great work requires great gear.</p>
</div>
<div class="oa-hook">
<div class="oa-hook-number">03</div>
<h3 class="oa-hook-title">19 Ways to Stand Out</h3>
<p class="oa-hook-text">From Midnight to Sage. Every colourway is a statement. Pick the one that matches your energy.</p>
</div>
<div class="oa-hook">
<div class="oa-hook-number">04</div>
<h3 class="oa-hook-title">Brisbane to the World</h3>
<p class="oa-hook-text">Born in Brisbane, shipped worldwide. Join creators across the globe who've made ONEAURA their uniform.</p>
</div>
</div>
</section>
<!-- Drop Section -->
<section class="oa-section oa-drop">
<div class="oa-section-header">
<h2 class="oa-section-title">The Drop</h2>
<p class="oa-section-subtitle">19 colourways. One identity. Pick yours.</p>
</div>
<div class="oa-drop-grid">
<span class="oa-drop-swatch" style="background:#0a0a0a" title="Midnight"></span>
<span class="oa-drop-swatch" style="background:#ffffff;border:1px solid #d4d4d4" title="Cloud"></span>
<span class="oa-drop-swatch" style="background:#78716c" title="Slate"></span>
<span class="oa-drop-swatch" style="background:#1e3a5f" title="Ocean"></span>
<span class="oa-drop-swatch" style="background:#2d4a3e" title="Forest"></span>
<span class="oa-drop-swatch" style="background:#8b2635" title="Crimson"></span>
<span class="oa-drop-swatch" style="background:#f5f5dc" title="Sand"></span>
<span class="oa-drop-swatch" style="background:#e8d5b7" title="Oat"></span>
<span class="oa-drop-swatch" style="background:#c4b7a6" title="Mushroom"></span>
<span class="oa-drop-swatch" style="background:#4a3728" title="Espresso"></span>
<span class="oa-drop-swatch" style="background:#b8860b" title="Mustard"></span>
<span class="oa-drop-swatch" style="background:#d2691e" title="Rust"></span>
<span class="oa-drop-swatch" style="background:#e6c8c8" title="Blush"></span>
<span class="oa-drop-swatch" style="background:#c8a2c8" title="Lilac"></span>
<span class="oa-drop-swatch" style="background:#87ceeb" title="Sky"></span>
<span class="oa-drop-swatch" style="background:#98d8c8" title="Sage"></span>
<span class="oa-drop-swatch" style="background:#262626" title="Charcoal"></span>
<span class="oa-drop-swatch" style="background:#d4d4d4" title="Ash"></span>
<span class="oa-drop-swatch" style="background:#1a1a2e" title="Navy"></span>
</div>
</section>
<!-- Features -->
<section class="oa-section">
<div class="oa-features">
<div class="oa-feature">
<div class="oa-feature-icon">⚖️</div>
<h3 class="oa-feature-title">400GSM Weight</h3>
<p class="oa-feature-text">Premium heavyweight fleece that lasts</p>
</div>
<div class="oa-feature">
<div class="oa-feature-icon">🌍</div>
<h3 class="oa-feature-title">Worldwide Shipping</h3>
<p class="oa-feature-text">From Brisbane to your door, anywhere</p>
</div>
<div class="oa-feature">
<div class="oa-feature-icon">↩️</div>
<h3 class="oa-feature-title">Easy Returns</h3>
<p class="oa-feature-text">30-day hassle-free returns</p>
</div>
<div class="oa-feature">
<div class="oa-feature-icon">✨</div>
<h3 class="oa-feature-title">Premium Quality</h3>
<p class="oa-feature-text">Crafted for creators who demand the best</p>
</div>
</div>
</section>
<!-- Stats -->
<section class="oa-section">
<div class="oa-stats">
<div>
<div class="oa-stat-number">19</div>
<div class="oa-stat-label">Colourways</div>
</div>
<div>
<div class="oa-stat-number">400</div>
<div class="oa-stat-label">GSM Weight</div>
</div>
<div>
<div class="oa-stat-number">50+</div>
<div class="oa-stat-label">Countries</div>
</div>
<div>
<div class="oa-stat-number">10K+</div>
<div class="oa-stat-label">Creators</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="oa-footer">
<div class="oa-footer-grid">
<div>
<div class="oa-footer-logo">ONEAURA</div>
<p class="oa-footer-tagline">Built for the ones building something.</p>
<div class="oa-footer-social">
<a href="https://instagram.com/oneaura" target="_blank">IG</a>
<a href="https://tiktok.com/@oneaura" target="_blank">TT</a>
<a href="https://twitter.com/oneaura" target="_blank">X</a>
</div>
</div>
<div>
<h4 class="oa-footer-heading">Shop</h4>
<div class="oa-footer-links">
<a href="/collections/all">All Products</a>
<a href="/collections/hoodies">Hoodies</a>
<a href="/collections/new">New Arrivals</a>
</div>
</div>
<div>
<h4 class="oa-footer-heading">Help</h4>
<div class="oa-footer-links">
<a href="/pages/contact">Contact</a>
<a href="/pages/shipping">Shipping</a>
<a href="/pages/returns">Returns</a>
<a href="/pages/faq">FAQ</a>
</div>
</div>
<div>
<h4 class="oa-footer-heading">Company</h4>
<div class="oa-footer-links">
<a href="/pages/about">About Us</a>
<a href="/pages/our-story">Our Story</a>
<a href="/pages/privacy">Privacy</a>
<a href="/pages/terms">Terms</a>
</div>
</div>
</div>
<div class="oa-footer-bottom">
© 2024 ONEAURA. All rights reserved. | Brisbane, Australia
</div>
</footer>
</div>