Initial commit: Valley of the Commons splash page
- Static HTML/CSS splash page with email signup - Dockerized with nginx for production deployment - Traefik labels configured for reverse proxy integration - Clean, minimal design with earthy color palette Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
commit
1fa83e186a
|
|
@ -0,0 +1,25 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
FROM nginx:alpine
|
||||
|
||||
# Copy static files
|
||||
COPY index.html /usr/share/nginx/html/
|
||||
COPY styles.css /usr/share/nginx/html/
|
||||
|
||||
# Copy custom nginx config if needed
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
services:
|
||||
valley-commons:
|
||||
build: .
|
||||
restart: unless-stopped
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.valley-commons.rule=Host(`valleyofthecommons.org`) || Host(`www.valleyofthecommons.org`)"
|
||||
- "traefik.http.services.valley-commons.loadbalancer.server.port=80"
|
||||
networks:
|
||||
- traefik-public
|
||||
|
||||
networks:
|
||||
traefik-public:
|
||||
external: true
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Valley of the Commons</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<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=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Valley of the Commons</h1>
|
||||
<p class="tagline">Coming Soon</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p class="description">
|
||||
A space for collaborative stewardship and shared abundance.
|
||||
</p>
|
||||
|
||||
<div class="signup">
|
||||
<p>Stay updated on our progress:</p>
|
||||
<form class="email-form" action="#" method="post">
|
||||
<input type="email" placeholder="your@email.com" required>
|
||||
<button type="submit">Notify Me</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Valley of the Commons</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/javascript application/json;
|
||||
gzip_min_length 1000;
|
||||
|
||||
# Cache static assets
|
||||
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Main location
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #f5f3ef;
|
||||
--color-text: #2d3a2d;
|
||||
--color-accent: #5a7247;
|
||||
--color-accent-hover: #4a6237;
|
||||
--color-muted: #6b7b6b;
|
||||
--font-display: 'Playfair Display', Georgia, serif;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 8vw, 4rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-muted);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-muted);
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.signup p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.email-form {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.email-form input {
|
||||
flex: 1;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid #d4d0c8;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-body);
|
||||
background: white;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.email-form input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.email-form button {
|
||||
padding: 0.875rem 1.5rem;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.email-form button:hover {
|
||||
background: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(--color-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
Loading…
Reference in New Issue