Compare commits
5 Commits
explore/re
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
dedf6a0e94 | ||
| aac2f5db86 | |||
|
|
d828816f12 | ||
|
|
dd34e08854 | ||
| 910fe91ed7 |
477
index.html
477
index.html
@ -1,477 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Klangwald Festival 2026</title>
|
||||
<meta name="description" content="Klangwald Festival – Das ultimative Musikerlebnis im Herzen der Schweizer Alpen. 18.–20. Juli 2026.">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============================================
|
||||
NAVIGATION
|
||||
============================================ -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="container navbar__inner">
|
||||
<a href="#" class="navbar__logo">
|
||||
<!-- TODO: Logo hier einfügen (z.B. <img src="img/logo.svg" alt="Klangwald">) -->
|
||||
KLANGWALD
|
||||
</a>
|
||||
|
||||
<!-- Hamburger-Menü für Mobile -->
|
||||
<button class="navbar__toggle" id="nav-toggle" aria-label="Menü öffnen">
|
||||
<span class="navbar__toggle-bar"></span>
|
||||
<span class="navbar__toggle-bar"></span>
|
||||
<span class="navbar__toggle-bar"></span>
|
||||
</button>
|
||||
|
||||
<ul class="navbar__menu" id="nav-menu">
|
||||
<li><a href="#lineup" class="navbar__link">Line-up</a></li>
|
||||
<li><a href="#programm" class="navbar__link">Programm</a></li>
|
||||
<li><a href="#tickets" class="navbar__link">Tickets</a></li>
|
||||
<li><a href="#info" class="navbar__link">Info</a></li>
|
||||
<li><a href="#tickets" class="navbar__link navbar__link--cta">Tickets kaufen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ============================================
|
||||
HERO SECTION
|
||||
Grosser Einstiegsbereich mit Festival-Name,
|
||||
Datum und Call-to-Action.
|
||||
============================================ -->
|
||||
<header class="hero" id="hero">
|
||||
<div class="hero__overlay"></div>
|
||||
<div class="container hero__content">
|
||||
<p class="hero__date">18. – 20. Juli 2026</p>
|
||||
<h1 class="hero__title">Klangwald<br>Festival</h1>
|
||||
<p class="hero__subtitle">Drei Tage Musik, Natur & Gemeinschaft<br>im Herzen der Schweizer Alpen</p>
|
||||
<div class="hero__actions">
|
||||
<a href="#tickets" class="btn btn--primary">Tickets sichern</a>
|
||||
<a href="#lineup" class="btn btn--outline">Line-up entdecken</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Countdown -->
|
||||
<div class="hero__countdown" id="countdown">
|
||||
<div class="countdown__item">
|
||||
<span class="countdown__number" id="countdown-days">--</span>
|
||||
<span class="countdown__label">Tage</span>
|
||||
</div>
|
||||
<div class="countdown__item">
|
||||
<span class="countdown__number" id="countdown-hours">--</span>
|
||||
<span class="countdown__label">Stunden</span>
|
||||
</div>
|
||||
<div class="countdown__item">
|
||||
<span class="countdown__number" id="countdown-minutes">--</span>
|
||||
<span class="countdown__label">Minuten</span>
|
||||
</div>
|
||||
<div class="countdown__item">
|
||||
<span class="countdown__number" id="countdown-seconds">--</span>
|
||||
<span class="countdown__label">Sekunden</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============================================
|
||||
LINE-UP SECTION
|
||||
Übersicht der Künstler/Bands.
|
||||
============================================ -->
|
||||
<section class="section lineup" id="lineup">
|
||||
<div class="container">
|
||||
<h2 class="section__title">Line-up</h2>
|
||||
<p class="section__subtitle">Diese Acts erwarten dich am Klangwald Festival 2026</p>
|
||||
|
||||
<!-- Headliner -->
|
||||
<div class="lineup__tier lineup__tier--headliner">
|
||||
<h3 class="lineup__tier-label">Headliner</h3>
|
||||
<div class="lineup__grid lineup__grid--headliner">
|
||||
<!-- TODO: Echte Künstlerdaten einfügen -->
|
||||
<article class="artist-card artist-card--large">
|
||||
<div class="artist-card__image">
|
||||
<!-- TODO: Bild einfügen -->
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">Künstler*in 1</h4>
|
||||
<p class="artist-card__genre">Electronic / Ambient</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="artist-card artist-card--large">
|
||||
<div class="artist-card__image">
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">Künstler*in 2</h4>
|
||||
<p class="artist-card__genre">Indie Rock</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Acts -->
|
||||
<div class="lineup__tier">
|
||||
<h3 class="lineup__tier-label">Weitere Acts</h3>
|
||||
<div class="lineup__grid">
|
||||
<article class="artist-card">
|
||||
<div class="artist-card__image">
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">Band A</h4>
|
||||
<p class="artist-card__genre">Pop</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="artist-card">
|
||||
<div class="artist-card__image">
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">Band B</h4>
|
||||
<p class="artist-card__genre">Hip-Hop</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="artist-card">
|
||||
<div class="artist-card__image">
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">DJ C</h4>
|
||||
<p class="artist-card__genre">Techno</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="artist-card">
|
||||
<div class="artist-card__image">
|
||||
<div class="artist-card__placeholder">Bild</div>
|
||||
</div>
|
||||
<div class="artist-card__info">
|
||||
<h4 class="artist-card__name">Duo D</h4>
|
||||
<p class="artist-card__genre">Jazz / Funk</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="lineup__more">Weitere Acts werden laufend bekannt gegeben.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
PROGRAMM SECTION
|
||||
Tagesübersicht / Zeitplan.
|
||||
============================================ -->
|
||||
<section class="section programm" id="programm">
|
||||
<div class="container">
|
||||
<h2 class="section__title">Programm</h2>
|
||||
<p class="section__subtitle">Drei Tage voller unvergesslicher Erlebnisse</p>
|
||||
|
||||
<!-- Tag-Auswahl -->
|
||||
<div class="programm__tabs">
|
||||
<button class="programm__tab programm__tab--active" data-day="1">Freitag, 18. Juli</button>
|
||||
<button class="programm__tab" data-day="2">Samstag, 19. Juli</button>
|
||||
<button class="programm__tab" data-day="3">Sonntag, 20. Juli</button>
|
||||
</div>
|
||||
|
||||
<!-- Programm Tag 1 -->
|
||||
<div class="programm__day programm__day--active" id="day-1">
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">16:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Doors Open</h4>
|
||||
<p class="programm__stage">Einlass & Willkommen</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">17:30</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Band A</h4>
|
||||
<p class="programm__stage">Waldbühne</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">19:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">DJ C</h4>
|
||||
<p class="programm__stage">Lichtung Stage</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event programm__event--highlight">
|
||||
<div class="programm__time">21:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Künstler*in 1</h4>
|
||||
<p class="programm__stage">Hauptbühne</p>
|
||||
<span class="programm__badge">Headliner</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">23:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Late Night Session</h4>
|
||||
<p class="programm__stage">Lichtung Stage</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Programm Tag 2 -->
|
||||
<div class="programm__day" id="day-2">
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">14:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Yoga & Sounds</h4>
|
||||
<p class="programm__stage">Waldlichtung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">16:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Duo D</h4>
|
||||
<p class="programm__stage">Waldbühne</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">18:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Band B</h4>
|
||||
<p class="programm__stage">Hauptbühne</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event programm__event--highlight">
|
||||
<div class="programm__time">21:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Künstler*in 2</h4>
|
||||
<p class="programm__stage">Hauptbühne</p>
|
||||
<span class="programm__badge">Headliner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Programm Tag 3 -->
|
||||
<div class="programm__day" id="day-3">
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">12:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Brunch & Akustik</h4>
|
||||
<p class="programm__stage">Waldlichtung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">15:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Offene Jam Session</h4>
|
||||
<p class="programm__stage">Waldbühne</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="programm__event">
|
||||
<div class="programm__time">18:00</div>
|
||||
<div class="programm__details">
|
||||
<h4 class="programm__act">Abschlusskonzert</h4>
|
||||
<p class="programm__stage">Hauptbühne</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
TICKETS SECTION
|
||||
Ticket-Kategorien und Preise.
|
||||
============================================ -->
|
||||
<section class="section tickets" id="tickets">
|
||||
<div class="container">
|
||||
<h2 class="section__title">Tickets</h2>
|
||||
<p class="section__subtitle">Sichere dir jetzt deinen Platz am Klangwald Festival</p>
|
||||
|
||||
<div class="tickets__grid">
|
||||
<!-- Tagespass -->
|
||||
<article class="ticket-card">
|
||||
<h3 class="ticket-card__title">Tagespass</h3>
|
||||
<div class="ticket-card__price">
|
||||
<span class="ticket-card__amount">CHF 69</span>
|
||||
<span class="ticket-card__period">pro Tag</span>
|
||||
</div>
|
||||
<ul class="ticket-card__features">
|
||||
<li>Zugang zu allen Bühnen</li>
|
||||
<li>1 Tag gültig</li>
|
||||
<li>Food-Court Zugang</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn--outline ticket-card__btn">Auswählen</a>
|
||||
</article>
|
||||
|
||||
<!-- 3-Tages-Pass (Featured) -->
|
||||
<article class="ticket-card ticket-card--featured">
|
||||
<div class="ticket-card__badge">Beliebt</div>
|
||||
<h3 class="ticket-card__title">3-Tages-Pass</h3>
|
||||
<div class="ticket-card__price">
|
||||
<span class="ticket-card__amount">CHF 149</span>
|
||||
<span class="ticket-card__period">alle 3 Tage</span>
|
||||
</div>
|
||||
<ul class="ticket-card__features">
|
||||
<li>Zugang zu allen Bühnen</li>
|
||||
<li>Alle 3 Tage gültig</li>
|
||||
<li>Food-Court Zugang</li>
|
||||
<li>Camping inklusive</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn--primary ticket-card__btn">Auswählen</a>
|
||||
</article>
|
||||
|
||||
<!-- VIP -->
|
||||
<article class="ticket-card">
|
||||
<h3 class="ticket-card__title">VIP Pass</h3>
|
||||
<div class="ticket-card__price">
|
||||
<span class="ticket-card__amount">CHF 299</span>
|
||||
<span class="ticket-card__period">alle 3 Tage</span>
|
||||
</div>
|
||||
<ul class="ticket-card__features">
|
||||
<li>Zugang zu allen Bühnen</li>
|
||||
<li>Alle 3 Tage gültig</li>
|
||||
<li>VIP-Lounge & Catering</li>
|
||||
<li>Glamping inklusive</li>
|
||||
<li>Meet & Greet</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn--outline ticket-card__btn">Auswählen</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
INFO SECTION
|
||||
Anreise, FAQ und praktische Infos.
|
||||
============================================ -->
|
||||
<section class="section info" id="info">
|
||||
<div class="container">
|
||||
<h2 class="section__title">Info</h2>
|
||||
<p class="section__subtitle">Alles was du für dein Festival-Erlebnis wissen musst</p>
|
||||
|
||||
<div class="info__grid">
|
||||
<!-- Anreise -->
|
||||
<div class="info__card">
|
||||
<div class="info__icon">
|
||||
<!-- TODO: Icon einfügen (z.B. SVG oder Icon-Font) -->
|
||||
<span class="info__icon-placeholder">📍</span>
|
||||
</div>
|
||||
<h3 class="info__card-title">Anreise</h3>
|
||||
<p class="info__card-text">
|
||||
Das Festival findet auf der Waldlichtung oberhalb von Chur statt.
|
||||
Shuttle-Busse verkehren ab Bahnhof Chur alle 30 Minuten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Camping -->
|
||||
<div class="info__card">
|
||||
<div class="info__icon">
|
||||
<span class="info__icon-placeholder">⛺</span>
|
||||
</div>
|
||||
<h3 class="info__card-title">Camping</h3>
|
||||
<p class="info__card-text">
|
||||
Der Campingplatz öffnet am Freitag um 10:00 Uhr.
|
||||
Duschen und Sanitäranlagen sind vorhanden. Glamping-Zelte können dazu gebucht werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Nachhaltigkeit -->
|
||||
<div class="info__card">
|
||||
<div class="info__icon">
|
||||
<span class="info__icon-placeholder">🌱</span>
|
||||
</div>
|
||||
<h3 class="info__card-title">Nachhaltigkeit</h3>
|
||||
<p class="info__card-text">
|
||||
Klangwald ist ein klimaneutrales Festival. Wir setzen auf
|
||||
Mehrwegbecher, regionale Verpflegung und erneuerbare Energien.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- FAQ -->
|
||||
<div class="info__card">
|
||||
<div class="info__icon">
|
||||
<span class="info__icon-placeholder">❓</span>
|
||||
</div>
|
||||
<h3 class="info__card-title">FAQ</h3>
|
||||
<p class="info__card-text">
|
||||
Häufig gestellte Fragen zu Tickets, Anreise,
|
||||
Barrierefreiheit und mehr findest du in unseren FAQ.
|
||||
</p>
|
||||
<a href="#" class="info__link">Zu den FAQ →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
NEWSLETTER SECTION
|
||||
E-Mail Anmeldung.
|
||||
============================================ -->
|
||||
<section class="section newsletter" id="newsletter">
|
||||
<div class="container newsletter__inner">
|
||||
<h2 class="newsletter__title">Bleib auf dem Laufenden</h2>
|
||||
<p class="newsletter__text">Erhalte News zu Line-up, Tickets und Specials direkt in dein Postfach.</p>
|
||||
<form class="newsletter__form" id="newsletter-form">
|
||||
<input
|
||||
type="email"
|
||||
class="newsletter__input"
|
||||
placeholder="Deine E-Mail-Adresse"
|
||||
aria-label="E-Mail-Adresse"
|
||||
required
|
||||
>
|
||||
<button type="submit" class="btn btn--primary newsletter__btn">Anmelden</button>
|
||||
</form>
|
||||
<p class="newsletter__hint">Kein Spam. Jederzeit abmeldbar.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================
|
||||
FOOTER
|
||||
============================================ -->
|
||||
<footer class="footer">
|
||||
<div class="container footer__inner">
|
||||
<div class="footer__brand">
|
||||
<a href="#" class="footer__logo">KLANGWALD</a>
|
||||
<p class="footer__tagline">Musik. Natur. Gemeinschaft.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer__links">
|
||||
<div class="footer__column">
|
||||
<h4 class="footer__heading">Festival</h4>
|
||||
<ul>
|
||||
<li><a href="#lineup">Line-up</a></li>
|
||||
<li><a href="#programm">Programm</a></li>
|
||||
<li><a href="#tickets">Tickets</a></li>
|
||||
<li><a href="#info">Info</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__column">
|
||||
<h4 class="footer__heading">Rechtliches</h4>
|
||||
<ul>
|
||||
<li><a href="#">Impressum</a></li>
|
||||
<li><a href="#">Datenschutz</a></li>
|
||||
<li><a href="#">AGB</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__column">
|
||||
<h4 class="footer__heading">Social Media</h4>
|
||||
<ul>
|
||||
<li><a href="#" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="#" target="_blank" rel="noopener">TikTok</a></li>
|
||||
<li><a href="#" target="_blank" rel="noopener">YouTube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer__bottom">
|
||||
<p>© 2026 Klangwald Festival. Ein Projekt der FHGR.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,7 +4,8 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>UXplore</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
60
relume-test/package-lock.json
generated
60
relume-test/package-lock.json
generated
@ -14,7 +14,8 @@
|
||||
"framer-motion": "^12.38.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.6.0"
|
||||
"react-icons": "^5.6.0",
|
||||
"react-router-dom": "^7.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
@ -5632,6 +5633,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -10049,6 +10063,44 @@
|
||||
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
|
||||
"integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
|
||||
"integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.14.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-style-singleton": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||
@ -10322,6 +10374,12 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/set-function-length": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"framer-motion": "^12.38.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.6.0"
|
||||
"react-icons": "^5.6.0",
|
||||
"react-router-dom": "^7.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Home from "./pages/Home";
|
||||
|
||||
function App() {
|
||||
return <Home />;
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
BIN
relume-test/src/assets/Header.png
Normal file
BIN
relume-test/src/assets/Header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
relume-test/src/assets/Logo.png
Normal file
BIN
relume-test/src/assets/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
relume-test/src/assets/content-header.png
Normal file
BIN
relume-test/src/assets/content-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
BIN
relume-test/src/assets/logo-footer.png
Normal file
BIN
relume-test/src/assets/logo-footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
relume-test/src/assets/speaker1.png
Normal file
BIN
relume-test/src/assets/speaker1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
relume-test/src/assets/speaker2.png
Normal file
BIN
relume-test/src/assets/speaker2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
relume-test/src/assets/speaker3.png
Normal file
BIN
relume-test/src/assets/speaker3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
relume-test/src/assets/workshop1.png
Normal file
BIN
relume-test/src/assets/workshop1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
relume-test/src/assets/workshop2.png
Normal file
BIN
relume-test/src/assets/workshop2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
relume-test/src/assets/workshop3.png
Normal file
BIN
relume-test/src/assets/workshop3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
99
relume-test/src/components/Content11.tsx
Normal file
99
relume-test/src/components/Content11.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import contentImage from "../assets/content-header.png";
|
||||
import { Dialog, DialogTrigger, DialogContent } from "@relume_io/relume-ui";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { CgSpinner } from "react-icons/cg";
|
||||
import { FaCirclePlay } from "react-icons/fa6";
|
||||
|
||||
type ImageProps = {
|
||||
src: string;
|
||||
alt?: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
heading: string;
|
||||
children: React.ReactNode;
|
||||
image: ImageProps;
|
||||
video: string;
|
||||
};
|
||||
|
||||
export type Content11Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
|
||||
|
||||
export const Content11 = (props: Content11Props) => {
|
||||
const { heading, children, image, video } = {
|
||||
...Content11Defaults,
|
||||
...props,
|
||||
};
|
||||
|
||||
const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
||||
<div className="container">
|
||||
<div className="mb-12 md:mb-18 lg:mb-20">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="relative flex w-full items-center justify-center">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="aspect-video size-full object-cover"
|
||||
/>
|
||||
<span className="absolute inset-0 z-10 bg-black/50" />
|
||||
<FaCirclePlay className="absolute z-20 size-16 text-white" />
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
{!isIframeLoaded && <CgSpinner className="mx-auto size-16 animate-spin text-white" />}
|
||||
<iframe
|
||||
className={clsx(
|
||||
"z-0 mx-auto aspect-video h-full w-full md:w-[738px] lg:w-[940px]",
|
||||
{
|
||||
visible: isIframeLoaded,
|
||||
hidden: !isIframeLoaded,
|
||||
},
|
||||
)}
|
||||
src={video}
|
||||
allow="autoplay; encrypted-media; picture-in-picture"
|
||||
allowFullScreen
|
||||
onLoad={() => setIsIframeLoaded(true)}
|
||||
></iframe>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<div className="mx-auto max-w-lg">
|
||||
<h2 className="mb-5 text-5xl font-bold text-acid-lime md:mb-6 md:text-7xl lg:text-8xl">{heading}</h2>
|
||||
<div className="prose">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const Content11Defaults: Props = {
|
||||
heading: "UXPLORE 2026: Gestalte, was die Welt bewegt.",
|
||||
children: (
|
||||
<React.Fragment>
|
||||
<p className="text-cloud-white text-[18px] leading-[1.5] mb-4">
|
||||
UXPLORE bringt Designer, Researcher und Produktstrategen in Zürich zusammen. Wir konzentrieren uns auf die Realität unserer täglichen Arbeit: fundierte Methoden, ehrliche Einblicke in komplexe Projekte und der direkte Austausch unter Fachleuten.
|
||||
</p>
|
||||
<p className="text-cloud-white text-[18px] leading-[1.5] mb-4">
|
||||
Es geht um die Themen, die uns heute fordern – von effektiven Design-Systemen bis hin zu strategischem Research und nachhaltiger Produktentwicklung.
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-cloud-white text-[18px] leading-[1.5] mb-4 flex flex-col gap-2">
|
||||
<li><span className="font-semibold">Insights: </span>Erfahre, wie führende Teams Herausforderungen in Design und Strategie lösen.</li>
|
||||
<li><span className="font-semibold">Community: </span>Vernetze dich mit Menschen, die vor den gleichen Aufgaben stehen wie du.</li>
|
||||
<li><span className="font-semibold">Relevanz: </span>Nimm Ansätze mit, die dein Handwerk und deine Prozesse stärken.</li>
|
||||
</ul>
|
||||
<p className="text-cloud-white text-[18px] leading-[1.5]">
|
||||
Komm nach Zürich. Lass uns gemeinsam besser gestalten.
|
||||
</p>
|
||||
</React.Fragment>
|
||||
),
|
||||
video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
|
||||
image: {
|
||||
src: contentImage,
|
||||
alt: "UXplore venue",
|
||||
},
|
||||
};
|
||||
@ -28,12 +28,12 @@ export const Cta30 = (props: Cta30Props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28">
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
|
||||
<div className="container relative z-10 max-w-lg text-center">
|
||||
<h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl">
|
||||
<h2 className="rb-5 mb-5 text-5xl font-bold text-neutral-dark md:mb-6 md:text-7xl lg:text-8xl">
|
||||
{heading}
|
||||
</h2>
|
||||
<p className="text-text-alternative md:text-md">{description}</p>
|
||||
<p className="text-neutral-dark md:text-md">{description}</p>
|
||||
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
|
||||
<form
|
||||
className="rb-4 mb-4 grid max-w-sm grid-cols-1 gap-y-3 sm:grid-cols-[1fr_max-content] sm:gap-4"
|
||||
@ -46,34 +46,28 @@ export const Cta30 = (props: Cta30Props) => {
|
||||
value={emailInput}
|
||||
onChange={(e) => setEmailInput(e.target.value)}
|
||||
/>
|
||||
<Button {...button} className="items-center justify-center px-6 py-3">
|
||||
<Button {...button} className="items-center justify-center px-6 py-3 bg-electric-green text-cloud-white rounded-2xl border-acid-lime font-semibold">
|
||||
{button.title}
|
||||
</Button>
|
||||
</form>
|
||||
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<video className="absolute inset-0 aspect-video size-full object-cover" autoPlay loop muted>
|
||||
<source src={video} type={videoType} />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-black/50" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const Cta30Defaults: Props = {
|
||||
heading: "Medium length heading goes here",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
||||
heading: "Stay tuned!",
|
||||
description: "Bleib' auf dem Laufenden und erfahre alles rund um die UXplore sowie weitere spannende Themen.",
|
||||
inputPlaceholder: "Enter your email",
|
||||
button: { title: "Sign up", variant: "primary", size: "sm" },
|
||||
button: { title: "Sign Up", variant: "primary", size: "sm" },
|
||||
termsAndConditions: `
|
||||
<p class='text-xs text-text-alternative'>
|
||||
<p class='text-xs text-neutral-dark text-center'>
|
||||
By clicking Sign Up you're confirming that you agree with our
|
||||
<a href='#' class='underline'>Terms and Conditions</a>.
|
||||
</p>
|
||||
`,
|
||||
video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4",
|
||||
videoType: "video/mp4",
|
||||
video: "",
|
||||
videoType: "",
|
||||
};
|
||||
@ -1,8 +1,11 @@
|
||||
import speaker1 from "../assets/speaker1.png";
|
||||
import speaker2 from "../assets/speaker2.png";
|
||||
import speaker3 from "../assets/speaker3.png";
|
||||
import * as React from "react";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
import { RxChevronRight } from "react-icons/rx";
|
||||
import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
||||
//import { RxChevronRight } from "react-icons/rx";
|
||||
//import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
||||
|
||||
type ImageProps = {
|
||||
src: string;
|
||||
@ -43,12 +46,12 @@ export const Event17 = (props: Event17Props) => {
|
||||
...props,
|
||||
};
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
||||
<div className="container">
|
||||
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
||||
<h4 className="font-semibold">{tagline}</h4>
|
||||
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1>
|
||||
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
|
||||
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl text-acid-lime">{heading}</h1>
|
||||
<p className="mt-5 text-base md:mt-6 md:text-md text-cloud-white whitespace-pre-wrap">{description}</p>
|
||||
</div>
|
||||
<div className="grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
|
||||
{featuredEvents.map((event, index) => (
|
||||
@ -56,7 +59,7 @@ export const Event17 = (props: Event17Props) => {
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
|
||||
<Button {...button}>{button.title}</Button>
|
||||
<Button {...button} className="bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">{button.title}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -64,83 +67,41 @@ export const Event17 = (props: Event17Props) => {
|
||||
};
|
||||
|
||||
const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
url, image, date, category, title, location, description, button,
|
||||
url, image, title
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<a href={url} className="relative block aspect-[3/2] w-full">
|
||||
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
||||
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
|
||||
{category}
|
||||
</span>
|
||||
</a>
|
||||
<div className="mt-5 flex flex-col items-start md:mt-6">
|
||||
<div className="mb-3 flex flex-wrap gap-4 text-sm md:mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<BiCalendarAlt className="size-6 flex-none" />
|
||||
{date.weekday} {date.day} {date.month} {date.year}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<BiMap className="size-6 flex-none" />
|
||||
<span>{location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href={url} className="mb-2">
|
||||
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
|
||||
</a>
|
||||
<p>{description}</p>
|
||||
<Button {...button} className="mt-5 md:mt-6">
|
||||
{button.title}
|
||||
</Button>
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-cloud-white">{title}</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Event17Defaults: Props = {
|
||||
tagline: "Tagline",
|
||||
heading: "Events",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||
tagline: "",
|
||||
heading: "Speaker:innen",
|
||||
description: "Überwältigt von unserem Programm?\nLerne unsere diesjährigen Speakerinnen und Speaker kennen.",
|
||||
button: { variant: "primary", size: "primary", title: "Zu den Speakern" },
|
||||
featuredEvents: [
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 1",
|
||||
},
|
||||
date: { weekday: "Fri", day: "09", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
url: "/speaker", image: { src: speaker1, alt: "Dr. Elena Rossi" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Dr. Elena Rossi", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 2",
|
||||
},
|
||||
date: { weekday: "Sat", day: "10", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
url: "/speaker", image: { src: speaker2, alt: "Jens Riegelberger" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Jens Riegelberger", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 3",
|
||||
},
|
||||
date: { weekday: "Sun", day: "11", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
url: "/speaker", image: { src: speaker3, alt: "Reto Gwerder" },
|
||||
date: { weekday: "", day: "", month: "", year: "" },
|
||||
category: "", title: "Reto Gwerder", location: "", description: "",
|
||||
button: { title: "", variant: "link", size: "link" },
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,3 +1,6 @@
|
||||
import workshop1 from "../assets/workshop1.png";
|
||||
import workshop2 from "../assets/workshop2.png";
|
||||
import workshop3 from "../assets/workshop3.png";
|
||||
import * as React from "react";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
@ -43,15 +46,15 @@ export const Event20 = (props: Event20Props) => {
|
||||
...props,
|
||||
};
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
||||
<div className="container">
|
||||
<div className="mb-12 grid auto-cols-fr grid-cols-1 items-end gap-12 md:mb-18 md:grid-cols-[1fr_max-content] lg:mb-20 lg:gap-20">
|
||||
<div className="max-w-lg">
|
||||
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
||||
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
|
||||
<p className="md:text-md">{description}</p>
|
||||
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl text-cloud-white">{heading}</h1>
|
||||
<p className="md:text-md text-cloud-white">{description}</p>
|
||||
</div>
|
||||
<Button {...button} className="hidden md:flex">
|
||||
<Button {...button} className="hidden md:flex bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">
|
||||
{button.title}
|
||||
</Button>
|
||||
</div>
|
||||
@ -72,11 +75,11 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
url, image, date, category, title, location, description, button,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col items-start border border-border-primary">
|
||||
<div className="flex flex-col items-start border border-electric-violet bg-cloud-white">
|
||||
<a href={url} className="relative block aspect-[3/2] w-full">
|
||||
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
||||
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
|
||||
{category}
|
||||
<span className="absolute right-4 top-4 bg-electric-violet text-cloud-white px-2 py-1 text-sm font-semibold rounded-lg">
|
||||
{category}
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex flex-col items-start p-6">
|
||||
@ -91,59 +94,44 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||
</div>
|
||||
</div>
|
||||
<a href={url} className="mb-2">
|
||||
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
|
||||
<h2 className="text-xl font-bold md:text-2xl text-neutral-dark">{title}</h2>
|
||||
</a>
|
||||
<p>{description}</p>
|
||||
<Button {...button} className="mt-5 md:mt-6">
|
||||
{button.title}
|
||||
</Button>
|
||||
<a href={url} className="mt-5 md:mt-6 flex items-center gap-2 text-electric-violet font-semibold text-base">
|
||||
{button.title} <RxChevronRight />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Event20Defaults: Props = {
|
||||
tagline: "Tagline",
|
||||
heading: "Events",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||
tagline: "",
|
||||
heading: "Workshops",
|
||||
description: "Hands-on, Skills statt Theorie. Lerne Methoden und Workflows direkt von Experten aus der Industrie.",
|
||||
button: { variant: "primary", size: "primary", title: "View all" },
|
||||
featuredEvents: [
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 1",
|
||||
},
|
||||
date: { weekday: "Fri", day: "09", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop1, alt: "Research Repositories" },
|
||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
||||
category: "Research", title: "Research Repositories", location: "Location",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 2",
|
||||
},
|
||||
date: { weekday: "Sat", day: "10", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop2, alt: "The future of Tokens" },
|
||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
||||
category: "Design / UX", title: "The future of Tokens", location: "Location",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
},
|
||||
{
|
||||
url: "#",
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||
alt: "Relume placeholder image 3",
|
||||
},
|
||||
date: { weekday: "Sun", day: "11", month: "Feb", year: "2024" },
|
||||
category: "Category",
|
||||
title: "Event title heading",
|
||||
location: "Location",
|
||||
url: "/programm",
|
||||
image: { src: workshop3, alt: "Trust in AI" },
|
||||
date: { weekday: "Sun", day: "26", month: "Jun", year: "2026" },
|
||||
category: "AI & Future", title: "Trust in AI", location: "Hall 101",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||
},
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import LogoFooter from "../assets/logo-footer.png";
|
||||
import { FaXTwitter } from "react-icons/fa6";
|
||||
import {
|
||||
BiLogoFacebookCircle,
|
||||
@ -55,7 +56,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
...props,
|
||||
};
|
||||
return (
|
||||
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20">
|
||||
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20 bg-cloud-white font-barlow">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20">
|
||||
<div>
|
||||
@ -66,12 +67,12 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
</div>
|
||||
<div className="rb-6 mb-6 md:mb-8">
|
||||
<div>
|
||||
<p className="mb-1 text-sm font-semibold">{address.label}</p>
|
||||
<p className="mb-5 text-sm md:mb-6">{address.value}</p>
|
||||
<p className="mb-1 text-sm font-semibold text-neutral-dark">{address.label}</p>
|
||||
<p className="mb-5 text-sm md:mb-6 text-neutral-dark">{address.value}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-sm font-semibold">{contact.label}</p>
|
||||
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6">
|
||||
<p className="mb-1 text-sm font-semibold text-neutral-dark">{contact.label}</p>
|
||||
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6 text-neutral-dark">
|
||||
<a href={`tel:${contact.phone}`}>{contact.phone}</a>
|
||||
<a href={`mailto:${contact.email}`}>{contact.email}</a>
|
||||
</p>
|
||||
@ -89,7 +90,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
{columnLinks.map((column, index) => (
|
||||
<ul key={index}>
|
||||
{column.links.map((link, linkIndex) => (
|
||||
<li key={linkIndex} className="py-2 text-sm font-semibold">
|
||||
<li key={linkIndex} className="py-2 text-sm font-semibold text-neutral-dark">
|
||||
<a href={link.url}>{link.title}</a>
|
||||
</li>
|
||||
))}
|
||||
@ -97,7 +98,7 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-px w-full bg-black" />
|
||||
<div className="h-px w-full bg-electric-green" />
|
||||
<div className="flex flex-col-reverse items-start justify-between pb-4 pt-6 text-sm md:flex-row md:items-center md:pb-0 md:pt-8">
|
||||
<p className="mt-8 md:mt-0">{footerText}</p>
|
||||
<ul className="grid grid-flow-row grid-cols-[max-content] justify-center gap-y-4 text-sm md:grid-flow-col md:gap-x-6 md:gap-y-0">
|
||||
@ -115,50 +116,42 @@ export const Footer3 = (props: Footer3Props) => {
|
||||
|
||||
export const Footer3Defaults: Props = {
|
||||
logo: {
|
||||
url: "#",
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||
alt: "Logo image",
|
||||
url: "/",
|
||||
src: LogoFooter,
|
||||
alt: "UXplore Logo",
|
||||
},
|
||||
address: {
|
||||
label: "Address:",
|
||||
value: "Level 1, 12 Sample St, Sydney NSW 2000",
|
||||
value: "Strasse Nr.\nPLZ Ort",
|
||||
},
|
||||
contact: {
|
||||
label: "Contact:",
|
||||
phone: "1800 123 4567",
|
||||
email: "info@relume.io",
|
||||
label: "Kontakt:",
|
||||
phone: "079 123 45 67",
|
||||
email: "kontakt@uxplore.com",
|
||||
},
|
||||
columnLinks: [
|
||||
{
|
||||
links: [
|
||||
{ title: "Link One", url: "#" },
|
||||
{ title: "Link Two", url: "#" },
|
||||
{ title: "Link Three", url: "#" },
|
||||
{ title: "Link Four", url: "#" },
|
||||
{ title: "Link Five", url: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
links: [
|
||||
{ title: "Link Six", url: "#" },
|
||||
{ title: "Link Seven", url: "#" },
|
||||
{ title: "Link Eight", url: "#" },
|
||||
{ title: "Link Nine", url: "#" },
|
||||
{ title: "Link Ten", url: "#" },
|
||||
{ title: "Programm", url: "/programm" },
|
||||
{ title: "Speaker", url: "/speaker" },
|
||||
{ title: "Location", url: "/location" },
|
||||
{ title: "Tickets", url: "#tickets" },
|
||||
{ title: "FAQ", url: "#faq" },
|
||||
],
|
||||
},
|
||||
{ links: [] },
|
||||
],
|
||||
socialMediaLinks: [
|
||||
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoInstagram className="size-6" /> },
|
||||
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
|
||||
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoYoutube className="size-6" /> },
|
||||
{ url: "#", icon: <BiLogoFacebookCircle className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoInstagram className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6 text-neutral-dark" /> },
|
||||
{ url: "#", icon: <BiLogoYoutube className="size-6 text-neutral-dark" /> },
|
||||
],
|
||||
footerText: "© 2024 Relume. All rights reserved.",
|
||||
footerText: "© 2026 UXplore",
|
||||
footerLinks: [
|
||||
{ title: "Privacy Policy", url: "#" },
|
||||
{ title: "Terms of Service", url: "#" },
|
||||
{ title: "Cookies Settings", url: "#" },
|
||||
{ title: "AGB", url: "#" },
|
||||
{ title: "Datenschutz", url: "#" },
|
||||
{ title: "Cookie Einstellungen", url: "#" },
|
||||
],
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
import headerImage from "../assets/Header.png";
|
||||
import { Button } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
|
||||
@ -21,12 +22,12 @@ export const Header1 = (props: Header1Props) => {
|
||||
...props,
|
||||
};
|
||||
return (
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
||||
<div className="container">
|
||||
<div className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">
|
||||
<div>
|
||||
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>
|
||||
<p className="md:text-md">{description}</p>
|
||||
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl text-acid-lime whitespace-pre-wrap">{heading}</h1>
|
||||
<p className="text-[48px] font-bold leading-[1.2] text-cloud-white whitespace-pre-wrap">{description}</p>
|
||||
<div className="mt-6 flex flex-wrap gap-4 md:mt-8">
|
||||
{buttons.map((button, index) => (
|
||||
<Button key={index} {...button}>
|
||||
@ -45,12 +46,12 @@ export const Header1 = (props: Header1Props) => {
|
||||
};
|
||||
|
||||
export const Header1Defaults: Props = {
|
||||
heading: "Medium length hero heading goes here",
|
||||
heading: "UXplore Konferenz 2026",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
|
||||
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
|
||||
"25-26 Juni Zürich",
|
||||
buttons: [],
|
||||
image: {
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||
alt: "Relume placeholder image",
|
||||
src: headerImage,
|
||||
alt: "UXplore Konferenz 2026",
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import logo from "../assets/Logo.png";
|
||||
import { useState } from "react";
|
||||
import { Button, useMediaQuery } from "@relume_io/relume-ui";
|
||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||
@ -35,7 +36,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
return (
|
||||
<section
|
||||
id="relume"
|
||||
className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18"
|
||||
className="z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-neutral-dark bg-tech-navy px-[5%] md:min-h-18 font-barlow"
|
||||
>
|
||||
<button
|
||||
className="flex size-12 flex-col justify-center lg:hidden"
|
||||
@ -44,7 +45,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
{Array(3)
|
||||
.fill(null)
|
||||
.map((_, index) => (
|
||||
<span key={index} className="my-[3px] h-0.5 w-6 bg-black lg:hidden" />
|
||||
<span key={index} className="my-[3px] h-0.5 w-6 bg-cloud-white lg:hidden" />
|
||||
))}
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
@ -68,7 +69,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
transition: { type: "spring", duration: 0.4, bounce: 0 },
|
||||
},
|
||||
}}
|
||||
className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]"
|
||||
className="absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-tech-navy px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]"
|
||||
>
|
||||
<a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
|
||||
<img src={logo.src} alt={logo.alt} />
|
||||
@ -80,7 +81,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
) : (
|
||||
<a
|
||||
href={navLink.url}
|
||||
className="relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base"
|
||||
className="relative block py-3 text-md text-cloud-white lg:px-4 lg:py-2 lg:text-base"
|
||||
>
|
||||
{navLink.title}
|
||||
</a>
|
||||
@ -112,7 +113,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
||||
<div className="flex min-h-16 items-center justify-end gap-x-4">
|
||||
<div>
|
||||
{buttons.map((button, index) => (
|
||||
<Button key={index} {...button} className="px-4 py-1 md:px-6 md:py-2">
|
||||
<Button key={index} {...button} className="px-5 py-2 bg-electric-violet text-cloud-white rounded-2xl border-electric-violet font-barlow font-semibold">
|
||||
{button.title}
|
||||
</Button>
|
||||
))}
|
||||
@ -186,27 +187,20 @@ const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean })
|
||||
|
||||
export const Navbar3Defaults: Props = {
|
||||
logo: {
|
||||
url: "#",
|
||||
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||
alt: "Logo image",
|
||||
url: "/",
|
||||
src: logo,
|
||||
alt: "UXplore Logo",
|
||||
},
|
||||
navLinks: [
|
||||
{ title: "Link One", url: "#" },
|
||||
{ title: "Link Two", url: "#" },
|
||||
{
|
||||
title: "Link Three",
|
||||
url: "#",
|
||||
subMenuLinks: [
|
||||
{ title: "Link Four", url: "#" },
|
||||
{ title: "Link Five", url: "#" },
|
||||
{ title: "Link Six", url: "#" },
|
||||
],
|
||||
},
|
||||
{ title: "Programm", url: "/programm" },
|
||||
{ title: "Speaker", url: "/speaker" },
|
||||
{ title: "Location", url: "/location" },
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: "Button",
|
||||
title: "Tickets",
|
||||
size: "sm",
|
||||
variant: "primary",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
5
relume-test/src/declarations.d.ts
vendored
Normal file
5
relume-test/src/declarations.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module "*.png";
|
||||
declare module "*.jpg";
|
||||
declare module "*.jpeg";
|
||||
declare module "*.svg";
|
||||
declare module "*.webp";
|
||||
@ -1,3 +1,23 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-scheme-1-background: #f8fafc;
|
||||
--color-scheme-1-text: #f8fafc;
|
||||
--color-scheme-1-accent: #895af6;
|
||||
--color-scheme-1-border: #895af6;
|
||||
--color-tech-navy: #1d283a;
|
||||
--color-acid-lime: #cfff24;
|
||||
--color-electric-violet: #895af6;
|
||||
--color-electric-green: #00d949;
|
||||
--color-cloud-white: #f8fafc;
|
||||
--color-neutral-dark: #283c5e;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1d283a;
|
||||
font-family: "Barlow", sans-serif;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
@ -1,11 +1,9 @@
|
||||
import { Navbar3 } from "../components/Navbar";
|
||||
import { Header1 } from "../components/Header";
|
||||
import { Content11 } from "../components/Content11";
|
||||
import { Event17 } from "../components/Event17";
|
||||
import { Gallery19 } from "../components/Gallery19";
|
||||
import { Cta30 } from "../components/Cta30";
|
||||
import { Event20 } from "../components/Event20";
|
||||
import { Pricing18 } from "../components/Pricing18";
|
||||
import { Faq10 } from "../components/Faq10";
|
||||
import { Cta30 } from "../components/Cta30";
|
||||
import { Footer3 } from "../components/Footer";
|
||||
|
||||
export const Home = () => {
|
||||
@ -13,12 +11,10 @@ export const Home = () => {
|
||||
<div>
|
||||
<Navbar3 />
|
||||
<Header1 />
|
||||
<Content11 />
|
||||
<Event17 />
|
||||
<Gallery19 />
|
||||
<Cta30 />
|
||||
<Event20 />
|
||||
<Pricing18 />
|
||||
<Faq10 />
|
||||
<Cta30 />
|
||||
<Footer3 />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,7 +9,19 @@ export default {
|
||||
],
|
||||
presets: [relumetailwind],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
"tech-navy": "#1d283a",
|
||||
"acid-lime": "#cfff24",
|
||||
"electric-violet": "#895af6",
|
||||
"electric-green": "#00d949",
|
||||
"cloud-white": "#f8fafc",
|
||||
"neutral-dark": "#283c5e",
|
||||
},
|
||||
fontFamily: {
|
||||
barlow: ["Barlow", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
989
style.css
989
style.css
@ -1,989 +0,0 @@
|
||||
/* ===========================================
|
||||
KLANGWALD FESTIVAL – Stylesheet
|
||||
===========================================
|
||||
Inhaltsverzeichnis:
|
||||
1. CSS Custom Properties (Variablen)
|
||||
2. Reset & Basis-Styles
|
||||
3. Typografie
|
||||
4. Layout-Utilities
|
||||
5. Buttons
|
||||
6. Navigation
|
||||
7. Hero Section
|
||||
8. Line-up Section
|
||||
9. Programm Section
|
||||
10. Tickets Section
|
||||
11. Info Section
|
||||
12. Newsletter Section
|
||||
13. Footer
|
||||
14. Animationen
|
||||
15. Media Queries (Responsive)
|
||||
=========================================== */
|
||||
|
||||
/* ===========================================
|
||||
1. CSS CUSTOM PROPERTIES
|
||||
Hier können Farben, Schriftarten und Abstände
|
||||
zentral angepasst werden.
|
||||
=========================================== */
|
||||
:root {
|
||||
/* Farben */
|
||||
--color-primary: #6C3CE1; /* Violett – Hauptfarbe */
|
||||
--color-primary-light: #8B5CF6;
|
||||
--color-primary-dark: #4C1D95;
|
||||
--color-accent: #F59E0B; /* Gold – Akzentfarbe */
|
||||
--color-accent-light: #FBBF24;
|
||||
|
||||
--color-bg: #0F0F14; /* Dunkler Hintergrund */
|
||||
--color-bg-light: #1A1A24; /* Etwas hellerer Hintergrund */
|
||||
--color-bg-card: #222233; /* Karten-Hintergrund */
|
||||
|
||||
--color-text: #E8E8F0; /* Haupttext */
|
||||
--color-text-muted: #9999AA; /* Gedämpfter Text */
|
||||
--color-text-heading: #FFFFFF; /* Überschriften */
|
||||
|
||||
--color-border: #333344; /* Rahmenfarbe */
|
||||
|
||||
/* Schriftarten */
|
||||
--font-heading: 'Space Grotesk', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
|
||||
/* Abstände */
|
||||
--spacing-xs: 0.5rem; /* 8px */
|
||||
--spacing-sm: 1rem; /* 16px */
|
||||
--spacing-md: 1.5rem; /* 24px */
|
||||
--spacing-lg: 2.5rem; /* 40px */
|
||||
--spacing-xl: 4rem; /* 64px */
|
||||
--spacing-2xl: 6rem; /* 96px */
|
||||
|
||||
/* Rundungen */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Schatten */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
|
||||
--shadow-glow: 0 0 30px rgba(108, 60, 225, 0.3);
|
||||
|
||||
/* Übergänge */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 300ms ease;
|
||||
--transition-slow: 500ms ease;
|
||||
|
||||
/* Container */
|
||||
--container-max: 1200px;
|
||||
--container-padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
2. RESET & BASIS-STYLES
|
||||
=========================================== */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary-light);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
3. TYPOGRAFIE
|
||||
=========================================== */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--color-text-heading);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.section__subtitle {
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
4. LAYOUT-UTILITIES
|
||||
=========================================== */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container-max);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--container-padding);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
5. BUTTONS
|
||||
=========================================== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.85rem 2rem;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-full);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
text-decoration: none;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
|
||||
box-shadow: var(--shadow-glow);
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
background: transparent;
|
||||
color: var(--color-text-heading);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn--outline:hover {
|
||||
border-color: var(--color-primary-light);
|
||||
color: var(--color-primary-light);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
6. NAVIGATION
|
||||
=========================================== */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
padding: 1rem 0;
|
||||
transition: background-color var(--transition-base), padding var(--transition-base);
|
||||
}
|
||||
|
||||
.navbar--scrolled {
|
||||
background-color: rgba(15, 15, 20, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.6rem 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.navbar__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-heading);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.navbar__logo:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.navbar__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.navbar__link:hover {
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.navbar__link--cta {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
padding: 0.5rem 1.2rem;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.navbar__link--cta:hover {
|
||||
background: var(--color-primary-light);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Hamburger Toggle */
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar__toggle-bar {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: var(--color-text-heading);
|
||||
border-radius: 2px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
7. HERO SECTION
|
||||
=========================================== */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
/* TODO: Hintergrundbild hier einfügen */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-bg) 0%,
|
||||
var(--color-primary-dark) 50%,
|
||||
var(--color-bg) 100%
|
||||
);
|
||||
/* Falls ein Bild verwendet wird:
|
||||
background-image: url('../img/hero-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
*/
|
||||
}
|
||||
|
||||
.hero__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(108, 60, 225, 0.15) 0%,
|
||||
rgba(15, 15, 20, 0.8) 70%
|
||||
);
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero__date {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-accent);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
font-size: clamp(3rem, 10vw, 8rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(180deg, #fff 40%, var(--color-primary-light) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero__subtitle {
|
||||
font-size: clamp(1rem, 2.5vw, 1.3rem);
|
||||
color: var(--color-text-muted);
|
||||
max-width: 500px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Countdown */
|
||||
.hero__countdown {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.countdown__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.countdown__number {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.countdown__label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
8. LINE-UP SECTION
|
||||
=========================================== */
|
||||
.lineup {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.lineup__tier {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.lineup__tier-label {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lineup__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.lineup__grid--headliner {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.artist-card__image {
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.artist-card--large .artist-card__image {
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.artist-card__placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-card));
|
||||
}
|
||||
|
||||
.artist-card__info {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.artist-card__name {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.artist-card__genre {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.lineup__more {
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
9. PROGRAMM SECTION
|
||||
=========================================== */
|
||||
.programm {
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.programm__tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.programm__tab {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.programm__tab:hover {
|
||||
border-color: var(--color-primary-light);
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.programm__tab--active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Tages-Container */
|
||||
.programm__day {
|
||||
display: none;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.programm__day--active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.programm__event {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.programm__event:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.programm__event--highlight {
|
||||
background: rgba(108, 60, 225, 0.1);
|
||||
margin: 0 calc(var(--spacing-sm) * -1);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.programm__time {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent);
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.programm__act {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.programm__stage {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.programm__badge {
|
||||
display: inline-block;
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.2rem 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: var(--radius-full);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
10. TICKETS SECTION
|
||||
=========================================== */
|
||||
.tickets {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.tickets__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.ticket-card {
|
||||
position: relative;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.ticket-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.ticket-card--featured {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.ticket-card--featured:hover {
|
||||
transform: scale(1.03) translateY(-4px);
|
||||
}
|
||||
|
||||
.ticket-card__badge {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: var(--radius-full);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.ticket-card__title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.ticket-card__price {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.ticket-card__amount {
|
||||
display: block;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.ticket-card__period {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.ticket-card__features {
|
||||
text-align: left;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.ticket-card__features li {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ticket-card__features li::before {
|
||||
content: '✓ ';
|
||||
color: var(--color-primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ticket-card__features li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ticket-card__btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
11. INFO SECTION
|
||||
=========================================== */
|
||||
.info {
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.info__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info__card {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.info__card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.info__icon {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.info__icon-placeholder {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.info__card-title {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.info__card-text {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info__link {
|
||||
display: inline-block;
|
||||
margin-top: var(--spacing-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
12. NEWSLETTER SECTION
|
||||
=========================================== */
|
||||
.newsletter {
|
||||
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter__inner {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
color: #fff;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter__text {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.newsletter__form {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.newsletter__input {
|
||||
flex: 1;
|
||||
padding: 0.85rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-body);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-full);
|
||||
color: #fff;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.newsletter__input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.newsletter__input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.newsletter__btn {
|
||||
white-space: nowrap;
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.newsletter__btn:hover {
|
||||
background: var(--color-accent-light);
|
||||
border-color: var(--color-accent-light);
|
||||
}
|
||||
|
||||
.newsletter__hint {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
13. FOOTER
|
||||
=========================================== */
|
||||
.footer {
|
||||
background-color: var(--color-bg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.footer__logo {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-heading);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.footer__tagline {
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--spacing-xs);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.footer__heading {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-text-heading);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.footer__column a {
|
||||
display: block;
|
||||
padding: 0.3rem 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer__column a:hover {
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.footer__bottom {
|
||||
width: 100%;
|
||||
padding-top: var(--spacing-lg);
|
||||
margin-top: var(--spacing-lg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
14. ANIMATIONEN
|
||||
=========================================== */
|
||||
|
||||
/* Scroll-Animation: Elemente einblenden */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity var(--transition-slow), transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.fade-in--visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
15. MEDIA QUERIES (Responsive)
|
||||
=========================================== */
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 768px) {
|
||||
/* Navigation: Hamburger-Menü */
|
||||
.navbar__toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar__menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: var(--color-bg);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 5rem var(--spacing-lg) var(--spacing-lg);
|
||||
gap: var(--spacing-sm);
|
||||
transition: right var(--transition-base);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.navbar__menu--open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar__link--cta {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero__countdown {
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Tickets */
|
||||
.ticket-card--featured {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ticket-card--featured:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* Newsletter */
|
||||
.newsletter__form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer__inner {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 480px) {
|
||||
:root {
|
||||
--container-padding: 1rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero__countdown {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.lineup__grid--headliner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.programm__tabs {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.programm__tab {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user