toddlowmedia/3d-homepage-zozomu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy from Lumerel

Browse Source
This commit is contained in:
Lumerel Deploy
2026-02-20 21:10:25 +00:00
commit bc0ceb1e5d
5 changed files with 825 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.dockerignore Normal file
View File

@@ -0,0 +1,3 @@
.git
Dockerfile
.dockerignore

23
Dockerfile Normal file
View File

@@ -0,0 +1,23 @@
FROM webdevops/php-nginx:8.3-alpine
ENV WEB_DOCUMENT_ROOT=/app
ARG CACHE_BUST=1771621825
COPY . /app
RUN echo "index index.php index.html index.htm;" > /opt/docker/etc/nginx/vhost.common.d/01-index.conf \
&& echo "add_header Cache-Control 'no-cache, no-store, must-revalidate';" > /opt/docker/etc/nginx/vhost.common.d/02-no-cache.conf
RUN set -e; if [ -f /app/composer.json ]; then \
echo ">>> composer.json found, installing dependencies..."; \
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer; \
cd /app && composer install --no-dev --no-interaction --optimize-autoloader; \
ls -la /app/vendor/autoload.php; \
else \
echo ">>> No composer.json found, skipping composer install"; \
fi
RUN set -e; if [ -f /app/package.json ]; then \
echo ">>> package.json found, installing node dependencies..."; \
apk add --no-cache nodejs npm; \
cd /app && npm install --production; \
else \
echo ">>> No package.json found, skipping npm install"; \
fi
RUN chown -R application:application /app

179
index.html Normal file
View File

