commit a69da34e3c7df0e35d4bf716ae89e38d9b70d039
Author: AB <ab@hexor.cy>
Date:   Sun Apr 19 15:52:49 2026 +0300

    Initial commit: wedding website template with configurable content
    
    Zola-based single-page wedding site with all content (schedule, details,
    colors, images, RSVP link) managed via config.toml. Multi-day schedule
    layout, Blue & Green color palette, CSS custom properties for theming.
    
    Co-Authored-By: Claude <noreply@anthropic.com>

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0d26766
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,12 @@
+# Zola build output
+public/
+
+# Editor swap files
+*.swp
+*.swo
+
+# Windows artifacts
+nul
+
+# Claude Code
+.claude/
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..ba1b01a
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,130 @@
+title = "Свадьба Марии и Александра"
+description = "Приглашаем вас на нашу свадьбу!"
+base_url = "https://wedding.hexor.cy"
+default_language = "ru"
+compile_sass = true
+minify_html = true
+
+[extra]
+bride = "Мария"
+groom = "Александр"
+wedding_date = "21 августа 2026"
+wedding_time = "10:00"
+wedding_datetime_iso = "2026-08-21T10:00:00"
+venue_name = "Московское Небо"
+venue_address = "Москва, Проспект Мира, 119 с422"
+venue_map_url = "https://yandex.com/maps/?um=constructor%3Ab306a9bb2e7f5aebbb90dc22d61211eef19e7f1cbd55be8a5d871d4460d4d51e&source=constructorLink"
+venue_map_embed = "https://yandex.com/map-widget/v1/?um=constructor%3Ab306a9bb2e7f5aebbb90dc22d61211eef19e7f1cbd55be8a5d871d4460d4d51e&amp;source=constructor"
+
+# Изображения (положите файлы в static/images/)
+hero_image = "/images/hero.jpg"
+bride_photo = "/images/bride.jpg"
+groom_photo = "/images/groom.jpg"
+
+# Hero
+hero_invite = "Приглашаем на свадьбу"
+
+# About
+about_title = "Наша история"
+about_text = [
+    "Мы встретились в один прекрасный день и поняли, что созданы друг для друга. Спустя время, проведённое вместе, мы решили объединить наши жизни навсегда.",
+    "Мы будем счастливы разделить этот важный день с самыми близкими и дорогими людьми.",
+]
+
+# Location
+dress_code = "Коктейльный / нарядный"
+
+# RSVP
+rsvp_title = "Подтвердите участие"
+rsvp_deadline = "1 августа 2026"
+rsvp_url = ""
+rsvp_button = "Заполнить форму"
+
+# Цвета (CSS-значения)
+[extra.colors]
+primary = "#2b4c7e"
+primary_light = "#7da0c4"
+accent = "#7e8e6c"
+text = "#2c3e50"
+text_light = "#5a6d7e"
+background = "#f9fbfd"
+background_alt = "#eef3f7"
+white = "#fffff8"
+border = "#c9d6e0"
+hero_gradient = "linear-gradient(135deg, #1a3a5c 0%, #2b4c7e 50%, #3a6b5a 100%)"
+
+# Карточки деталей
+[[extra.details]]
+icon = "&#127873;"
+title = "Подарки"
+description = "Лучший подарок для нас — ваше присутствие. Но если вы хотите сделать подарок, мы будем рады вкладу в наше свадебное путешествие."
+
+[[extra.details]]
+icon = "&#128247;"
+title = "Фотографии"
+description = "На свадьбе будет профессиональный фотограф. Мы поделимся фотографиями после мероприятия."
+
+[[extra.details]]
+icon = "&#128662;"
+title = "Трансфер"
+description = "Мы организуем трансфер от станции метро до площадки и обратно. Подробности сообщим ближе к дате."
+
+# День 1
+[[extra.schedule]]
+day = "19 августа"
+label = "Встреча гостей"
+
+[[extra.schedule.items]]
+time = "14:00"
+title = "Заезд"
+description = "Размещение гостей в отеле"
+
+[[extra.schedule.items]]
+time = "18:00"
+title = "Приветственный ужин"
+description = "Знакомство и лёгкий фуршет на террасе"
+
+# День 2
+[[extra.schedule]]
+day = "20 августа"
+label = "День свадьбы"
+
+[[extra.schedule.items]]
+time = "15:00"
+title = "Церемония"
+description = "Торжественная церемония бракосочетания в кругу самых близких"
+
+[[extra.schedule.items]]
+time = "16:00"
+title = "Фуршет"
+description = "Лёгкие закуски и шампанское на открытой террасе"
+
+[[extra.schedule.items]]
+time = "17:00"
+title = "Банкет"
+description = "Праздничный ужин, тосты и поздравления"
+
+[[extra.schedule.items]]
+time = "19:00"
+title = "Первый танец"
+description = "Наш первый танец как мужа и жены"
+
+[[extra.schedule.items]]
+time = "19:30"
+title = "Вечерняя программа"
+description = "Танцы, музыка и веселье до поздней ночи"
+
+# День 3
+[[extra.schedule]]
+day = "21 августа"
+label = "Прощальный бранч"
+
+[[extra.schedule.items]]
+time = "11:00"
+title = "Бранч"
+description = "Совместный завтрак и тёплые воспоминания о вчерашнем дне"
+
+[[extra.schedule.items]]
+time = "14:00"
+title = "Отъезд"
+description = "Прощание и отъезд гостей"
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..b8e6671
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,4 @@
++++
+title = "Свадьба Анны и Михаила"
+description = "Приглашаем вас на нашу свадьбу!"
++++
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..8b9ec42
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,765 @@
+// ==========================
+// Variables (fallback defaults, overridden by config.toml via CSS custom properties)
+// ==========================
+$font-serif: 'Cormorant Garamond', 'Georgia', serif;
+$font-sans: 'Montserrat', 'Helvetica Neue', sans-serif;
+$max-width: 1100px;
+$transition: 0.3s ease;
+
+:root {
+    --color-primary: #2b4c7e;
+    --color-primary-light: #7da0c4;
+    --color-accent: #7e8e6c;
+    --color-text: #2c3e50;
+    --color-text-light: #5a6d7e;
+    --color-bg: #f9fbfd;
+    --color-bg-alt: #eef3f7;
+    --color-white: #fffff8;
+    --color-border: #c9d6e0;
+    --hero-gradient: linear-gradient(135deg, #1a3a5c 0%, #2b4c7e 50%, #3a6b5a 100%);
+}
+
+// ==========================
+// Reset & Base
+// ==========================
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    font-size: 16px;
+}
+
+body {
+    font-family: $font-sans;
+    font-weight: 300;
+    color: var(--color-text);
+    background: var(--color-bg);
+    line-height: 1.7;
+    -webkit-font-smoothing: antialiased;
+}
+
+.container {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color $transition;
+
+    &:hover {
+        color: var(--color-primary-light);
+    }
+}
+
+// ==========================
+// Navigation
+// ==========================
+.nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    padding: 20px 0;
+    transition: all $transition;
+    background: rgba(0, 0, 0, 0.4);
+
+    &--scrolled {
+        background: rgba(255, 255, 255, 0.97);
+        padding: 12px 0;
+        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
+    }
+
+    &__inner {
+        max-width: $max-width;
+        margin: 0 auto;
+        padding: 0 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__logo {
+        font-family: $font-serif;
+        font-size: 1.4rem;
+        font-weight: 600;
+        color: var(--color-white);
+        text-decoration: none;
+
+        .nav--scrolled & {
+            color: var(--color-primary);
+        }
+    }
+
+    &__toggle {
+        display: none;
+        flex-direction: column;
+        gap: 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+
+        span {
+            display: block;
+            width: 24px;
+            height: 2px;
+            background: var(--color-white);
+            transition: all $transition;
+
+            .nav--scrolled & {
+                background: var(--color-text);
+            }
+        }
+    }
+
+    &__links {
+        display: flex;
+        list-style: none;
+        gap: 32px;
+
+        a {
+            color: rgba(255, 255, 255, 0.9);
+            text-decoration: none;
+            font-size: 0.85rem;
+            font-weight: 400;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+            transition: color $transition;
+
+            &:hover {
+                color: var(--color-white);
+            }
+
+            .nav--scrolled & {
+                color: var(--color-text-light);
+
+                &:hover {
+                    color: var(--color-primary);
+                }
+            }
+        }
+    }
+}
+
+// ==========================
+// Hero
+// ==========================
+.hero {
+    position: relative;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-size: cover;
+    background-position: center;
+    background-color: var(--color-primary);
+    color: var(--color-white);
+
+    &__overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.35);
+    }
+
+    &__content {
+        position: relative;
+        z-index: 1;
+        padding: 40px 48px;
+        background: rgba(0, 0, 0, 0.45);
+        border-radius: 4px;
+    }
+
+    &__invite {
+        font-family: $font-sans;
+        font-size: 0.9rem;
+        font-weight: 300;
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+        margin-bottom: 24px;
+        opacity: 0.9;
+    }
+
+    &__names {
+        font-family: $font-serif;
+        font-size: clamp(2.5rem, 8vw, 5rem);
+        font-weight: 400;
+        line-height: 1.2;
+        margin-bottom: 16px;
+
+        span {
+            font-style: italic;
+            display: inline-block;
+            margin: 0 12px;
+            opacity: 0.8;
+        }
+    }
+
+    &__divider {
+        width: 60px;
+        height: 1px;
+        background: rgba(255, 255, 255, 0.5);
+        margin: 24px auto;
+    }
+
+    &__date {
+        font-family: $font-serif;
+        font-size: 1.4rem;
+        font-weight: 400;
+        letter-spacing: 0.05em;
+        margin-bottom: 8px;
+    }
+
+    &__venue {
+        font-size: 0.9rem;
+        font-weight: 300;
+        opacity: 0.85;
+        letter-spacing: 0.05em;
+    }
+
+    &__scroll {
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+
+        a {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 1.6rem;
+            animation: bounce 2s infinite;
+            display: block;
+        }
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-10px); }
+    60% { transform: translateY(-5px); }
+}
+
+// ==========================
+// Sections
+// ==========================
+.section {
+    padding: 100px 0;
+
+    &--countdown {
+        background: var(--color-bg-alt);
+    }
+
+    &--schedule {
+        background: var(--color-white);
+    }
+
+    &--location {
+        background: var(--color-bg-alt);
+    }
+
+    &--details {
+        background: var(--color-white);
+    }
+
+    &--rsvp {
+        background: var(--color-bg-alt);
+    }
+
+    &__title {
+        font-family: $font-serif;
+        font-size: clamp(2rem, 4vw, 2.8rem);
+        font-weight: 400;
+        text-align: center;
+        color: var(--color-text);
+    }
+
+    &__divider {
+        width: 50px;
+        height: 1px;
+        background: var(--color-primary);
+        margin: 20px auto 50px;
+    }
+
+    &__subtitle {
+        text-align: center;
+        color: var(--color-text-light);
+        font-size: 0.95rem;
+        margin-bottom: 40px;
+    }
+}
+
+// ==========================
+// About
+// ==========================
+.about {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: 50px;
+    align-items: center;
+
+    &__photo {
+        text-align: center;
+    }
+
+    &__photo-placeholder {
+        width: 100%;
+        aspect-ratio: 3 / 4;
+        background: var(--color-bg-alt);
+        border: 1px solid var(--color-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-text-light);
+        font-size: 0.85rem;
+        margin-bottom: 16px;
+    }
+
+    &__name {
+        font-family: $font-serif;
+        font-size: 1.3rem;
+        color: var(--color-primary);
+    }
+
+    &__story {
+        text-align: center;
+        color: var(--color-text-light);
+        font-size: 1rem;
+        line-height: 1.9;
+
+        p + p {
+            margin-top: 16px;
+        }
+    }
+}
+
+// ==========================
+// Countdown
+// ==========================
+.countdown {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    flex-wrap: wrap;
+
+    &__item {
+        text-align: center;
+    }
+
+    &__number {
+        display: block;
+        font-family: $font-serif;
+        font-size: 3.5rem;
+        font-weight: 400;
+        color: var(--color-primary);
+        line-height: 1;
+    }
+
+    &__label {
+        display: block;
+        font-size: 0.8rem;
+        color: var(--color-text-light);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin-top: 8px;
+    }
+}
+
+// ==========================
+// Schedule Days
+// ==========================
+.schedule-days {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 40px;
+    align-items: start;
+}
+
+.schedule-day {
+    &__header {
+        text-align: center;
+        margin-bottom: 32px;
+    }
+
+    &__date {
+        display: block;
+        font-family: $font-serif;
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--color-text);
+        margin-bottom: 4px;
+    }
+
+    &__label {
+        display: block;
+        font-size: 0.9rem;
+        color: var(--color-text-light);
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+    }
+}
+
+// ==========================
+// Timeline
+// ==========================
+.timeline {
+    max-width: 650px;
+    margin: 0 auto;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 80px;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--color-border);
+    }
+
+    &__item {
+        display: flex;
+        gap: 32px;
+        padding: 24px 0;
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 74px;
+            top: 32px;
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            border: 2px solid var(--color-accent);
+            background: var(--color-white);
+        }
+    }
+
+    &__time {
+        flex-shrink: 0;
+        width: 55px;
+        font-family: $font-serif;
+        font-size: 1.2rem;
+        color: var(--color-primary);
+        text-align: right;
+        padding-top: 2px;
+    }
+
+    &__content {
+        padding-left: 24px;
+
+        h3 {
+            font-family: $font-serif;
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        p {
+            color: var(--color-text-light);
+            font-size: 0.9rem;
+        }
+    }
+}
+
+// ==========================
+// Location
+// ==========================
+.location {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+
+    &__info {
+        h3 {
+            font-family: $font-serif;
+            font-size: 1.8rem;
+            font-weight: 400;
+            margin-bottom: 8px;
+        }
+    }
+
+    &__address {
+        color: var(--color-text-light);
+        margin-bottom: 24px;
+    }
+
+    &__details {
+        margin-bottom: 30px;
+
+        p {
+            padding: 6px 0;
+            font-size: 0.95rem;
+
+            strong {
+                font-weight: 500;
+            }
+        }
+    }
+
+    &__map-placeholder {
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        background: var(--color-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-text-light);
+        font-size: 0.9rem;
+        border-radius: 4px;
+    }
+}
+
+// ==========================
+// Details
+// ==========================
+.details {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+
+    &__card {
+        text-align: center;
+        padding: 40px 30px;
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: 4px;
+    }
+
+    &__icon {
+        font-size: 2.5rem;
+        margin-bottom: 20px;
+    }
+
+    h3 {
+        font-family: $font-serif;
+        font-size: 1.3rem;
+        font-weight: 600;
+        margin-bottom: 12px;
+    }
+
+    p {
+        color: var(--color-text-light);
+        font-size: 0.9rem;
+        line-height: 1.7;
+    }
+}
+
+// ==========================
+// RSVP Form
+// ==========================
+.rsvp-form {
+    max-width: 500px;
+    margin: 0 auto;
+
+    &__group {
+        margin-bottom: 20px;
+
+        &--radio {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+        }
+    }
+
+    &__input {
+        width: 100%;
+        padding: 14px 18px;
+        font-family: $font-sans;
+        font-size: 0.9rem;
+        font-weight: 300;
+        color: var(--color-text);
+        background: var(--color-white);
+        border: 1px solid var(--color-border);
+        border-radius: 4px;
+        outline: none;
+        transition: border-color $transition;
+        appearance: none;
+        -webkit-appearance: none;
+
+        &:focus {
+            border-color: var(--color-primary);
+        }
+
+        &::placeholder {
+            color: #bbb;
+        }
+    }
+
+    &__textarea {
+        min-height: 120px;
+        resize: vertical;
+    }
+
+    &__radio {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 0.9rem;
+
+        input[type="radio"] {
+            accent-color: var(--color-primary);
+        }
+    }
+
+    &__success {
+        text-align: center;
+        font-family: $font-serif;
+        font-size: 1.4rem;
+        color: var(--color-primary);
+        padding: 40px;
+    }
+}
+
+// ==========================
+// Buttons
+// ==========================
+.btn {
+    display: inline-block;
+    padding: 14px 40px;
+    font-family: $font-sans;
+    font-size: 0.85rem;
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all $transition;
+    text-decoration: none;
+
+    &--primary {
+        display: block;
+        width: 100%;
+        background: var(--color-primary);
+        color: var(--color-white);
+
+        &:hover {
+            background: var(--color-primary-light);
+            color: var(--color-white);
+        }
+    }
+
+    &--outline {
+        border: 1px solid var(--color-primary);
+        color: var(--color-primary);
+        background: transparent;
+
+        &:hover {
+            background: var(--color-primary);
+            color: var(--color-white);
+        }
+    }
+}
+
+// ==========================
+// Footer
+// ==========================
+.footer {
+    background: var(--color-text);
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    padding: 50px 0;
+
+    &__names {
+        font-family: $font-serif;
+        font-size: 1.6rem;
+        color: var(--color-white);
+        margin-bottom: 8px;
+    }
+
+    &__date {
+        font-size: 0.85rem;
+        letter-spacing: 0.1em;
+    }
+}
+
+// ==========================
+// Responsive
+// ==========================
+@media (max-width: 768px) {
+    .nav {
+        &__toggle {
+            display: flex;
+        }
+
+        &__links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: var(--color-white);
+            flex-direction: column;
+            padding: 20px 24px;
+            gap: 16px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+
+            a {
+                color: var(--color-text) !important;
+
+                &:hover {
+                    color: var(--color-primary) !important;
+                }
+            }
+        }
+
+        &--open .nav__links {
+            display: flex;
+        }
+    }
+
+    .about {
+        grid-template-columns: 1fr;
+        gap: 30px;
+
+        &__photo--groom {
+            order: -1;
+        }
+    }
+
+    .countdown {
+        gap: 24px;
+    }
+
+    .schedule-days {
+        grid-template-columns: 1fr;
+        gap: 48px;
+    }
+
+    .timeline {
+        &::before { left: 60px; }
+        &__item::after { left: 54px; }
+        &__time { width: 40px; font-size: 1rem; }
+    }
+
+    .location {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+
+    .details {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .section {
+        padding: 70px 0;
+    }
+}
diff --git a/static/.gitkeep b/static/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/static/images/.gitkeep b/static/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/static/images/hero.jpg b/static/images/hero.jpg
new file mode 100644
index 0000000..2eb264d
Binary files /dev/null and b/static/images/hero.jpg differ
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..14a9ae8
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}{{ config.title }}{% endblock %}</title>
+    <meta name="description" content="{{ config.description }}">
+    <link rel="stylesheet" href="{{ get_url(path='style.css') }}">
+    <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=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
+    {% if config.extra.colors %}
+    <style>
+        :root {
+            --color-primary: {{ config.extra.colors.primary }};
+            --color-primary-light: {{ config.extra.colors.primary_light }};
+            --color-accent: {{ config.extra.colors.accent }};
+            --color-text: {{ config.extra.colors.text }};
+            --color-text-light: {{ config.extra.colors.text_light }};
+            --color-bg: {{ config.extra.colors.background }};
+            --color-bg-alt: {{ config.extra.colors.background_alt }};
+            --color-white: {{ config.extra.colors.white }};
+            --color-border: {{ config.extra.colors.border }};
+            --hero-gradient: {{ config.extra.colors.hero_gradient }};
+        }
+    </style>
+    {% endif %}
+</head>
+<body>
+    <nav class="nav" id="nav">
+        <div class="nav__inner">
+            <a href="{{ get_url(path='@/_index.md') }}" class="nav__logo">{{ config.extra.bride }} & {{ config.extra.groom }}</a>
+            <button class="nav__toggle" aria-label="Меню" onclick="document.getElementById('nav').classList.toggle('nav--open')">
+                <span></span><span></span><span></span>
+            </button>
+            <ul class="nav__links">
+                <li><a href="#about">О нас</a></li>
+                <li><a href="#schedule">Программа</a></li>
+                <li><a href="#location">Место</a></li>
+                <li><a href="#details">Детали</a></li>
+                <li><a href="#rsvp">RSVP</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    {% block content %}{% endblock %}
+
+    <footer class="footer">
+        <div class="container">
+            <p class="footer__names">{{ config.extra.bride }} & {{ config.extra.groom }}</p>
+            <p class="footer__date">{{ config.extra.wedding_date }}</p>
+        </div>
+    </footer>
+
+    <script>
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                    document.getElementById('nav').classList.remove('nav--open');
+                }
+            });
+        });
+
+        window.addEventListener('scroll', () => {
+            const nav = document.getElementById('nav');
+            if (window.scrollY > 50) {
+                nav.classList.add('nav--scrolled');
+            } else {
+                nav.classList.remove('nav--scrolled');
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..1983ddf
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,181 @@
+{% extends "base.html" %}
+
+{% block content %}
+<!-- Hero -->
+<section class="hero" style="background-image: {% if config.extra.hero_image %}url('{{ config.extra.hero_image }}'){% else %}var(--hero-gradient){% endif %}">
+    <div class="hero__overlay"></div>
+    <div class="hero__content">
+        <p class="hero__invite">{{ config.extra.hero_invite }}</p>
+        <h1 class="hero__names">{{ config.extra.bride }} <span>&</span> {{ config.extra.groom }}</h1>
+        <div class="hero__divider"></div>
+        <p class="hero__date">{{ config.extra.wedding_date }}</p>
+        <p class="hero__venue">{{ config.extra.venue_name }}</p>
+    </div>
+    <div class="hero__scroll">
+        <a href="#about">&#8595;</a>
+    </div>
+</section>
+
+<!-- About -->
+<section class="section section--about" id="about">
+    <div class="container">
+        <h2 class="section__title">{{ config.extra.about_title }}</h2>
+        <div class="section__divider"></div>
+        <div class="about">
+            <div class="about__photo about__photo--bride">
+                {% if config.extra.bride_photo %}
+                <img src="{{ config.extra.bride_photo }}" alt="{{ config.extra.bride }}">
+                {% else %}
+                <div class="about__photo-placeholder">Фото невесты</div>
+                {% endif %}
+                <p class="about__name">{{ config.extra.bride }}</p>
+            </div>
+            <div class="about__story">
+                {% for paragraph in config.extra.about_text %}
+                <p>{{ paragraph }}</p>
+                {% endfor %}
+            </div>
+            <div class="about__photo about__photo--groom">
+                {% if config.extra.groom_photo %}
+                <img src="{{ config.extra.groom_photo }}" alt="{{ config.extra.groom }}">
+                {% else %}
+                <div class="about__photo-placeholder">Фото жениха</div>
+                {% endif %}
+                <p class="about__name">{{ config.extra.groom }}</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Countdown -->
+<section class="section section--countdown" id="countdown">
+    <div class="container">
+        <h2 class="section__title">До нашей свадьбы</h2>
+        <div class="section__divider"></div>
+        <div class="countdown" id="countdown-timer">
+            <div class="countdown__item">
+                <span class="countdown__number" id="days">0</span>
+                <span class="countdown__label">дней</span>
+            </div>
+            <div class="countdown__item">
+                <span class="countdown__number" id="hours">0</span>
+                <span class="countdown__label">часов</span>
+            </div>
+            <div class="countdown__item">
+                <span class="countdown__number" id="minutes">0</span>
+                <span class="countdown__label">минут</span>
+            </div>
+            <div class="countdown__item">
+                <span class="countdown__number" id="seconds">0</span>
+                <span class="countdown__label">секунд</span>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Schedule -->
+<section class="section section--schedule" id="schedule">
+    <div class="container">
+        <h2 class="section__title">Программа</h2>
+        <div class="section__divider"></div>
+        <div class="schedule-days">
+            {% for day in config.extra.schedule %}
+            <div class="schedule-day">
+                <div class="schedule-day__header">
+                    <span class="schedule-day__date">{{ day.day }}</span>
+                    <span class="schedule-day__label">{{ day.label }}</span>
+                </div>
+                <div class="timeline">
+                    {% for item in day.items %}
+                    <div class="timeline__item">
+                        <div class="timeline__time">{{ item.time }}</div>
+                        <div class="timeline__content">
+                            <h3>{{ item.title }}</h3>
+                            <p>{{ item.description }}</p>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<!-- Location -->
+<section class="section section--location" id="location">
+    <div class="container">
+        <h2 class="section__title">Место проведения</h2>
+        <div class="section__divider"></div>
+        <div class="location">
+            <div class="location__info">
+                <h3>{{ config.extra.venue_name }}</h3>
+                <p class="location__address">{{ config.extra.venue_address }}</p>
+                <div class="location__details">
+                    <p><strong>Дата:</strong> {{ config.extra.wedding_date }}</p>
+                    <p><strong>Начало:</strong> {{ config.extra.wedding_time }}</p>
+                    <p><strong>Дресс-код:</strong> {{ config.extra.dress_code }}</p>
+                </div>
+                <a href="{{ config.extra.venue_map_url }}" class="btn btn--outline">Открыть карту</a>
+            </div>
+            <div class="location__map">
+                {% if config.extra.venue_map_embed %}
+                <iframe src="{{ config.extra.venue_map_embed }}" width="100%" height="400" frameborder="0" allowfullscreen></iframe>
+                {% else %}
+                <div class="location__map-placeholder">
+                    <p>Карта</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Details -->
+<section class="section section--details" id="details">
+    <div class="container">
+        <h2 class="section__title">Важные детали</h2>
+        <div class="section__divider"></div>
+        <div class="details">
+            {% for card in config.extra.details %}
+            <div class="details__card">
+                <div class="details__icon">{{ card.icon | safe }}</div>
+                <h3>{{ card.title }}</h3>
+                <p>{{ card.description }}</p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+
+<!-- RSVP -->
+<section class="section section--rsvp" id="rsvp">
+    <div class="container">
+        <h2 class="section__title">{{ config.extra.rsvp_title }}</h2>
+        <div class="section__divider"></div>
+        <p class="section__subtitle">Пожалуйста, сообщите о вашем присутствии до {{ config.extra.rsvp_deadline }}</p>
+        <div style="text-align: center;">
+            <a href="{{ config.extra.rsvp_url }}" target="_blank" class="btn btn--primary" style="display: inline-block; width: auto;">{{ config.extra.rsvp_button }}</a>
+        </div>
+    </div>
+</section>
+
+<script>
+// Countdown
+(function() {
+    const weddingDate = new Date('{{ config.extra.wedding_datetime_iso }}');
+    function update() {
+        const now = new Date();
+        const diff = weddingDate - now;
+        if (diff <= 0) return;
+        document.getElementById('days').textContent = Math.floor(diff / 86400000);
+        document.getElementById('hours').textContent = Math.floor((diff % 86400000) / 3600000);
+        document.getElementById('minutes').textContent = Math.floor((diff % 3600000) / 60000);
+        document.getElementById('seconds').textContent = Math.floor((diff % 60000) / 1000);
+    }
+    update();
+    setInterval(update, 1000);
+})();
+
+</script>
+{% endblock %}