Initial commit: Fat Kiss site — Hugo + Decap CMS

layouts/partials/contact-form.html

@@ -0,0 +1,52 @@
+{{/* Contact form partial */}}
+<form class="contact-form" id="contactForm" method="POST" action="/api/contact">
+  <div class="form-honeypot" aria-hidden="true">
+    <label for="website">Leave empty</label>
+    <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
+  </div>
+
+  <div class="form-group">
+    <label for="name" class="form-label">Name</label>
+    <input type="text" id="name" name="name" class="form-input" required maxlength="100" autocomplete="name">
+  </div>
+
+  <div class="form-group">
+    <label for="email" class="form-label">Email</label>
+    <input type="email" id="email" name="email" class="form-input" required maxlength="200" autocomplete="email">
+  </div>
+
+  <div class="form-group">
+    <label for="category" class="form-label">What's this about?</label>
+    <select id="category" name="category" class="form-select" required>
+      <option value="">Select a topic…</option>
+      <option value="product_question">Product question</option>
+      <option value="order_inquiry">Order inquiry</option>
+      <option value="wholesale">Wholesale</option>
+      <option value="collaboration_press">Collaboration / Press</option>
+      <option value="general">General</option>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="product_interest" class="form-label">Product interest (optional)</label>
+    <select id="product_interest" name="product_interest" class="form-select">
+      <option value="">Any / all</option>
+      <option value="face_balm">Face Balm</option>
+      <option value="body_balm">Body Balm</option>
+      <option value="lip_balm">Lip Balm</option>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <label for="message" class="form-label">Message</label>
+    <textarea id="message" name="message" class="form-textarea" required maxlength="5000" placeholder="Tell Amber what you're looking for…"></textarea>
+  </div>
+
+  <div class="cf-turnstile" data-sitekey="TURNSTILE_SITE_KEY" style="margin-bottom: var(--fk-space-lg);"></div>
+
+  <div id="formMessage"></div>
+
+  <button type="submit" class="btn btn--primary btn--lg" id="submitBtn">
+    Send Message
+  </button>
+</form>

layouts/partials/footer.html

@@ -0,0 +1,28 @@
+<footer class="site-footer">
+  <div class="container">
+    <div class="site-footer__grid">
+      <div>
+        <div class="site-footer__brand">Fat Kiss</div>
+        <p class="site-footer__slogan">Everybody Wants One.</p>
+        <p class="site-footer__copy">Natural ritual skincare. Handcrafted with care.</p>
+      </div>
+      <div>
+        <h4>Shop</h4>
+        <a href="/products/">All Products</a>
+        <a href="/products/face-balm/">Face Balm</a>
+        <a href="/products/body-balm/">Body Balm</a>
+        <a href="/products/lip-balm/">Lip Balm</a>
+      </div>
+      <div>
+        <h4>Connect</h4>
+        <a href="/about/">About</a>
+        <a href="/journal/">Journal</a>
+        <a href="/contact/">Contact</a>
+      </div>
+    </div>
+    <div class="site-footer__bottom">
+      <span>&copy; {{ now.Format "2006" }} Fat Kiss. All rights reserved.</span>
+      <span>Made with care on Kauaʻi</span>
+    </div>
+  </div>
+</footer>

layouts/partials/head.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{ if .Title }}{{ .Title }} — {{ .Site.Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
+{{ $css := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
+<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=Bebas+Neue&family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,400;1,600&display=swap" rel="stylesheet">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+{{ with .Site.Params.favicon }}<link rel="icon" href="{{ . }}" type="image/svg+xml">{{ end }}

layouts/partials/header.html

@@ -0,0 +1,17 @@
+<header class="site-header">
+  <div class="container site-header__inner">
+    <a href="/" class="site-header__logo" aria-label="Fat Kiss home">
+      {{ partial "svg-logo.html" . }}
+      Fat Kiss
+    </a>
+    <button class="nav-toggle" aria-label="Toggle navigation" id="navToggle">
+      <span></span><span></span><span></span>
+    </button>
+    <nav class="site-header__nav" id="mainNav">
+      {{ $current := . }}
+      {{ range .Site.Menus.main }}
+        <a href="{{ .URL }}" {{ if $current.IsMenuCurrent "main" . }}class="active"{{ end }}>{{ .Name }}</a>
+      {{ end }}
+    </nav>
+  </div>
+</header>

layouts/partials/product-card.html

@@ -0,0 +1,28 @@
+{{/* Product card partial */}}
+<a href="{{ .RelPermalink }}" class="product-card">
+  <div class="product-card__image">
+    {{ with .Params.hero_image }}
+      <img src="{{ . }}" alt="{{ $.Title }}" loading="lazy">
+    {{ else }}
+      <div class="product-card__image-placeholder">{{ .Title }}</div>
+    {{ end }}
+  </div>
+  <div class="product-card__body">
+    <div class="product-card__type">{{ .Params.product_type | default "balm" | humanize }}</div>
+    <h3 class="product-card__title">{{ .Title }}</h3>
+    <p class="product-card__summary">{{ .Params.short_summary | default .Summary }}</p>
+    {{ with .Params.benefit_chips }}
+    <div class="product-card__chips">
+      {{ range . }}
+        <span class="product-card__chip">{{ . }}</span>
+      {{ end }}
+    </div>
+    {{ end }}
+    <div class="product-card__footer">
+      <span class="product-card__status product-card__status--{{ .Params.status | default "inquiry" }}">
+        {{ if eq .Params.status "coming_soon" }}Coming Soon{{ else if eq .Params.status "active" }}Available{{ else }}Inquire{{ end }}
+      </span>
+      <span class="btn btn--ghost">Learn more →</span>
+    </div>
+  </div>
+</a>

layouts/partials/seo.html

@@ -0,0 +1,12 @@
+{{/* SEO partial */}}
+<meta name="description" content="{{ with .Params.seo_description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
+<link rel="canonical" href="{{ .Permalink }}">
+<meta property="og:title" content="{{ if .Title }}{{ .Title }} — {{ .Site.Title }}{{ else }}{{ .Site.Title }}{{ end }}">
+<meta property="og:description" content="{{ with .Params.seo_description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
+<meta property="og:image" content="{{ with .Params.og_image }}{{ . | absURL }}{{ else }}{{ .Site.Params.ogImage | absURL }}{{ end }}">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ if .Title }}{{ .Title }} — {{ .Site.Title }}{{ else }}{{ .Site.Title }}{{ end }}">
+<meta name="twitter:description" content="{{ with .Params.seo_description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
+{{ if .Params.noindex }}<meta name="robots" content="noindex, nofollow">{{ end }}

layouts/partials/svg-logo.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <circle cx="16" cy="16" r="15" stroke="currentColor" stroke-width="2"/>
+  <path d="M10 18c0-2 1.5-4 3-5.5s3-2.5 4.5-2.5c1 0 2 .5 2.5 1.5.5.8.5 1.8 0 2.6-.6 1-1.8 1.6-3 1.6-1 0-2-.5-2.5-1.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  <path d="M10 18c0 1.5 1 3 2.5 3.5s3.5.5 5-1c1-1 1.5-2.5 1.5-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+</svg>