Compare commits
No commits in common. "main" and "explore/relume-react" have entirely different histories.
main
...
explore/re
477
index.html
Normal file
477
index.html
Normal file
@ -0,0 +1,477 @@
|
|||||||
|
<!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,8 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>UXplore</title>
|
<title>Vite + React</title>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
60
relume-test/package-lock.json
generated
60
relume-test/package-lock.json
generated
@ -14,8 +14,7 @@
|
|||||||
"framer-motion": "^12.38.0",
|
"framer-motion": "^12.38.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.13.0",
|
"@eslint/js": "^9.13.0",
|
||||||
@ -5633,19 +5632,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
@ -10063,44 +10049,6 @@
|
|||||||
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
"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": {
|
"node_modules/react-style-singleton": {
|
||||||
"version": "2.2.3",
|
"version": "2.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||||
@ -10374,12 +10322,6 @@
|
|||||||
"semver": "bin/semver.js"
|
"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": {
|
"node_modules/set-function-length": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||||
|
|||||||
@ -16,8 +16,7 @@
|
|||||||
"framer-motion": "^12.38.0",
|
"framer-motion": "^12.38.0",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^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": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.13.0",
|
"@eslint/js": "^9.13.0",
|
||||||
|
|||||||
@ -1,12 +1,7 @@
|
|||||||
import { Routes, Route } from "react-router-dom";
|
|
||||||
import Home from "./pages/Home";
|
import Home from "./pages/Home";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return <Home />;
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
</Routes>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 173 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 181 KiB |
@ -1,99 +0,0 @@
|
|||||||
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 (
|
return (
|
||||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-cloud-white font-barlow">
|
<section id="relume" className="relative px-[5%] py-16 md:py-24 lg:py-28">
|
||||||
<div className="container relative z-10 max-w-lg text-center">
|
<div className="container relative z-10 max-w-lg text-center">
|
||||||
<h2 className="rb-5 mb-5 text-5xl font-bold text-neutral-dark md:mb-6 md:text-7xl lg:text-8xl">
|
<h2 className="rb-5 mb-5 text-5xl font-bold text-text-alternative md:mb-6 md:text-7xl lg:text-8xl">
|
||||||
{heading}
|
{heading}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-neutral-dark md:text-md">{description}</p>
|
<p className="text-text-alternative md:text-md">{description}</p>
|
||||||
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
|
<div className="mx-auto mt-6 w-full max-w-sm md:mt-8">
|
||||||
<form
|
<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"
|
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,28 +46,34 @@ export const Cta30 = (props: Cta30Props) => {
|
|||||||
value={emailInput}
|
value={emailInput}
|
||||||
onChange={(e) => setEmailInput(e.target.value)}
|
onChange={(e) => setEmailInput(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<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 {...button} className="items-center justify-center px-6 py-3">
|
||||||
{button.title}
|
{button.title}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
<div dangerouslySetInnerHTML={{ __html: termsAndConditions }} />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Cta30Defaults: Props = {
|
export const Cta30Defaults: Props = {
|
||||||
heading: "Stay tuned!",
|
heading: "Medium length heading goes here",
|
||||||
description: "Bleib' auf dem Laufenden und erfahre alles rund um die UXplore sowie weitere spannende Themen.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
|
||||||
inputPlaceholder: "Enter your email",
|
inputPlaceholder: "Enter your email",
|
||||||
button: { title: "Sign Up", variant: "primary", size: "sm" },
|
button: { title: "Sign up", variant: "primary", size: "sm" },
|
||||||
termsAndConditions: `
|
termsAndConditions: `
|
||||||
<p class='text-xs text-neutral-dark text-center'>
|
<p class='text-xs text-text-alternative'>
|
||||||
By clicking Sign Up you're confirming that you agree with our
|
By clicking Sign Up you're confirming that you agree with our
|
||||||
<a href='#' class='underline'>Terms and Conditions</a>.
|
<a href='#' class='underline'>Terms and Conditions</a>.
|
||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
video: "",
|
video: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video.mp4",
|
||||||
videoType: "",
|
videoType: "video/mp4",
|
||||||
};
|
};
|
||||||
@ -1,11 +1,8 @@
|
|||||||
import speaker1 from "../assets/speaker1.png";
|
|
||||||
import speaker2 from "../assets/speaker2.png";
|
|
||||||
import speaker3 from "../assets/speaker3.png";
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||||
import { Button } from "@relume_io/relume-ui";
|
import { Button } from "@relume_io/relume-ui";
|
||||||
//import { RxChevronRight } from "react-icons/rx";
|
import { RxChevronRight } from "react-icons/rx";
|
||||||
//import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
import { BiMap, BiCalendarAlt } from "react-icons/bi";
|
||||||
|
|
||||||
type ImageProps = {
|
type ImageProps = {
|
||||||
src: string;
|
src: string;
|
||||||
@ -46,12 +43,12 @@ export const Event17 = (props: Event17Props) => {
|
|||||||
...props,
|
...props,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
|
||||||
<h4 className="font-semibold">{tagline}</h4>
|
<h4 className="font-semibold">{tagline}</h4>
|
||||||
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl text-acid-lime">{heading}</h1>
|
<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 text-cloud-white whitespace-pre-wrap">{description}</p>
|
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
|
||||||
</div>
|
</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">
|
<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) => (
|
{featuredEvents.map((event, index) => (
|
||||||
@ -59,7 +56,7 @@ export const Event17 = (props: Event17Props) => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
|
<div className="mt-12 flex justify-center md:mt-18 lg:mt-20">
|
||||||
<Button {...button} className="bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">{button.title}</Button>
|
<Button {...button}>{button.title}</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -67,41 +64,83 @@ export const Event17 = (props: Event17Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
||||||
url, image, title
|
url, image, date, category, title, location, description, button,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-start gap-4">
|
<div className="flex flex-col items-start">
|
||||||
<a href={url} className="relative block aspect-[3/2] w-full">
|
<a href={url} className="relative block aspect-[3/2] w-full">
|
||||||
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
<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>
|
</a>
|
||||||
<h2 className="text-xl font-bold text-cloud-white">{title}</h2>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Event17Defaults: Props = {
|
export const Event17Defaults: Props = {
|
||||||
tagline: "",
|
tagline: "Tagline",
|
||||||
heading: "Speaker:innen",
|
heading: "Events",
|
||||||
description: "Überwältigt von unserem Programm?\nLerne unsere diesjährigen Speakerinnen und Speaker kennen.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||||
button: { variant: "primary", size: "primary", title: "Zu den Speakern" },
|
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||||
featuredEvents: [
|
featuredEvents: [
|
||||||
{
|
{
|
||||||
url: "/speaker", image: { src: speaker1, alt: "Dr. Elena Rossi" },
|
url: "#",
|
||||||
date: { weekday: "", day: "", month: "", year: "" },
|
image: {
|
||||||
category: "", title: "Dr. Elena Rossi", location: "", description: "",
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
button: { title: "", variant: "link", size: "link" },
|
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: speaker2, alt: "Jens Riegelberger" },
|
url: "#",
|
||||||
date: { weekday: "", day: "", month: "", year: "" },
|
image: {
|
||||||
category: "", title: "Jens Riegelberger", location: "", description: "",
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
button: { title: "", variant: "link", size: "link" },
|
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: speaker3, alt: "Reto Gwerder" },
|
url: "#",
|
||||||
date: { weekday: "", day: "", month: "", year: "" },
|
image: {
|
||||||
category: "", title: "Reto Gwerder", location: "", description: "",
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
button: { title: "", variant: "link", size: "link" },
|
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 /> },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -1,6 +1,3 @@
|
|||||||
import workshop1 from "../assets/workshop1.png";
|
|
||||||
import workshop2 from "../assets/workshop2.png";
|
|
||||||
import workshop3 from "../assets/workshop3.png";
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||||
import { Button } from "@relume_io/relume-ui";
|
import { Button } from "@relume_io/relume-ui";
|
||||||
@ -46,15 +43,15 @@ export const Event20 = (props: Event20Props) => {
|
|||||||
...props,
|
...props,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||||
<div className="container">
|
<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="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">
|
<div className="max-w-lg">
|
||||||
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
|
<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 text-cloud-white">{heading}</h1>
|
<h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
|
||||||
<p className="md:text-md text-cloud-white">{description}</p>
|
<p className="md:text-md">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
<Button {...button} className="hidden md:flex bg-acid-lime text-tech-navy font-semibold px-6 py-3 rounded-2xl border-acid-lime">
|
<Button {...button} className="hidden md:flex">
|
||||||
{button.title}
|
{button.title}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -75,11 +72,11 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
|||||||
url, image, date, category, title, location, description, button,
|
url, image, date, category, title, location, description, button,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-start border border-electric-violet bg-cloud-white">
|
<div className="flex flex-col items-start border border-border-primary">
|
||||||
<a href={url} className="relative block aspect-[3/2] w-full">
|
<a href={url} className="relative block aspect-[3/2] w-full">
|
||||||
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
<img src={image.src} alt={image.alt} className="absolute size-full object-cover" />
|
||||||
<span className="absolute right-4 top-4 bg-electric-violet text-cloud-white px-2 py-1 text-sm font-semibold rounded-lg">
|
<span className="absolute right-4 top-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
|
||||||
{category}
|
{category}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<div className="flex flex-col items-start p-6">
|
<div className="flex flex-col items-start p-6">
|
||||||
@ -94,44 +91,59 @@ const FeaturedEvent: React.FC<FeaturedEvent> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href={url} className="mb-2">
|
<a href={url} className="mb-2">
|
||||||
<h2 className="text-xl font-bold md:text-2xl text-neutral-dark">{title}</h2>
|
<h2 className="text-xl font-bold md:text-2xl">{title}</h2>
|
||||||
</a>
|
</a>
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
<a href={url} className="mt-5 md:mt-6 flex items-center gap-2 text-electric-violet font-semibold text-base">
|
<Button {...button} className="mt-5 md:mt-6">
|
||||||
{button.title} <RxChevronRight />
|
{button.title}
|
||||||
</a>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Event20Defaults: Props = {
|
export const Event20Defaults: Props = {
|
||||||
tagline: "",
|
tagline: "Tagline",
|
||||||
heading: "Workshops",
|
heading: "Events",
|
||||||
description: "Hands-on, Skills statt Theorie. Lerne Methoden und Workflows direkt von Experten aus der Industrie.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||||
button: { variant: "primary", size: "primary", title: "View all" },
|
button: { variant: "secondary", size: "primary", title: "View all" },
|
||||||
featuredEvents: [
|
featuredEvents: [
|
||||||
{
|
{
|
||||||
url: "/programm",
|
url: "#",
|
||||||
image: { src: workshop1, alt: "Research Repositories" },
|
image: {
|
||||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
category: "Research", title: "Research Repositories", location: "Location",
|
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.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: "/programm",
|
url: "#",
|
||||||
image: { src: workshop2, alt: "The future of Tokens" },
|
image: {
|
||||||
date: { weekday: "Sat", day: "25", month: "Jun", year: "2026" },
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
category: "Design / UX", title: "The future of Tokens", location: "Location",
|
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.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: "/programm",
|
url: "#",
|
||||||
image: { src: workshop3, alt: "Trust in AI" },
|
image: {
|
||||||
date: { weekday: "Sun", day: "26", month: "Jun", year: "2026" },
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
|
||||||
category: "AI & Future", title: "Trust in AI", location: "Hall 101",
|
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.",
|
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
|
||||||
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
button: { title: "View event", variant: "link", size: "link", iconRight: <RxChevronRight /> },
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import LogoFooter from "../assets/logo-footer.png";
|
|
||||||
import { FaXTwitter } from "react-icons/fa6";
|
import { FaXTwitter } from "react-icons/fa6";
|
||||||
import {
|
import {
|
||||||
BiLogoFacebookCircle,
|
BiLogoFacebookCircle,
|
||||||
@ -56,7 +55,7 @@ export const Footer3 = (props: Footer3Props) => {
|
|||||||
...props,
|
...props,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20 bg-cloud-white font-barlow">
|
<footer id="relume" className="px-[5%] py-12 md:py-18 lg:py-20">
|
||||||
<div className="container">
|
<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 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>
|
<div>
|
||||||
@ -67,12 +66,12 @@ export const Footer3 = (props: Footer3Props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="rb-6 mb-6 md:mb-8">
|
<div className="rb-6 mb-6 md:mb-8">
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-sm font-semibold text-neutral-dark">{address.label}</p>
|
<p className="mb-1 text-sm font-semibold">{address.label}</p>
|
||||||
<p className="mb-5 text-sm md:mb-6 text-neutral-dark">{address.value}</p>
|
<p className="mb-5 text-sm md:mb-6">{address.value}</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-sm font-semibold text-neutral-dark">{contact.label}</p>
|
<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 text-neutral-dark">
|
<p className="flex flex-col text-sm underline decoration-black underline-offset-1 md:mb-6">
|
||||||
<a href={`tel:${contact.phone}`}>{contact.phone}</a>
|
<a href={`tel:${contact.phone}`}>{contact.phone}</a>
|
||||||
<a href={`mailto:${contact.email}`}>{contact.email}</a>
|
<a href={`mailto:${contact.email}`}>{contact.email}</a>
|
||||||
</p>
|
</p>
|
||||||
@ -90,7 +89,7 @@ export const Footer3 = (props: Footer3Props) => {
|
|||||||
{columnLinks.map((column, index) => (
|
{columnLinks.map((column, index) => (
|
||||||
<ul key={index}>
|
<ul key={index}>
|
||||||
{column.links.map((link, linkIndex) => (
|
{column.links.map((link, linkIndex) => (
|
||||||
<li key={linkIndex} className="py-2 text-sm font-semibold text-neutral-dark">
|
<li key={linkIndex} className="py-2 text-sm font-semibold">
|
||||||
<a href={link.url}>{link.title}</a>
|
<a href={link.url}>{link.title}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
@ -98,7 +97,7 @@ export const Footer3 = (props: Footer3Props) => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-px w-full bg-electric-green" />
|
<div className="h-px w-full bg-black" />
|
||||||
<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">
|
<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>
|
<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">
|
<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">
|
||||||
@ -116,42 +115,50 @@ export const Footer3 = (props: Footer3Props) => {
|
|||||||
|
|
||||||
export const Footer3Defaults: Props = {
|
export const Footer3Defaults: Props = {
|
||||||
logo: {
|
logo: {
|
||||||
url: "/",
|
url: "#",
|
||||||
src: LogoFooter,
|
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||||
alt: "UXplore Logo",
|
alt: "Logo image",
|
||||||
},
|
},
|
||||||
address: {
|
address: {
|
||||||
label: "Address:",
|
label: "Address:",
|
||||||
value: "Strasse Nr.\nPLZ Ort",
|
value: "Level 1, 12 Sample St, Sydney NSW 2000",
|
||||||
},
|
},
|
||||||
contact: {
|
contact: {
|
||||||
label: "Kontakt:",
|
label: "Contact:",
|
||||||
phone: "079 123 45 67",
|
phone: "1800 123 4567",
|
||||||
email: "kontakt@uxplore.com",
|
email: "info@relume.io",
|
||||||
},
|
},
|
||||||
columnLinks: [
|
columnLinks: [
|
||||||
{
|
{
|
||||||
links: [
|
links: [
|
||||||
{ title: "Programm", url: "/programm" },
|
{ title: "Link One", url: "#" },
|
||||||
{ title: "Speaker", url: "/speaker" },
|
{ title: "Link Two", url: "#" },
|
||||||
{ title: "Location", url: "/location" },
|
{ title: "Link Three", url: "#" },
|
||||||
{ title: "Tickets", url: "#tickets" },
|
{ title: "Link Four", url: "#" },
|
||||||
{ title: "FAQ", url: "#faq" },
|
{ 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: "#" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ links: [] },
|
|
||||||
],
|
],
|
||||||
socialMediaLinks: [
|
socialMediaLinks: [
|
||||||
{ url: "#", icon: <BiLogoFacebookCircle className="size-6 text-neutral-dark" /> },
|
{ url: "#", icon: <BiLogoFacebookCircle className="size-6" /> },
|
||||||
{ url: "#", icon: <BiLogoInstagram className="size-6 text-neutral-dark" /> },
|
{ url: "#", icon: <BiLogoInstagram className="size-6" /> },
|
||||||
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5 text-neutral-dark" /> },
|
{ url: "#", icon: <FaXTwitter className="size-6 p-0.5" /> },
|
||||||
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6 text-neutral-dark" /> },
|
{ url: "#", icon: <BiLogoLinkedinSquare className="size-6" /> },
|
||||||
{ url: "#", icon: <BiLogoYoutube className="size-6 text-neutral-dark" /> },
|
{ url: "#", icon: <BiLogoYoutube className="size-6" /> },
|
||||||
],
|
],
|
||||||
footerText: "© 2026 UXplore",
|
footerText: "© 2024 Relume. All rights reserved.",
|
||||||
footerLinks: [
|
footerLinks: [
|
||||||
{ title: "AGB", url: "#" },
|
{ title: "Privacy Policy", url: "#" },
|
||||||
{ title: "Datenschutz", url: "#" },
|
{ title: "Terms of Service", url: "#" },
|
||||||
{ title: "Cookie Einstellungen", url: "#" },
|
{ title: "Cookies Settings", url: "#" },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import headerImage from "../assets/Header.png";
|
|
||||||
import { Button } from "@relume_io/relume-ui";
|
import { Button } from "@relume_io/relume-ui";
|
||||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||||
|
|
||||||
@ -22,12 +21,12 @@ export const Header1 = (props: Header1Props) => {
|
|||||||
...props,
|
...props,
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28 bg-tech-navy font-barlow">
|
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
|
||||||
<div className="container">
|
<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 className="grid grid-cols-1 gap-x-20 gap-y-12 md:gap-y-16 lg:grid-cols-2 lg:items-center">
|
||||||
<div>
|
<div>
|
||||||
<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>
|
<h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl">{heading}</h1>
|
||||||
<p className="text-[48px] font-bold leading-[1.2] text-cloud-white whitespace-pre-wrap">{description}</p>
|
<p className="md:text-md">{description}</p>
|
||||||
<div className="mt-6 flex flex-wrap gap-4 md:mt-8">
|
<div className="mt-6 flex flex-wrap gap-4 md:mt-8">
|
||||||
{buttons.map((button, index) => (
|
{buttons.map((button, index) => (
|
||||||
<Button key={index} {...button}>
|
<Button key={index} {...button}>
|
||||||
@ -46,12 +45,12 @@ export const Header1 = (props: Header1Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Header1Defaults: Props = {
|
export const Header1Defaults: Props = {
|
||||||
heading: "UXplore Konferenz 2026",
|
heading: "Medium length hero heading goes here",
|
||||||
description:
|
description:
|
||||||
"25-26 Juni Zürich",
|
"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: [],
|
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
|
||||||
image: {
|
image: {
|
||||||
src: headerImage,
|
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
|
||||||
alt: "UXplore Konferenz 2026",
|
alt: "Relume placeholder image",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
import logo from "../assets/Logo.png";
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Button, useMediaQuery } from "@relume_io/relume-ui";
|
import { Button, useMediaQuery } from "@relume_io/relume-ui";
|
||||||
import type { ButtonProps } from "@relume_io/relume-ui";
|
import type { ButtonProps } from "@relume_io/relume-ui";
|
||||||
@ -36,7 +35,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
|||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
id="relume"
|
id="relume"
|
||||||
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"
|
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"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="flex size-12 flex-col justify-center lg:hidden"
|
className="flex size-12 flex-col justify-center lg:hidden"
|
||||||
@ -45,7 +44,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
|||||||
{Array(3)
|
{Array(3)
|
||||||
.fill(null)
|
.fill(null)
|
||||||
.map((_, index) => (
|
.map((_, index) => (
|
||||||
<span key={index} className="my-[3px] h-0.5 w-6 bg-cloud-white lg:hidden" />
|
<span key={index} className="my-[3px] h-0.5 w-6 bg-black lg:hidden" />
|
||||||
))}
|
))}
|
||||||
</button>
|
</button>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
@ -69,7 +68,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
|||||||
transition: { type: "spring", duration: 0.4, bounce: 0 },
|
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-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%]"
|
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%]"
|
||||||
>
|
>
|
||||||
<a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
|
<a href={logo.url} className="mb-8 mt-10 flex flex-shrink-0 lg:hidden">
|
||||||
<img src={logo.src} alt={logo.alt} />
|
<img src={logo.src} alt={logo.alt} />
|
||||||
@ -81,7 +80,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
|||||||
) : (
|
) : (
|
||||||
<a
|
<a
|
||||||
href={navLink.url}
|
href={navLink.url}
|
||||||
className="relative block py-3 text-md text-cloud-white lg:px-4 lg:py-2 lg:text-base"
|
className="relative block py-3 text-md lg:px-4 lg:py-2 lg:text-base"
|
||||||
>
|
>
|
||||||
{navLink.title}
|
{navLink.title}
|
||||||
</a>
|
</a>
|
||||||
@ -113,7 +112,7 @@ export const Navbar3 = (props: Navbar3Props) => {
|
|||||||
<div className="flex min-h-16 items-center justify-end gap-x-4">
|
<div className="flex min-h-16 items-center justify-end gap-x-4">
|
||||||
<div>
|
<div>
|
||||||
{buttons.map((button, index) => (
|
{buttons.map((button, index) => (
|
||||||
<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 key={index} {...button} className="px-4 py-1 md:px-6 md:py-2">
|
||||||
{button.title}
|
{button.title}
|
||||||
</Button>
|
</Button>
|
||||||
))}
|
))}
|
||||||
@ -187,20 +186,27 @@ const SubMenu = ({ navLink, isMobile }: { navLink: NavLink; isMobile: boolean })
|
|||||||
|
|
||||||
export const Navbar3Defaults: Props = {
|
export const Navbar3Defaults: Props = {
|
||||||
logo: {
|
logo: {
|
||||||
url: "/",
|
url: "#",
|
||||||
src: logo,
|
src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg",
|
||||||
alt: "UXplore Logo",
|
alt: "Logo image",
|
||||||
},
|
},
|
||||||
navLinks: [
|
navLinks: [
|
||||||
{ title: "Programm", url: "/programm" },
|
{ title: "Link One", url: "#" },
|
||||||
{ title: "Speaker", url: "/speaker" },
|
{ title: "Link Two", url: "#" },
|
||||||
{ title: "Location", url: "/location" },
|
{
|
||||||
|
title: "Link Three",
|
||||||
|
url: "#",
|
||||||
|
subMenuLinks: [
|
||||||
|
{ title: "Link Four", url: "#" },
|
||||||
|
{ title: "Link Five", url: "#" },
|
||||||
|
{ title: "Link Six", url: "#" },
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
title: "Tickets",
|
title: "Button",
|
||||||
size: "sm",
|
size: "sm",
|
||||||
variant: "primary",
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
5
relume-test/src/declarations.d.ts
vendored
5
relume-test/src/declarations.d.ts
vendored
@ -1,5 +0,0 @@
|
|||||||
declare module "*.png";
|
|
||||||
declare module "*.jpg";
|
|
||||||
declare module "*.jpeg";
|
|
||||||
declare module "*.svg";
|
|
||||||
declare module "*.webp";
|
|
||||||
@ -1,23 +1,3 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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,13 +1,10 @@
|
|||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import { BrowserRouter } from 'react-router-dom'
|
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
createRoot(document.getElementById('root')!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<BrowserRouter>
|
<App />
|
||||||
<App />
|
|
||||||
</BrowserRouter>
|
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
)
|
)
|
||||||
@ -1,9 +1,11 @@
|
|||||||
import { Navbar3 } from "../components/Navbar";
|
import { Navbar3 } from "../components/Navbar";
|
||||||
import { Header1 } from "../components/Header";
|
import { Header1 } from "../components/Header";
|
||||||
import { Content11 } from "../components/Content11";
|
|
||||||
import { Event17 } from "../components/Event17";
|
import { Event17 } from "../components/Event17";
|
||||||
import { Event20 } from "../components/Event20";
|
import { Gallery19 } from "../components/Gallery19";
|
||||||
import { Cta30 } from "../components/Cta30";
|
import { Cta30 } from "../components/Cta30";
|
||||||
|
import { Event20 } from "../components/Event20";
|
||||||
|
import { Pricing18 } from "../components/Pricing18";
|
||||||
|
import { Faq10 } from "../components/Faq10";
|
||||||
import { Footer3 } from "../components/Footer";
|
import { Footer3 } from "../components/Footer";
|
||||||
|
|
||||||
export const Home = () => {
|
export const Home = () => {
|
||||||
@ -11,10 +13,12 @@ export const Home = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Navbar3 />
|
<Navbar3 />
|
||||||
<Header1 />
|
<Header1 />
|
||||||
<Content11 />
|
|
||||||
<Event17 />
|
<Event17 />
|
||||||
<Event20 />
|
<Gallery19 />
|
||||||
<Cta30 />
|
<Cta30 />
|
||||||
|
<Event20 />
|
||||||
|
<Pricing18 />
|
||||||
|
<Faq10 />
|
||||||
<Footer3 />
|
<Footer3 />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -9,19 +9,7 @@ export default {
|
|||||||
],
|
],
|
||||||
presets: [relumetailwind],
|
presets: [relumetailwind],
|
||||||
theme: {
|
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: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
989
style.css
Normal file
989
style.css
Normal file
@ -0,0 +1,989 @@
|
|||||||
|
/* ===========================================
|
||||||
|
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