projects/usbcheck.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-24 00:26:43 +01:00
parent b0ab9e2f29
commit 0b6f30a83e
7 changed files with 55 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
partials/landing/main/faq.php
View File

@@ -1,4 +1,4 @@
<section id="faq" class="border-t border-brand-border/60 bg-brand-primarySoft/10 py-16 sm:py-20">
<section id="faq" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-10">
<div class="max-w-3xl space-y-4">

2
partials/landing/main/features.php
View File

@@ -1,4 +1,4 @@
<section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<section id="features" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-10">
<div class="max-w-3xl space-y-4">

12
partials/landing/main/hero.php
View File

@@ -1,9 +1,8 @@
<section id="hero" class="relative overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(58,111,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(255,183,134,0.35),_transparent_60%)] pointer-events-none"></div>
<div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
<section id="hero" class="hero-section relative overflow-hidden">
<div class="relative px-4 sm:px-6 lg:px-8">
<div class="section-shell hero-shell items-center">
<!-- Left: Text -->
<div class="flex-1 space-y-7">
<div class="hero-copy space-y-7">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
Detect fake USB sticks before you lose data
</p>
@@ -50,7 +49,7 @@
</div>
<!-- Right: Card (Teaser Quickcheck) -->
<div class="flex-1 w-full max-w-xl">
<div class="hero-preview w-full">
<div class="quick-preview-card space-y-6">
<div class="quick-preview-header">
<div>
@@ -118,4 +117,5 @@
</div>
</div>
</div>
</div>
</section>

2
partials/landing/main/how.php
View File

@@ -1,4 +1,4 @@
<section id="how" class="border-t border-brand-border/60 bg-brand-primarySoft/30 py-16 sm:py-20">
<section id="how" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell grid gap-10 lg:grid-cols-[1.2fr,1fr]">
<div class="space-y-6">

2
partials/landing/main/problem.php
View File

@@ -1,4 +1,4 @@
<section id="problem" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<section id="problem" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-8">
<div class="max-w-3xl space-y-4">

2
partials/landing/main/security.php
View File

@@ -1,4 +1,4 @@
<section id="security" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<section id="security" class="section-band section-band--reverse border-t border-brand-border/60 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-8">
<div class="max-w-3xl space-y-4">

104
public/assets/css/main.css
View File

@@ -234,18 +234,42 @@ body {
/* Hero */
.hero {
.hero-section {
position: relative;
padding-top: 5rem;
padding-bottom: 4rem;
background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.2), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 55%, #e7f0ff 100%);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 3rem;
align-items: center;
.hero-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.14), transparent 55%),
radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
pointer-events: none;
}
.hero-shell {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 1024px) {
.hero-shell {
flex-direction: row;
gap: 2.5rem;
}
}
.hero-copy {
flex: 1;
}
.hero-preview {
flex: 1;
max-width: 480px;
}
.hero-kicker {
@@ -301,58 +325,6 @@ body {
gap: 1.5rem;
}
.hero-card {
background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 80%);
border-radius: 28px;
padding: 1.6rem 1.8rem;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(58, 111, 248, 0.15);
}
.hero-logo {
width: 180px;
max-width: 100%;
margin-bottom: 0.75rem;
}
.hero-card-title {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 600;
margin: 0 0 1rem;
font-size: 1rem;
}
.hero-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.metric-label {
display: block;
font-size: 0.8rem;
color: #5f6b85;
}
.metric-value {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--deep-gray);
}
.hero-small {
font-size: 0.78rem;
color: #6c7695;
}
.hero-stick img {
width: 200px;
max-width: 100%;
filter: drop-shadow(0 12px 28px rgba(58, 111, 248, 0.25));
}
/* Quick test visual */
.quick-preview-card {
@@ -569,6 +541,18 @@ body {
background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%);
}
.section-band {
position: relative;
}
.section-band--soft {
background: linear-gradient(180deg, #edf3ff 0%, #f9fbff 100%);
}
.section-band--reverse {
background: linear-gradient(180deg, #f9fbff 0%, #edf3ff 100%);
}
/* Steps / Features / Pricing */
.steps-grid,