@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lumerel — Web3 at the Speed of Experience</title>
<meta name="description" content="Powering seamless experiences and real-time connections. Lumerel is the base for creators who move with purpose." />
<!-- General Sans — Fontshare -->
<link rel="preconnect" href="https://api.fontshare.com" />
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet" />
<!--
╔══════════════════════════════════════════════════════════════════╗
║ SPLINE 3D — HOW TO ADD YOUR SCENE ║
║ ║
║ Option A — Drop in HTML (recommended): ║
║ 1. Find #spline-layer below ║
║ 2. Delete the .spline-placeholder div ║
║ 3. Paste: ║
║ <spline-viewer ║
║ url="https://prod.spline.design/SCENE_ID/scene.splinecode"
║ events-target="global" ║
║ ></spline-viewer> ║
║ ║
║ Option B — JavaScript at runtime: ║
║ window.Lumerel.loadSplineScene('https://prod.spline.design/…')║
║ ║
║ Option C — Enable pointer events for interactive scenes: ║
║ window.Lumerel.enableSpline() ║
╚══════════════════════════════════════════════════════════════════╝
-->
<script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.96/build/spline-viewer.js"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="hero" id="hero">
<!-- ── Layer 0 · Background Video ──────────────────────────────── -->
<div class="hero__video-wrap">
<video
class="hero__video"
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260217_030345_246c0224-10a4-422c-b324-070b7c0eceda.mp4"
autoplay
muted
loop
playsinline
preload="auto"
></video>
<div class="hero__overlay"></div>
</div>
<!-- ── Layer 1 · 3D / Spline Scene ─────────────────────────────────
z-index: 1 — sits above video, below all UI.
pointer-events: none by default keeps buttons & links clickable.
Call window.Lumerel.enableSpline() for interactive scenes.
──────────────────────────────────────────────────────────────────── -->
<div class="hero__3d-layer" id="spline-layer">
<!--
┌─ REPLACE THIS PLACEHOLDER WITH YOUR SPLINE SCENE ────────────┐
│ │
│ Delete .spline-placeholder and paste: │
│ │
│ <spline-viewer │
│ url="https://prod.spline.design/SCENE_ID/scene.splinecode"
│ events-target="global" │
│ ></spline-viewer> │
│ │
└───────────────────────────────────────────────────────────────┘
-->
<div class="spline-placeholder">
<div class="orb orb--violet"></div>
<div class="orb orb--cyan"></div>
<div class="orb orb--pink"></div>
<span class="spline-placeholder__label">3D Spline Scene Placeholder</span>
</div>
</div>
<!-- ── Layer 2 · Navbar ─────────────────────────────────────────── -->
<nav class="navbar" id="navbar" role="navigation" aria-label="Main navigation">
<div class="navbar__inner">
<!-- Left: Logo + Nav Links -->
<div class="navbar__left">
<!-- Logo wordmark — 187×25px -->
<a href="/" class="navbar__logo" aria-label="Lumerel home">
<svg width="187" height="25" viewBox="0 0 187 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<!-- Geometric mark -->
<rect x="0" y="4" width="17" height="17" rx="3" fill="white" opacity="0.15"/>
<rect x="3" y="7" width="11" height="11" rx="2" fill="white" opacity="0.35"/>
<rect x="6" y="10" width="5" height="5" rx="1" fill="white"/>
<!-- Wordmark -->
<text x="24" y="19" font-family="'General Sans', system-ui, sans-serif" font-size="15" font-weight="600" fill="white" letter-spacing="0.08em">LUMEREL</text>
</svg>
</a>
<!-- Nav links — hidden on mobile -->
<ul class="navbar__links" role="list">
<li>
<a href="#" class="navbar__link">
Get Started
<svg class="navbar__chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3.5 5.25L7 8.75L10.5 5.25" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
<li>
<a href="#" class="navbar__link">
Developers
<svg class="navbar__chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3.5 5.25L7 8.75L10.5 5.25" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
<li>
<a href="#" class="navbar__link">
Features
<svg class="navbar__chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3.5 5.25L7 8.75L10.5 5.25" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
<li>
<a href="#" class="navbar__link">
Resources
<svg class="navbar__chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3.5 5.25L7 8.75L10.5 5.25" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- Right: Join Waitlist pill button (dark variant) -->
<button class="btn-pill btn-pill--dark" id="navbar-waitlist-btn" aria-label="Join the Lumerel waitlist">
<span class="btn-pill__glow"></span>
<span class="btn-pill__label">Join Waitlist</span>
</button>
</div>
</nav>
<!-- ── Layer 3 · Hero Content ───────────────────────────────────── -->
<div class="hero__content">
<!-- Badge / Pill -->
<div class="hero__badge" role="note">
<span class="hero__badge-dot" aria-hidden="true"></span>
<span class="hero__badge-text">
<span class="hero__badge-dim">Early access available from</span>
<span class="hero__badge-bright"> May 1, 2026</span>
</span>
</div>
<!-- Heading -->
<h1 class="hero__heading">
Web3 at the Speed of Experience
</h1>
<!-- Subtitle -->
<p class="hero__subtitle">
Powering seamless experiences and real-time connections, EOS is the base for creators who move with purpose, leveraging resilience, speed, and scale to shape the future.
</p>
<!-- CTA Button (light variant) -->
<button class="btn-pill btn-pill--light" id="hero-waitlist-btn" aria-label="Join the Lumerel waitlist">
<span class="btn-pill__glow"></span>
<span class="btn-pill__label">Join Waitlist</span>
</button>
</div>
</section>
<script src="main.js"></script>
</body>
</html>

161
main.js Normal file
View File

