Initial commit: Speer spearmint beer marketing site
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
# Speer — Spearmint Beer
|
||||
|
||||
The official marketing site for **Speer**, a craft spearmint beer that sounds mad but tastes brilliant.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
Then visit http://localhost:3002
|
||||
|
||||
## Stack
|
||||
|
||||
- Single-page HTML marketing site (funky, retro, green)
|
||||
- Nginx:alpine for serving
|
||||
- Docker Compose with hermes-network
|
||||
@@ -0,0 +1,18 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
speer:
|
||||
image: nginx:alpine
|
||||
container_name: speer
|
||||
ports:
|
||||
- "3002:80"
|
||||
volumes:
|
||||
- ./index.html:/usr/share/nginx/html/index.html:ro
|
||||
- ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- hermes-network
|
||||
|
||||
networks:
|
||||
hermes-network:
|
||||
external: true
|
||||
+514
@@ -0,0 +1,514 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SPEER — Spearmint Beer</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--mint: #00FF88;
|
||||
--mint-dark: #00CC6A;
|
||||
--mint-pale: #00FF8820;
|
||||
--black: #0a0a0a;
|
||||
--dark: #111111;
|
||||
--grey: #222222;
|
||||
--white: #f0f0f0;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
overflow-x: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(0,255,136,0.15) 0%, transparent 50%);
|
||||
animation: breathe 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||||
50% { transform: scale(1.2); opacity: 1; }
|
||||
}
|
||||
|
||||
.hero-tag {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mint);
|
||||
border: 1px solid var(--mint);
|
||||
padding: 0.4rem 1.2rem;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(5rem, 18vw, 16rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 0.85;
|
||||
color: var(--mint);
|
||||
text-shadow: 0 0 80px rgba(0,255,136,0.4), 0 0 200px rgba(0,255,136,0.15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hero h1 span.glint {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 45%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
animation: glint 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glint {
|
||||
0%, 100% { background-position: 200% 0; }
|
||||
50% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
|
||||
color: var(--white);
|
||||
opacity: 0.8;
|
||||
margin-top: 2rem;
|
||||
max-width: 500px;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-tagline em {
|
||||
color: var(--mint);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mint);
|
||||
opacity: 0.5;
|
||||
animation: bob 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bob {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(8px); }
|
||||
}
|
||||
|
||||
/* === MARQUEE === */
|
||||
.marquee {
|
||||
overflow: hidden;
|
||||
background: var(--mint);
|
||||
padding: 0.8rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.marquee-inner {
|
||||
display: inline-block;
|
||||
animation: marquee-scroll 12s linear infinite;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: var(--black);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@keyframes marquee-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
/* === SECTIONS === */
|
||||
.section {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mint);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
color: rgba(240,240,240,0.7);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* === FEATURES GRID === */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--dark);
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: var(--mint);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--mint);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(240,240,240,0.5);
|
||||
}
|
||||
|
||||
/* === STATS BAR === */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
padding: 4rem 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 700;
|
||||
color: var(--mint);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(240,240,240,0.5);
|
||||
margin-top: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
/* === TASTE PROFILE === */
|
||||
.taste-bars {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.taste-bar {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.taste-bar-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.taste-bar-track {
|
||||
height: 8px;
|
||||
background: var(--grey);
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.taste-bar-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--mint-dark), var(--mint));
|
||||
border-radius: 100px;
|
||||
animation: fill-in 2s ease-out forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@keyframes fill-in {
|
||||
from { width: 0; }
|
||||
}
|
||||
|
||||
/* === CTA === */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 8rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,136,0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background: var(--mint);
|
||||
color: var(--black);
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
padding: 1.2rem 3rem;
|
||||
border-radius: 100px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 40px rgba(0,255,136,0.4);
|
||||
}
|
||||
|
||||
.cta-sub {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: rgba(240,240,240,0.4);
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--grey);
|
||||
font-size: 0.8rem;
|
||||
color: rgba(240,240,240,0.3);
|
||||
font-family: 'Space Mono', monospace;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--mint);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 600px) {
|
||||
.stats { grid-template-columns: 1fr; gap: 2rem; }
|
||||
.features { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-tag">Est. 2026 — Craft Spearmint Beer</div>
|
||||
<h1>
|
||||
<span>SPPEER</span>
|
||||
</h1>
|
||||
<p class="hero-tagline">
|
||||
Not a toothpaste. Not a soda.<br>
|
||||
It's <em>beer. But minty.</em>
|
||||
</p>
|
||||
<div class="scroll-hint">↓ scroll like a proper ↓</div>
|
||||
</section>
|
||||
|
||||
<!-- MARQUEE -->
|
||||
<div class="marquee">
|
||||
<div class="marquee-inner">
|
||||
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||||
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WHAT IS IT -->
|
||||
<section class="section">
|
||||
<div class="section-label">// What is it?</div>
|
||||
<h2>Yes, it's a spearmint beer.<br>No, we didn't lose the plot.</h2>
|
||||
<p>
|
||||
Meet Speer — the craft beer that starts like a After Eight and ends like a Friday night.
|
||||
We took proper ale brewing, added fresh spearmint leaves, and let it chill out for three weeks.
|
||||
The result? A drink that tastes like doing absolutely nothing on a summer balcony.
|
||||
</p>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌿</div>
|
||||
<h3>Real Spearmint</h3>
|
||||
<p>Not the "mint flavour" garbage. Hand-picked spearmint from Devon fields. If it doesn't smell like a British garden after rain, we don't use it.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🍺</div>
|
||||
<h3>Ale Base</h3>
|
||||
<p>Our pale ale base is brewed with local English barley and a whisper of Simcoe hops. It's the sort of thing your dad would nod at approvingly.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">❄️</div>
|
||||
<h3>Cold-Infused</h3>
|
||||
<p>No boiling the mint to death. We cold-contact infuse, which means every molecule of green goodness stays intact. Proper science, not magic.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">😎</div>
|
||||
<h3>4.2% ABV</h3>
|
||||
<p>That gentle "I've made good decisions today" buzz. You could drink a six-pack. We wouldn't recommend it. But you could.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats">
|
||||
<div>
|
||||
<div class="stat-number">100%</div>
|
||||
<div class="stat-label">Spearmint, No BS</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-number">4.2%</div>
|
||||
<div class="stat-label">ABV</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-number">0.33L</div>
|
||||
<div class="stat-label">Per Can</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TASTE PROFILE -->
|
||||
<section class="section">
|
||||
<div class="section-label">// Taste Profile</div>
|
||||
<h2>How it hits</h2>
|
||||
<p>Think of it like this: if a pale ale and a mojito had a baby, and that baby went to art college.</p>
|
||||
|
||||
<div class="taste-bars">
|
||||
<div class="taste-bar">
|
||||
<div class="taste-bar-label">
|
||||
<span>Spearmint Punch</span>
|
||||
<span>9/10</span>
|
||||
</div>
|
||||
<div class="taste-bar-track">
|
||||
<div class="taste-bar-fill" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taste-bar">
|
||||
<div class="taste-bar-label">
|
||||
<span>Hop Bitterness</span>
|
||||
<span>3/10</span>
|
||||
</div>
|
||||
<div class="taste-bar-track">
|
||||
<div class="taste-bar-fill" style="width: 30%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taste-bar">
|
||||
<div class="taste-bar-label">
|
||||
<span>Refreshing</span>
|
||||
<span>10/10</span>
|
||||
</div>
|
||||
<div class="taste-bar-track">
|
||||
<div class="taste-bar-fill" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taste-bar">
|
||||
<div class="taste-bar-label">
|
||||
<span>Malty Sweetness</span>
|
||||
<span>4/10</span>
|
||||
</div>
|
||||
<div class="taste-bar-track">
|
||||
<div class="taste-bar-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taste-bar">
|
||||
<div class="taste-bar-label">
|
||||
<span>Overall "Brilliant"</span>
|
||||
<span>∞/10</span>
|
||||
</div>
|
||||
<div class="taste-bar-track">
|
||||
<div class="taste-bar-fill" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MARQUEE 2 -->
|
||||
<div class="marquee" style="background: var(--dark); border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey);">
|
||||
<div class="marquee-inner" style="color: var(--mint); animation-direction: reverse;">
|
||||
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||||
SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED • SPEERMINT • BREWED • CHILLED •
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section">
|
||||
<div class="section-label">// Come on then</div>
|
||||
<h2>Ready to try it?</h2>
|
||||
<p style="margin: 0 auto 2rem; max-width: 400px;">
|
||||
It's not in shops yet. But you're reading this. Which means someone's thinking about making it.
|
||||
</p>
|
||||
<button class="cta-button" onclick="alert('You want SPEER? Fair enough. 👌')">
|
||||
Get In Touch
|
||||
</button>
|
||||
<p class="cta-sub">Limited first run. Don't say we didn't warn you.</p>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p>© 2026 SPEER BREWING CO. — Made with 😌 in England.</p>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.7rem; opacity: 0.5;">Powered by <a href="#">Speer</a> — the spearmint beer that shouldn't work but somehow does.</p>
|
||||
<p style="margin-top: 1rem; font-size: 0.7rem;">DRINK RESPONSIBLY. OR DON'T. WE'RE A WEBSITE, NOT YOUR DAD. 🍻</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
error_page 404 /index.html;
|
||||
|
||||
# Enable CORS just in case
|
||||
add_header X-Content-Type-Options nosniff;
|
||||
add_header X-Frame-Options SAMEORIGIN;
|
||||
}
|
||||
Reference in New Issue
Block a user