Bernt
48ea61cdcc
- Product documentation in docs/products/ - Updated MEMORY.md with product info - quiXzoom Auth Core as AAMOS Identity product
807 lines
24 KiB
HTML
807 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>quiXzoom — Collect Reality. Get Paid. Order Verified.</title>
|
|
<meta name="description" content="quiXzoom kopplar ihop människor som vill tjäna pengar på att fotografera med organisationer som behöver verifierad fältdata.">
|
|
<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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0a0f;
|
|
--bg-card: #111118;
|
|
--bg-hover: #1a1a24;
|
|
--border: #22222e;
|
|
--text: #e8e8f0;
|
|
--text-muted: #8888a0;
|
|
--text-dim: #555566;
|
|
--accent: #e8c547;
|
|
--accent-glow: rgba(232, 197, 71, 0.15);
|
|
--zoomer: #4ecdc4;
|
|
--zoomer-glow: rgba(78, 205, 196, 0.15);
|
|
--client: #ff6b6b;
|
|
--client-glow: rgba(255, 107, 107, 0.15);
|
|
--gradient-zoomer: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
|
--gradient-client: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ===== 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: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 20% 50%, var(--zoomer-glow), transparent),
|
|
radial-gradient(ellipse 80% 50% at 80% 50%, var(--client-glow), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 100px;
|
|
padding: 0.5rem 1.25rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-badge .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero h1 .highlight {
|
|
background: linear-gradient(135deg, var(--zoomer) 0%, var(--accent) 50%, var(--client) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
|
|
color: var(--text-muted);
|
|
max-width: 700px;
|
|
margin: 0 auto 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1rem;
|
|
color: var(--text-dim);
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ===== DUAL CTA ===== */
|
|
.dual-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 2.5rem;
|
|
border-radius: 12px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn:hover::after {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-zoomer {
|
|
background: var(--gradient-zoomer);
|
|
color: #0a0a0f;
|
|
box-shadow: 0 4px 20px var(--zoomer-glow);
|
|
}
|
|
|
|
.btn-zoomer:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px var(--zoomer-glow);
|
|
}
|
|
|
|
.btn-client {
|
|
background: var(--gradient-client);
|
|
color: white;
|
|
box-shadow: 0 4px 20px var(--client-glow);
|
|
}
|
|
|
|
.btn-client:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px var(--client-glow);
|
|
}
|
|
|
|
.btn-arrow {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.btn:hover .btn-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ===== SYMMETRIC SECTION ===== */
|
|
.symmetric-section {
|
|
padding: 6rem 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: var(--text-dim);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.dual-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dual-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.dual-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
padding: 3rem 2.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.dual-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
}
|
|
|
|
.dual-card.zoomer-card::before {
|
|
background: var(--gradient-zoomer);
|
|
}
|
|
|
|
.dual-card.client-card::before {
|
|
background: var(--gradient-client);
|
|
}
|
|
|
|
.dual-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.dual-card.zoomer-card:hover {
|
|
box-shadow: 0 20px 60px var(--zoomer-glow);
|
|
}
|
|
|
|
.dual-card.client-card:hover {
|
|
box-shadow: 0 20px 60px var(--client-glow);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.zoomer-card .card-icon {
|
|
background: var(--zoomer-glow);
|
|
}
|
|
|
|
.client-card .card-icon {
|
|
background: var(--client-glow);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.zoomer-card .card-title {
|
|
color: var(--zoomer);
|
|
}
|
|
|
|
.client-card .card-title {
|
|
color: var(--client);
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 1rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
font-size: 1.0625rem;
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.feature-text strong {
|
|
display: block;
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.feature-text span {
|
|
color: var(--text-muted);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.card-cta {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.card-cta .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ===== WHAT IS ===== */
|
|
.what-is {
|
|
padding: 6rem 2rem;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(232, 197, 71, 0.03) 50%, transparent 100%);
|
|
}
|
|
|
|
.what-is-inner {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.what-is h2 {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.what-is p {
|
|
font-size: clamp(1.0625rem, 2vw, 1.25rem);
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ===== WHY SECTION ===== */
|
|
.why-section {
|
|
padding: 6rem 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.why-section h2 {
|
|
text-align: center;
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.why-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.why-column h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.why-column.zoomer-why h3 {
|
|
color: var(--zoomer);
|
|
}
|
|
|
|
.why-column.client-why h3 {
|
|
color: var(--client);
|
|
}
|
|
|
|
.why-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.why-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.875rem;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.why-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.why-check {
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.zoomer-why .why-check {
|
|
color: var(--zoomer);
|
|
}
|
|
|
|
.client-why .why-check {
|
|
color: var(--client);
|
|
}
|
|
|
|
.why-text {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.why-text strong {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== FOOTER ===== */
|
|
.footer {
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.footer-tagline {
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--text-dim);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.footer-copy {
|
|
color: var(--text-dim);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* ===== SCROLL ANIMATIONS ===== */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ===== MOBILE ADJUSTMENTS ===== */
|
|
@media (max-width: 768px) {
|
|
.hero {
|
|
min-height: auto;
|
|
padding: 4rem 1.5rem;
|
|
}
|
|
|
|
.dual-cta {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.dual-cta .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dual-card {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.symmetric-section,
|
|
.why-section {
|
|
padding: 4rem 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-badge">
|
|
<span class="dot"></span>
|
|
Nu live i Sverige
|
|
</div>
|
|
<h1>
|
|
<span class="highlight">quiXzoom</span><br>
|
|
Collect Reality. Get Paid.<br>Order Verified.
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
Världens största nätverk av verifierade fältfotografer.
|
|
</p>
|
|
<p class="hero-tagline">
|
|
Som Zoomer tjänar du pengar. Som beställare får du verifierad data.
|
|
</p>
|
|
<div class="dual-cta">
|
|
<a href="#zoomer" class="btn btn-zoomer">
|
|
Bli Zoomer
|
|
<span class="btn-arrow">→</span>
|
|
</a>
|
|
<a href="#client" class="btn btn-client">
|
|
Beställ nu
|
|
<span class="btn-arrow">→</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SYMMETRIC DUAL SECTION -->
|
|
<section class="symmetric-section">
|
|
<div class="section-label">Välj din sida</div>
|
|
<div class="dual-grid">
|
|
<!-- ZOOMER CARD -->
|
|
<div class="dual-card zoomer-card fade-in" id="zoomer">
|
|
<div class="card-header">
|
|
<div class="card-icon">📸</div>
|
|
<div>
|
|
<div class="card-title">Zoomer</div>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle">Tjäna pengar på dina foton</p>
|
|
<ul class="feature-list">
|
|
<li class="feature-item">
|
|
<span class="feature-icon">📸</span>
|
|
<div class="feature-text">
|
|
<strong>Ta foton</strong>
|
|
<span>Få uppdrag i din närhet via appen</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">💰</span>
|
|
<div class="feature-text">
|
|
<strong>Tjäna per mission</strong>
|
|
<span>Betald inom 24h via Stripe Connect</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">🌍</span>
|
|
<div class="feature-text">
|
|
<strong>Jobba var som helst</strong>
|
|
<span>När du vill, var du vill</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">✅</span>
|
|
<div class="feature-text">
|
|
<strong>AI-granskad kvalitet</strong>
|
|
<span>Fair bedömning, inga godtyckliga avslag</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="card-cta">
|
|
<a href="https://app.quixzoom.com/signup" class="btn btn-zoomer">
|
|
Bli Zoomer
|
|
<span class="btn-arrow">→</span>
|
|
</a>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 1rem; font-size: 0.875rem; color: var(--text-dim);">
|
|
Free to join · No fees · Get paid per mission
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CLIENT CARD -->
|
|
<div class="dual-card client-card fade-in" id="client">
|
|
<div class="card-header">
|
|
<div class="card-icon">📋</div>
|
|
<div>
|
|
<div class="card-title">Beställare</div>
|
|
</div>
|
|
</div>
|
|
<p class="card-subtitle">Beställ verifierade fältfoton</p>
|
|
<ul class="feature-list">
|
|
<li class="feature-item">
|
|
<span class="feature-icon">📋</span>
|
|
<div class="feature-text">
|
|
<strong>Beställ uppdrag</strong>
|
|
<span>Per mission, per foto, eller per projekt</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">🎯</span>
|
|
<div class="feature-text">
|
|
<strong>Få verifierad data</strong>
|
|
<span>ID-kontrollerade bidragsgivare</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">⚡</span>
|
|
<div class="feature-text">
|
|
<strong>Snabb leverans</strong>
|
|
<span>Inom timmar, inte veckor</span>
|
|
</div>
|
|
</li>
|
|
<li class="feature-item">
|
|
<span class="feature-icon">📍</span>
|
|
<div class="feature-text">
|
|
<strong>Geotaggat & tidsstämplat</strong>
|
|
<span>Full spårbarhet på all data</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="card-cta">
|
|
<a href="https://app.quixzoom.com/order" class="btn btn-client">
|
|
Beställ nu
|
|
<span class="btn-arrow">→</span>
|
|
</a>
|
|
</div>
|
|
<p style="text-align: center; margin-top: 1rem; font-size: 0.875rem; color: var(--text-dim);">
|
|
Per mission · Per foto · Per projekt
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WHAT IS QUIXZOOM -->
|
|
<section class="what-is">
|
|
<div class="what-is-inner fade-in">
|
|
<div class="section-label">Vad är quiXzoom?</div>
|
|
<h2>Reality-as-a-Service</h2>
|
|
<p>
|
|
quiXzoom kopplar ihop människor som vill tjäna pengar på att fotografera med organisationer som behöver verifierad fältdata. Två sidor av samma mynt — båda vinner.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WHY SECTION -->
|
|
<section class="why-section">
|
|
<div class="section-label">Varför quiXzoom?</div>
|
|
<h2>Extremt bra för båda sidor</h2>
|
|
<div class="why-grid">
|
|
<!-- ZOOMER WHY -->
|
|
<div class="why-column zoomer-why fade-in">
|
|
<h3>
|
|
<span>📸</span>
|
|
För Zoomers
|
|
</h3>
|
|
<ul class="why-list">
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>100% av ersättningen</strong> till dig — ingen provision</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>Betald inom 24h</strong> via Stripe Connect</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>Jobba när du vill,</strong> var du vill</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>AI-granskning</strong> = fair bedömning</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- CLIENT WHY -->
|
|
<div class="why-column client-why fade-in">
|
|
<h3>
|
|
<span>📋</span>
|
|
För Beställare
|
|
</h3>
|
|
<ul class="why-list">
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>90% billigare</strong> än traditionell inspektion</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>Leverans inom timmar,</strong> inte veckor</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>Verifierade bidragsgivare</strong> med ID-kontroll</span>
|
|
</li>
|
|
<li class="why-item">
|
|
<span class="why-check">✓</span>
|
|
<span class="why-text"><strong>Geotaggat, tidsstämplat,</strong> AI-granskat</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="footer-logo">quiXzoom</div>
|
|
<p class="footer-tagline">Collect Reality. Get Paid. Order Verified.</p>
|
|
<div class="footer-links">
|
|
<a href="https://app.quixzoom.com">App</a>
|
|
<a href="mailto:hello@quixzoom.com">Kontakt</a>
|
|
<a href="#">Integritet</a>
|
|
<a href="#">Villkor</a>
|
|
</div>
|
|
<p class="footer-copy">© 2026 quiXzoom. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|