@@ -0,0 +1,161 @@
/**
* Lumerel — 3D Homepage · main.js
*
* Responsibilities:
* 1. Spline 3D scene pointer-events toggle + runtime loader
* 2. Navbar scroll backdrop blur
* 3. Background video autoplay fallback (iOS Safari)
* 4. Waitlist button click hooks
* 5. Public API exposed on window.Lumerel
*/
/* ── 1. Spline / 3D Layer Integration ─────────────────────────────
*
* When your Spline scene is ready, choose one of three methods:
*
* ── Method A (HTML — recommended) ─────────────────────────────────
* Open index.html → find #spline-layer → delete .spline-placeholder
* → paste in:
*
* <spline-viewer
* url="https://prod.spline.design/YOUR_SCENE_ID/scene.splinecode"
* events-target="global"
* ></spline-viewer>
*
* ── Method B (JavaScript runtime) ─────────────────────────────────
* Call from console or your code:
* window.Lumerel.loadSplineScene('https://prod.spline.design/…')
*
* ── Method C (Interactive scenes) ─────────────────────────────────
* After scene loads, enable pointer events:
* window.Lumerel.enableSpline()
*
* The <spline-viewer> web component is already loaded via CDN
* in the <head> of index.html — no extra imports needed.
*
─────────────────────────────────────────────────────────────────── */
const splineLayer = document.getElementById('spline-layer');
/** Allow pointer events on the 3D layer (for interactive Spline scenes). */
function enableSpline() {
if (splineLayer) splineLayer.style.pointerEvents = 'auto';
}
/** Block pointer events on the 3D layer (default — keeps UI clickable). */
function disableSpline() {
if (splineLayer) splineLayer.style.pointerEvents = 'none';
}
/**
* Programmatically load a Spline scene URL at runtime.
* Removes the placeholder orbs and inserts a <spline-viewer>.
* @param {string} url - The full Spline scene URL
* @param {boolean} [interactive=false] - Enable pointer events for interactive scenes
*/
function loadSplineScene(url, interactive = false) {
if (!splineLayer) return;
// Remove placeholder if present
const placeholder = splineLayer.querySelector('.spline-placeholder');
if (placeholder) placeholder.remove();
// Create and configure the viewer
const viewer = document.createElement('spline-viewer');
viewer.setAttribute('url', url);
viewer.setAttribute('events-target', 'global');
viewer.style.cssText = 'width:100%;height:100%;display:block;';
viewer.addEventListener('load', () => {
console.log('[Lumerel] ✓ Spline scene loaded:', url);
if (interactive) enableSpline();
});
splineLayer.appendChild(viewer);
console.log('[Lumerel] Loading Spline scene…');
}
// Auto-detect if a <spline-viewer> was placed directly in index.html
if (splineLayer) {
const viewer = splineLayer.querySelector('spline-viewer');
if (viewer) {
viewer.addEventListener('load', () => {
console.log('[Lumerel] ✓ Spline scene loaded.');
// Uncomment to enable 3D mouse interaction after scene loads:
// enableSpline();
});
}
}
/* ── 2. Navbar Scroll Backdrop ─────────────────────────────────────── */
const navbar = document.getElementById('navbar');
function updateNavbar() {
if (!navbar) return;
if (window.scrollY > 24) {
navbar.style.background = 'rgba(0, 0, 0, 0.45)';
navbar.style.backdropFilter = 'blur(16px)';
navbar.style.webkitBackdropFilter = 'blur(16px)';
} else {
navbar.style.background = 'transparent';
navbar.style.backdropFilter = 'none';
navbar.style.webkitBackdropFilter = 'none';
}
}
window.addEventListener('scroll', updateNavbar, { passive: true });
updateNavbar(); // run once on load
/* ── 3. Background Video Fallback ─────────────────────────────────── */
const heroVideo = document.querySelector('.hero__video');
if (heroVideo) {
// Gradient fallback if video fails to load
heroVideo.addEventListener('error', () => {
console.warn('[Lumerel] Background video failed — using gradient fallback.');
const wrap = heroVideo.closest('.hero__video-wrap');
if (wrap) {
heroVideo.style.display = 'none';
wrap.style.background = 'linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%)';
}
});
// iOS Safari: force play on user interaction if autoplay was blocked
const tryPlay = () => {
if (heroVideo.paused) {
heroVideo.play().catch(() => {});
}
document.removeEventListener('touchstart', tryPlay);
document.removeEventListener('click', tryPlay);
};
heroVideo.play().catch(() => {
document.addEventListener('touchstart', tryPlay, { once: true, passive: true });
document.addEventListener('click', tryPlay, { once: true });
});
}
/* ── 4. Waitlist Button Hooks ─────────────────────────────────────── */
const waitlistBtns = document.querySelectorAll('.btn-pill');
waitlistBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Hook your waitlist modal / form here
console.log('[Lumerel] Waitlist button clicked — connect your form/modal here.');
// Example: document.getElementById('waitlist-modal').showModal();
});
});
/* ── 5. Public API ────────────────────────────────────────────────── */
window.Lumerel = {
/** Load a Spline scene at runtime. */
loadSplineScene,
/** Enable pointer events on the 3D layer (for interactive scenes). */
enableSpline,
/** Disable pointer events on the 3D layer (default state). */
disableSpline,
/** Direct reference to the 3D layer element. */
splineLayer,
};
console.log('[Lumerel] ✓ Ready. window.Lumerel API available.');

