Initial Sunflower Acres Hugo site scaffold

.gitignore

@@ -0,0 +1,2 @@
+public/
+.hugo_build.lock

archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

assets/css/style.css

@@ -0,0 +1,225 @@
+:root {
+  --paper: #EDE7DA;
+  --paper-raised: #F5F0E5;
+  --ink: #2A241D;
+  --ink-soft: #5C5647;
+  --sage: #4E5C40;
+  --sage-soft: #6D7A5C;
+  --clay: #9C5A3C;
+  --line: #D6CCB8;
+  --ok: #4C7A52;
+  --ok-bg: #E3ECDE;
+  --low: #A97423;
+  --low-bg: #F1E6CD;
+  --out: #A24A3E;
+  --out-bg: #F0DFD8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --paper: #1D1B16;
+    --paper-raised: #26241D;
+    --ink: #ECE5D6;
+    --ink-soft: #B7AF9C;
+    --sage: #93AC7E;
+    --sage-soft: #7C9169;
+    --clay: #D08F65;
+    --line: #3B3728;
+    --ok: #8FBB8C;
+    --ok-bg: #263626;
+    --low: #D9A94B;
+    --low-bg: #3A3020;
+    --out: #D98C7E;
+    --out-bg: #3A2620;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: Seravek, "Gill Sans Nova", "Gill Sans", "Segoe UI", system-ui, sans-serif;
+  font-size: 17px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3 {
+  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  font-weight: 500;
+  text-wrap: balance;
+  margin: 0 0 0.6em;
+}
+
+a { color: var(--sage); }
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1.75rem 1.5rem 1rem;
+}
+
+.site-header .brand {
+  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  font-size: 1.3rem;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.site-header nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.site-header nav a {
+  color: var(--ink-soft);
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.site-header nav a:hover { color: var(--sage); }
+
+main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem 4rem;
+}
+
+.site-footer {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 3rem;
+  color: var(--ink-soft);
+  font-size: 0.85rem;
+  border-top: 1px solid var(--line);
+}
+
+/* Home hero */
+.hero {
+  padding: 3rem 0 2.5rem;
+  text-align: center;
+}
+
+.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
+
+.hero p {
+  color: var(--ink-soft);
+  max-width: 42ch;
+  margin: 0 auto 1.5rem;
+}
+
+.hero .cta {
+  display: inline-block;
+  background: var(--sage);
+  color: #fff;
+  padding: 0.7rem 1.4rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+/* Product grid */
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.product-card {
+  background: var(--paper-raised);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.product-card img { width: 100%; display: block; }
+
+.product-card .body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
+
+.product-card h3 { font-size: 1.1rem; margin: 0; }
+
+.product-card p.desc { color: var(--ink-soft); font-size: 0.9rem; margin: 0; flex: 1; }
+
+.product-card .price { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.25rem 0.55rem;
+  border-radius: 100px;
+  align-self: flex-start;
+}
+.status-pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
+.status-pill.available { background: var(--ok-bg); color: var(--ok); }
+.status-pill.low { background: var(--low-bg); color: var(--low); }
+.status-pill.out { background: var(--out-bg); color: var(--out); }
+
+.buy-btn {
+  display: inline-block;
+  text-align: center;
+  padding: 0.55rem 1rem;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.buy-btn.enabled { background: var(--sage); color: #fff; }
+.buy-btn.disabled { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); cursor: default; pointer-events: none; }
+
+.low-note { font-size: 0.8rem; color: var(--low); margin: 0; }
+
+/* Reorder box */
+.reorder-box {
+  margin-top: 2.5rem;
+  padding: 1.5rem;
+  background: var(--paper-raised);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.reorder-box h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
+.reorder-box p { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1rem; }
+.reorder-box form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
+.reorder-box input[type="email"] {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.55rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+.reorder-box button {
+  padding: 0.55rem 1.1rem;
+  border-radius: 4px;
+  border: none;
+  background: var(--clay);
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.reorder-box .demo-note {
+  margin-top: 0.75rem;
+  font-size: 0.78rem;
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+@media (max-width: 620px) {
+  .site-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
+}

content/_index.md

@@ -0,0 +1 @@
+Cold-processed with simple ingredients, cured for six weeks, and packed by hand in small batches. If we're out of something, we'll tell you rather than let you guess.

content/about.md

@@ -0,0 +1,7 @@
+---
+title: "About"
+---
+
+Sunflower Acres is a small soap-making operation. Every bar is cold-processed by hand in small batches, cured for six weeks, and made with simple, recognizable ingredients.
+
+We keep this page as easy to update as the shop itself — nothing here needs a developer to change.

content/shop/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Shop"
+---

data/products.yaml

@@ -0,0 +1,28 @@
+- name: "Lavender Oatmeal Bar"
+  slug: "lavender-oatmeal"
+  description: "Cold-processed with rolled oats and lavender essential oil. Gentle enough for every day."
+  price: "8.00"
+  image: "/images/soaps/lavender-oatmeal.svg"
+  stripe_payment_link: ""
+  status: "available"
+- name: "Clay & Charcoal Mint Bar"
+  slug: "clay-charcoal-mint"
+  description: "French green clay and activated charcoal with peppermint essential oil."
+  price: "9.00"
+  image: "/images/soaps/clay-charcoal-mint.svg"
+  stripe_payment_link: ""
+  status: "low"
+- name: "Oat Milk & Honey Bar"
+  slug: "oat-milk-honey"
+  description: "Oat milk and local honey, unscented and mild."
+  price: "8.00"
+  image: "/images/soaps/oat-milk-honey.svg"
+  stripe_payment_link: ""
+  status: "available"
+- name: "Cedar & Sage Bar"
+  slug: "cedar-sage"
+  description: "A grounding blend of cedarwood and sage, cold-processed with shea butter."
+  price: "9.00"
+  image: "/images/soaps/cedar-sage.svg"
+  stripe_payment_link: ""
+  status: "out"

hugo.toml

@@ -0,0 +1,9 @@
+baseURL = "https://sunfloweracres.reground.org/"
+languageCode = "en-us"
+title = "Sunflower Acres"
+
+[params]
+  tagline = "Small-batch soap, made by hand"
+
+[markup.goldmark.renderer]
+  unsafe = true

layouts/_default/baseof.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ if .IsHome }}{{ .Site.Title }} &mdash; {{ .Site.Params.tagline }}{{ else }}{{ .Title }} &mdash; {{ .Site.Title }}{{ end }}</title>
+  <style>{{ (resources.Get "css/style.css").Content | safeCSS }}</style>
+</head>
+<body>
+  <header class="site-header">
+    <a class="brand" href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
+    <nav>
+      <a href="{{ "/" | relURL }}">Home</a>
+      <a href="{{ "/shop/" | relURL }}">Shop</a>
+      <a href="{{ "/about/" | relURL }}">About</a>
+    </nav>
+  </header>
+
+  <main>
+    {{ block "main" . }}{{ end }}
+  </main>
+
+  <footer class="site-footer">
+    <p>&copy; {{ now.Year }} {{ .Site.Title }}</p>
+  </footer>
+</body>
+</html>

layouts/_default/single.html

@@ -0,0 +1,4 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+{{ .Content }}
+{{ end }}

layouts/index.html

@@ -0,0 +1,7 @@
+{{ define "main" }}
+<section class="hero">
+  <h1>Small-batch soap, made by hand.</h1>
+  <p>{{ .Content }}</p>
+  <a class="cta" href="{{ "/shop/" | relURL }}">Shop the soaps</a>
+</section>
+{{ end }}

layouts/shop/list.html

@@ -0,0 +1,41 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+
+<div class="product-grid">
+  {{ range .Site.Data.products }}
+  <div class="product-card">
+    <img src="{{ .image | relURL }}" alt="{{ .name }}">
+    <div class="body">
+      <span class="status-pill {{ .status }}">
+        {{ if eq .status "available" }}Available
+        {{ else if eq .status "low" }}Low Stock
+        {{ else }}Out of Stock{{ end }}
+      </span>
+      <h3>{{ .name }}</h3>
+      <p class="desc">{{ .description }}</p>
+      <p class="price">${{ .price }}</p>
+      {{ if eq .status "low" }}
+      <p class="low-note">Orders may take a bit longer to ship.</p>
+      {{ end }}
+      {{ if eq .status "out" }}
+      <span class="buy-btn disabled">Out of Stock</span>
+      {{ else if .stripe_payment_link }}
+      <a class="buy-btn enabled" href="{{ .stripe_payment_link }}">Buy &mdash; ${{ .price }}</a>
+      {{ else }}
+      <span class="buy-btn disabled">Checkout coming soon</span>
+      {{ end }}
+    </div>
+  </div>
+  {{ end }}
+</div>
+
+<div class="reorder-box">
+  <h2>Already ordered from us?</h2>
+  <p>Enter your email to see what you got last time.</p>
+  <form onsubmit="return false;">
+    <input type="email" placeholder="you@example.com" disabled>
+    <button type="submit" disabled>Look up my orders</button>
+  </form>
+  <p class="demo-note">This box is a preview &mdash; it'll work once checkout is connected, since it looks up real past orders.</p>
+</div>
+{{ end }}

static/images/soaps/cedar-sage.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#9BAE8C"/>
+      <stop offset="1" stop-color="#6E8060"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="300" height="200" fill="#F1ECE0"/>
+  <rect x="30" y="35" width="240" height="140" rx="22" fill="url(#g)"/>
+  <rect x="30" y="35" width="240" height="40" rx="22" fill="#ffffff" opacity="0.18"/>
+  
+</svg>

static/images/soaps/clay-charcoal-mint.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#8E9B8A"/>
+      <stop offset="1" stop-color="#3F4A42"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="300" height="200" fill="#F1ECE0"/>
+  <rect x="30" y="35" width="240" height="140" rx="22" fill="url(#g)"/>
+  <rect x="30" y="35" width="240" height="40" rx="22" fill="#ffffff" opacity="0.18"/>
+  <circle cx="56.9" cy="166.1" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="131.3" cy="62.7" r="2.5" fill="#2B2F2C" opacity="0.55"/><circle cx="112.6" cy="122.3" r="2.4" fill="#2B2F2C" opacity="0.55"/><circle cx="133.4" cy="45.8" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="172.5" cy="88.7" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="111.9" cy="78.0" r="2.9" fill="#2B2F2C" opacity="0.55"/><circle cx="243.4" cy="57.4" r="2.4" fill="#2B2F2C" opacity="0.55"/><circle cx="186.0" cy="42.8" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="73.3" cy="126.5" r="1.5" fill="#2B2F2C" opacity="0.55"/><circle cx="50.6" cy="118.2" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="75.2" cy="48.2" r="2.6" fill="#2B2F2C" opacity="0.55"/><circle cx="47.0" cy="45.4" r="2.9" fill="#2B2F2C" opacity="0.55"/><circle cx="57.8" cy="64.3" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="263.6" cy="69.6" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="48.6" cy="150.0" r="3.0" fill="#2B2F2C" opacity="0.55"/><circle cx="132.0" cy="78.4" r="1.5" fill="#2B2F2C" opacity="0.55"/><circle cx="266.0" cy="136.9" r="1.3" fill="#2B2F2C" opacity="0.55"/><circle cx="31.9" cy="30.8" r="3.0" fill="#2B2F2C" opacity="0.55"/><circle cx="133.5" cy="122.4" r="1.5" fill="#2B2F2C" opacity="0.55"/><circle cx="50.5" cy="160.0" r="2.1" fill="#2B2F2C" opacity="0.55"/><circle cx="200.2" cy="138.9" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="191.0" cy="108.7" r="2.5" fill="#2B2F2C" opacity="0.55"/><circle cx="139.7" cy="118.8" r="1.8" fill="#2B2F2C" opacity="0.55"/><circle cx="104.2" cy="137.9" r="1.9" fill="#2B2F2C" opacity="0.55"/><circle cx="53.0" cy="165.5" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="260.3" cy="168.8" r="1.9" fill="#2B2F2C" opacity="0.55"/><circle cx="226.2" cy="132.4" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="119.0" cy="72.9" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="143.8" cy="166.3" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="185.8" cy="34.9" r="1.9" fill="#2B2F2C" opacity="0.55"/><circle cx="157.0" cy="149.9" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="249.0" cy="42.4" r="2.7" fill="#2B2F2C" opacity="0.55"/><circle cx="149.0" cy="119.6" r="1.6" fill="#2B2F2C" opacity="0.55"/><circle cx="127.6" cy="149.0" r="1.9" fill="#2B2F2C" opacity="0.55"/><circle cx="215.6" cy="31.5" r="1.4" fill="#2B2F2C" opacity="0.55"/><circle cx="92.0" cy="75.3" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="143.7" cy="57.5" r="2.3" fill="#2B2F2C" opacity="0.55"/><circle cx="266.7" cy="106.2" r="2.1" fill="#2B2F2C" opacity="0.55"/><circle cx="45.3" cy="144.5" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="176.7" cy="118.7" r="2.5" fill="#2B2F2C" opacity="0.55"/><circle cx="166.2" cy="119.5" r="2.2" fill="#2B2F2C" opacity="0.55"/><circle cx="225.4" cy="145.3" r="2.1" fill="#2B2F2C" opacity="0.55"/><circle cx="102.5" cy="137.5" r="2.0" fill="#2B2F2C" opacity="0.55"/><circle cx="120.4" cy="111.0" r="2.6" fill="#2B2F2C" opacity="0.55"/><circle cx="213.7" cy="73.5" r="1.4" fill="#2B2F2C" opacity="0.55"/><circle cx="249.5" cy="154.7" r="2.4" fill="#2B2F2C" opacity="0.55"/><circle cx="240.3" cy="160.6" r="2.7" fill="#2B2F2C" opacity="0.55"/><circle cx="91.6" cy="118.3" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="154.3" cy="124.2" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="173.9" cy="76.1" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="272.9" cy="119.4" r="1.7" fill="#2B2F2C" opacity="0.55"/><circle cx="82.7" cy="118.2" r="2.5" fill="#2B2F2C" opacity="0.55"/><circle cx="123.4" cy="64.6" r="1.4" fill="#2B2F2C" opacity="0.55"/><circle cx="22.3" cy="169.2" r="2.1" fill="#2B2F2C" opacity="0.55"/><circle cx="234.1" cy="55.9" r="2.6" fill="#2B2F2C" opacity="0.55"/><circle cx="135.1" cy="41.0" r="1.5" fill="#2B2F2C" opacity="0.55"/><circle cx="188.3" cy="59.6" r="1.9" fill="#2B2F2C" opacity="0.55"/><circle cx="219.4" cy="83.7" r="1.3" fill="#2B2F2C" opacity="0.55"/><circle cx="217.0" cy="77.6" r="2.8" fill="#2B2F2C" opacity="0.55"/><circle cx="37.9" cy="159.8" r="2.7" fill="#2B2F2C" opacity="0.55"/>
+</svg>

static/images/soaps/lavender-oatmeal.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#B9A8D6"/>
+      <stop offset="1" stop-color="#8F7CB8"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="300" height="200" fill="#F1ECE0"/>
+  <rect x="30" y="35" width="240" height="140" rx="22" fill="url(#g)"/>
+  <rect x="30" y="35" width="240" height="40" rx="22" fill="#ffffff" opacity="0.18"/>
+  <circle cx="196.8" cy="72.9" r="2.9" fill="#7A6BA0" opacity="0.55"/><circle cx="64.2" cy="78.3" r="2.9" fill="#7A6BA0" opacity="0.55"/><circle cx="77.4" cy="160.6" r="1.9" fill="#7A6BA0" opacity="0.55"/><circle cx="222.9" cy="39.1" r="2.7" fill="#7A6BA0" opacity="0.55"/><circle cx="265.1" cy="73.3" r="2.9" fill="#7A6BA0" opacity="0.55"/><circle cx="96.7" cy="73.4" r="2.1" fill="#7A6BA0" opacity="0.55"/><circle cx="101.6" cy="165.8" r="1.9" fill="#7A6BA0" opacity="0.55"/><circle cx="158.1" cy="128.0" r="1.3" fill="#7A6BA0" opacity="0.55"/><circle cx="191.6" cy="115.1" r="2.1" fill="#7A6BA0" opacity="0.55"/><circle cx="243.6" cy="98.0" r="2.6" fill="#7A6BA0" opacity="0.55"/><circle cx="246.7" cy="108.0" r="1.5" fill="#7A6BA0" opacity="0.55"/><circle cx="221.0" cy="141.8" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="207.8" cy="118.1" r="1.5" fill="#7A6BA0" opacity="0.55"/><circle cx="172.6" cy="42.2" r="1.8" fill="#7A6BA0" opacity="0.55"/><circle cx="272.7" cy="98.7" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="22.8" cy="101.3" r="1.7" fill="#7A6BA0" opacity="0.55"/><circle cx="69.5" cy="143.1" r="2.0" fill="#7A6BA0" opacity="0.55"/><circle cx="253.3" cy="69.2" r="2.8" fill="#7A6BA0" opacity="0.55"/><circle cx="73.5" cy="158.5" r="1.4" fill="#7A6BA0" opacity="0.55"/><circle cx="268.2" cy="124.6" r="2.6" fill="#7A6BA0" opacity="0.55"/><circle cx="268.8" cy="151.5" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="61.0" cy="166.9" r="2.0" fill="#7A6BA0" opacity="0.55"/><circle cx="193.8" cy="103.8" r="2.5" fill="#7A6BA0" opacity="0.55"/><circle cx="269.7" cy="98.2" r="3.0" fill="#7A6BA0" opacity="0.55"/><circle cx="223.2" cy="157.7" r="1.9" fill="#7A6BA0" opacity="0.55"/><circle cx="116.7" cy="51.5" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="98.8" cy="50.9" r="1.8" fill="#7A6BA0" opacity="0.55"/><circle cx="138.0" cy="144.9" r="2.0" fill="#7A6BA0" opacity="0.55"/><circle cx="145.3" cy="139.4" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="274.0" cy="32.3" r="2.4" fill="#7A6BA0" opacity="0.55"/><circle cx="155.0" cy="55.6" r="1.9" fill="#7A6BA0" opacity="0.55"/><circle cx="78.2" cy="166.6" r="1.7" fill="#7A6BA0" opacity="0.55"/><circle cx="37.6" cy="124.6" r="2.1" fill="#7A6BA0" opacity="0.55"/><circle cx="145.1" cy="110.6" r="2.7" fill="#7A6BA0" opacity="0.55"/><circle cx="185.5" cy="155.5" r="2.8" fill="#7A6BA0" opacity="0.55"/><circle cx="86.4" cy="115.4" r="1.7" fill="#7A6BA0" opacity="0.55"/><circle cx="173.5" cy="137.5" r="1.6" fill="#7A6BA0" opacity="0.55"/><circle cx="108.9" cy="48.7" r="2.9" fill="#7A6BA0" opacity="0.55"/><circle cx="254.1" cy="34.2" r="1.7" fill="#7A6BA0" opacity="0.55"/><circle cx="254.5" cy="165.8" r="1.7" fill="#7A6BA0" opacity="0.55"/>
+</svg>

static/images/soaps/oat-milk-honey.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#EDE0C4"/>
+      <stop offset="1" stop-color="#D8C79E"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="300" height="200" fill="#F1ECE0"/>
+  <rect x="30" y="35" width="240" height="140" rx="22" fill="url(#g)"/>
+  <rect x="30" y="35" width="240" height="40" rx="22" fill="#ffffff" opacity="0.18"/>
+  
+</svg>