459
styles.css Normal file
View File

@@ -0,0 +1,459 @@
/*
═══════════════════════════════════════════════════════════════════
LUMEREL — 3D Hero Page
Font : General Sans (Fontshare)
Theme : Pure black · Web3 · Spline-ready
═══════════════════════════════════════════════════════════════════
*/
/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background: #000000;
color: #ffffff;
font-family: 'General Sans', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul { list-style: none; }
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
/*
═══════════════════════════════════════════════════════════════════
HERO SECTION
Full-screen · layers: video → 3D → navbar → content
═══════════════════════════════════════════════════════════════════
*/
.hero {
position: relative;
width: 100%;
min-height: 100dvh;
background: #000000;
overflow: hidden;
}
/* ── Layer 0 · Background Video ──────────────────────────────────── */
.hero__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Exactly 50% black overlay (bg-black/50) */
.hero__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.50);
}
/* ── Layer 1 · 3D / Spline ───────────────────────────────────────────
Above video (z-index: 1), below all UI (z-index: 2+).
pointer-events: none keeps buttons & links fully clickable.
Call window.Lumerel.enableSpline() for interactive scenes.
────────────────────────────────────────────────────────────────────── */
.hero__3d-layer {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Spline viewer fills the full layer */
.hero__3d-layer spline-viewer {
width: 100%;
height: 100%;
display: block;
}
/* ── 3D Placeholder Orbs ─────────────────────────────────────────────
Animated ambient orbs simulate depth until Spline assets arrive.
Delete .spline-placeholder when adding <spline-viewer>.
────────────────────────────────────────────────────────────────────── */
.spline-placeholder {
position: relative;
width: 100%;
height: 100%;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.18;
}
.orb--violet {
width: 520px;
height: 520px;
background: radial-gradient(circle, #7c3aed 0%, #4f46e5 55%, transparent 100%);
top: 8%;
right: 5%;
animation: orbDrift 11s ease-in-out infinite;
}
.orb--cyan {
width: 360px;
height: 360px;
background: radial-gradient(circle, #06b6d4 0%, #3b82f6 55%, transparent 100%);
bottom: 14%;
left: 4%;
animation: orbDrift 13s ease-in-out infinite reverse;
animation-delay: -5s;
}
.orb--pink {
width: 260px;
height: 260px;
background: radial-gradient(circle, #f0abfc 0%, #a78bfa 55%, transparent 100%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: orbDriftCenter 9s ease-in-out infinite;
animation-delay: -3s;
}
@keyframes orbDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-20px, -30px) scale(1.06); }
66% { transform: translate(16px, 22px) scale(0.95); }
}
@keyframes orbDriftCenter {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
40% { transform: translate(-50%, -60%) scale(1.08); }
75% { transform: translate(-50%, -44%) scale(0.94); }
}
/* Placeholder label */
.spline-placeholder__label {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.20);
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 6px 14px;
border-radius: 100px;
pointer-events: none;
}
/*
═══════════════════════════════════════════════════════════════════
NAVBAR
Layer 2 · fixed · 120px horizontal padding · 20px vertical
═══════════════════════════════════════════════════════════════════
*/
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 120px;
}
.navbar__left {
display: flex;
align-items: center;
gap: 40px;
}
/* Logo — exactly 187×25px */
.navbar__logo {
display: flex;
align-items: center;
flex-shrink: 0;
width: 187px;
height: 25px;
}
.navbar__logo svg {
width: 187px;
height: 25px;
overflow: visible;
}
/* Nav links — hidden on mobile (<768px) */
.navbar__links {
display: flex;
align-items: center;
gap: 30px;
}
.navbar__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
white-space: nowrap;
transition: opacity 0.15s ease;
}
.navbar__link:hover {
opacity: 0.75;
}
.navbar__chevron {
flex-shrink: 0;
width: 14px;
height: 14px;
}
/*
═══════════════════════════════════════════════════════════════════
PILL BUTTON — Layered Construction
─────────────────────────────────────────────────────────────────
Outer ring : box-shadow 0 0 0 0.6px #fff (exact 0.6px white border)
Glow streak: radial-gradient ellipse at top, blurred white blob
Inner pill : black bg (dark variant) or white bg (light variant)
Padding : 11px 29px
Text : 14px / font-weight 500
═══════════════════════════════════════════════════════════════════
*/
.btn-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 29px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
font-family: 'General Sans', system-ui, sans-serif;
line-height: 1;
cursor: pointer;
border: none;
outline: none;
overflow: hidden;
/* 0.6px white outer border via box-shadow */
box-shadow: 0 0 0 0.6px rgba(255, 255, 255, 1);
transition: opacity 0.15s ease, transform 0.15s ease;
flex-shrink: 0;
}
.btn-pill:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.btn-pill:active {
transform: translateY(0);
opacity: 1;
}
/* Dark variant — navbar button: black bg, white text */
.btn-pill--dark {
background: #000000;
color: #ffffff;
}
/* Light variant — CTA button: white bg, black text */
.btn-pill--light {
background: #ffffff;
color: #000000;
}
/* Glow streak — white radial blob at top edge, blurred */
.btn-pill__glow {
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 18px;
background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 100%);
filter: blur(4px);
pointer-events: none;
border-radius: 100px;
}
/* Text layer sits above the glow */
.btn-pill__text {
position: relative;
z-index: 1;
}
/*
═══════════════════════════════════════════════════════════════════
HERO CONTENT
Layer 3 · centered · 280px top padding desktop / 200px mobile
═══════════════════════════════════════════════════════════════════
*/
.hero__content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 40px;
padding-top: 280px;
padding-bottom: 102px;
padding-left: 24px;
padding-right: 24px;
}
/* ── Badge pill ──────────────────────────────────────────────────── */
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
}
/* 4px white dot */
.hero__badge-dot {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #ffffff;
flex-shrink: 0;
}
.hero__badge-text {
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.hero__badge-muted {
color: rgba(255, 255, 255, 0.60);
}
.hero__badge-date {
color: #ffffff;
}
/* ── Heading ─────────────────────────────────────────────────────── */
.hero__heading {
max-width: 613px;
font-size: 56px;
font-weight: 500;
line-height: 1.28;
letter-spacing: -0.01em;
/*
Gradient fill: 144.5deg · white at 28% → transparent black at 115%
Applied via background-clip: text
*/
background: linear-gradient(144.5deg, #ffffff 28%, rgba(0, 0, 0, 0) 115%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ── Subtitle ────────────────────────────────────────────────────── */
.hero__subtitle {
max-width: 680px;
font-size: 15px;
font-weight: 400;
line-height: 1.65;
color: rgba(255, 255, 255, 0.70);
/* Exact 24px gap below heading (gap is 40px, subtract 16px via negative margin) */
margin-top: -16px;
}
/*
═══════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════
*/
/* Tablet — ≤1024px: reduce horizontal padding */
@media (max-width: 1024px) {
.navbar__inner {
padding: 20px 48px;
}
}
/* Mobile — ≤767px */
@media (max-width: 767px) {
/* Navbar */
.navbar__inner {
padding: 20px 24px;
}
/* Hide nav links on mobile */
.navbar__links {
display: none;
}
/* Hero content */
.hero__content {
padding-top: 200px;
gap: 32px;
}
/* Heading scales down */
.hero__heading {
font-size: 36px;
}
/* Badge wraps gracefully */
.hero__badge-text {
white-space: normal;
}
}
/* Very small screens */
@media (max-width: 380px) {
.navbar__inner {
padding: 20px 16px;
}
.hero__content {
padding-top: 160px;
padding-left: 16px;
padding-right: 16px;
}
.hero__heading {
font-size: 30px;
}
}