Vagalehns/ElzaUnAinarsGift
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Last

Browse Source
This commit is contained in:
Armands Vagalis
2026-05-23 14:48:11 +03:00
parent ae85143efc
commit f5dce858d0
3 changed files with 339 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/birds.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 362 KiB

31
src/data/gift.json
View File

@@ -4,35 +4,26 @@
"name2": "Ainārs",
"weddingDate": "2026.05.25"
},
"heading": "With love, on your special day",
"message": "Wishing you a lifetime of joy, laughter, and adventure together. May your home be filled with warmth and your hearts with happiness. This small gift comes with all our love.",
"signature": "With love, from us",
"heading": "Dāvanas, dāvanas, visiem patīk dāvanas",
"message": "Sveicu kāzās! Pirmajā kāzu gadadienā atveriet šo lapu, tad te būs kaut kas cits!",
"signature": "Armands",
"giftCards": [
{
"id": 1,
"name": "IKEA Gift Card",
"description": "For your new home together",
"emoji": "🏡",
"url": "https://example.com/ikea-gift"
"name": "Pirmā karte",
"description": "Puķu vietā",
"url": "https://wolt.com/en/giftcard/preview/dafb5ab9-93ce-4990-b8dd-9301c3c77e56"
},
{
"id": 2,
"name": "Booking.com",
"description": "Your first trip as a married couple",
"emoji": "✈️",
"url": "https://example.com/booking-gift"
},
{
"id": 3,
"name": "Amazon Gift Card",
"description": "Whatever your hearts desire",
"emoji": "🎁",
"url": "https://example.com/amazon-gift"
"name": "Otrā karte",
"description": "Kartiņas vietā",
"url": "https://mega.nz/file/roxjWIZD#r_gNX0qssLi--cW7947pnXgnK6aSoq-W03FTYQ1Ldw8"
}
],
"payment": {
"label": "Or a little something extra",
"description": "Straight to you, with love",
"label": "Revolut",
"description": "Ļoti ceru šis strādās",
"emoji": "💸",
"url": "https://revolut.me/example"
}

91
src/pages/index.astro
View File

@@ -13,24 +13,23 @@ import birds from '../assets/birds.webp';
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{couple.name1} & {couple.name2}</title>
<!-- Fonts: Cormorant Garamond (display) + Lato (body) -->
<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,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Poppins:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet" />
<style>
:root {
--ivory: #fffdf9; /* body background — warmer than pure white */
--ivory-deep: #f9f5ef; /* icon well, emoji backgrounds */
--white: #ffffff; /* cards — pure brilliant white */
--white-warm: #fefcfa; /* available for hover surfaces */
--cream: #f4ede3; /* fallback soft tone */
--gold: #c9a96e; /* accent: dates, ampersand, arrows, labels */
--gold-light: #e8d5b0; /* divider lines */
--gold-faint: #f0e6cf; /* payment emoji background, blurs */
--text: #2c2420; /* rich warm dark (not cold black) */
--text-muted: #7a6e67; /* hero subtitle, descriptions */
--text-faint: #b8aea7; /* tertiary metadata */
--ivory: #fffdf9;
--ivory-deep: #f9f5ef;
--white: #ffffff;
--white-warm: #fefcfa;
--cream: #f4ede3;
--gold: #c9a96e;
--gold-light: #e8d5b0;
--gold-faint: #f0e6cf;
--text: #2c2420;
--text-muted: #7a6e67;
--text-faint: #b8aea7;
}
* {
@@ -40,21 +39,19 @@ import birds from '../assets/birds.webp';
}
body {
background-color: var(--beige);
color: var(--black);
font-family: 'Lato', sans-serif;
background-color: var(--ivory);
color: var(--text);
font-family: 'Poppins', sans-serif;
font-weight: 300;
min-height: 100vh;
overflow-x: hidden;
background-color: var(--ivory);
background-image: url('/images/wedding-bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed; /* parallax-like scroll */
background-attachment: fixed;
background-repeat: no-repeat;
}
/* ── Watercolor SVG background blobs ── */
.wc-bg {
position: fixed;
inset: 0;
@@ -70,7 +67,6 @@ import birds from '../assets/birds.webp';
inset: 0;
}
/* ── Page wrapper ── */
.page {
position: relative;
z-index: 1;
@@ -79,7 +75,6 @@ import birds from '../assets/birds.webp';
padding: 0 20px 60px;
}
/* ── Hero section ── */
.hero {
text-align: center;
padding: 64px 0 48px;
@@ -87,12 +82,12 @@ import birds from '../assets/birds.webp';
}
.hero-date {
font-family: 'Lato', sans-serif;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--black);
color: var(--text);
margin-bottom: 20px;
}
@@ -101,13 +96,13 @@ import birds from '../assets/birds.webp';
font-weight: 300;
font-size: clamp(2.6rem, 12vw, 3.6rem);
line-height: 1.05;
color: var(--black);
color: var(--text);
margin-bottom: 6px;
}
.hero-names .amp {
font-style: italic;
color: var(--beige-dark);
color: var(--gold);
font-size: 0.85em;
}
@@ -123,11 +118,11 @@ import birds from '../assets/birds.webp';
flex: 1;
max-width: 60px;
height: 1px;
background: linear-gradient(to right, transparent, var(--beige-dark));
background: linear-gradient(to right, transparent, var(--gold));
}
.hero-divider-line.right {
background: linear-gradient(to left, transparent, var(--beige-dark));
background: linear-gradient(to left, transparent, var(--gold));
}
.hero-divider-icon {
@@ -139,11 +134,10 @@ import birds from '../assets/birds.webp';
font-style: italic;
font-weight: 300;
font-size: clamp(1.1rem, 5vw, 1.35rem);
color: var(--black);
color: var(--text);
line-height: 1.5;
}
/* ── Message card ── */
.message-card {
background: var(--white);
border-radius: 20px;
@@ -156,7 +150,6 @@ import birds from '../assets/birds.webp';
animation: fadeUp 0.9s 0.15s ease both;
}
/* Corner watercolor smudge accents */
.message-card::before,
.message-card::after {
content: '';
@@ -169,25 +162,25 @@ import birds from '../assets/birds.webp';
}
.message-card::before {
background: var(--beige-light);
background: var(--gold-faint);
top: -16px;
left: -16px;
filter: blur(18px);
}
.message-card::after {
background: var(--beige-dark);
background: var(--gold);
bottom: -16px;
right: -16px;
filter: blur(22px);
}
.message-text {
font-family: 'Lato', sans-serif;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 0.95rem;
line-height: 1.85;
color: var(--black);
color: var(--text);
margin-bottom: 20px;
}
@@ -195,24 +188,22 @@ import birds from '../assets/birds.webp';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--beige-dark);
color: var(--gold);
text-align: right;
}
/* ── Section label ── */
.section-label {
font-family: 'Lato', sans-serif;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--black);
color: var(--text);
margin-bottom: 16px;
padding-left: 2px;
animation: fadeUp 0.9s 0.25s ease both;
}
/* ── Gift card list ── */
.gift-list {
display: flex;
flex-direction: column;
@@ -228,7 +219,7 @@ import birds from '../assets/birds.webp';
border-radius: 16px;
padding: 18px 20px;
text-decoration: none;
color: var(--black);
color: var(--text);
box-shadow: 0 2px 10px rgba(217, 210, 200, 0.08), 0 0 0 1px rgba(237, 223, 200, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: fadeUp 0.9s ease both;
@@ -251,7 +242,7 @@ import birds from '../assets/birds.webp';
display: flex;
align-items: center;
justify-content: center;
background: var(--beige-light);
background: var(--gold-faint);
border-radius: 12px;
}
@@ -267,19 +258,19 @@ import birds from '../assets/birds.webp';
}
.gift-card-desc {
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
color: var(--black);
color: var(--text-muted);
font-weight: 300;
}
.gift-card-arrow {
color: var(--beige-dark);
color: var(--gold);
font-size: 1.1rem;
flex-shrink: 0;
opacity: 0.7;
}
/* ── Payment link ── */
.payment-section {
animation: fadeUp 0.9s 0.55s ease both;
}
@@ -288,11 +279,11 @@ import birds from '../assets/birds.webp';
display: flex;
align-items: center;
gap: 16px;
background: var(--beige-light);
background: var(--gold-faint);
border-radius: 16px;
padding: 22px 20px;
text-decoration: none;
color: var(--black);
color: var(--text);
border: 1px solid rgba(237, 223, 200, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px rgba(217, 210, 200, 0.15);
@@ -326,8 +317,9 @@ import birds from '../assets/birds.webp';
}
.payment-desc {
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
color: var(--black);
color: var(--text-muted);
font-weight: 300;
}
@@ -339,7 +331,6 @@ import birds from '../assets/birds.webp';
pointer-events: none;
}
/* ── Animation ── */
@keyframes fadeUp {
from {
opacity: 0;
@@ -414,7 +405,7 @@ import birds from '../assets/birds.webp';
</div>
<!-- Gift cards -->
<p class="section-label">Your gifts</p>
<p class="section-label">Wolt dāvanu kartes</p>
<div class="gift-list">
{giftCards.map((card) => (
<a href={card.url} target="_blank" rel="noopener noreferrer" class="gift-card">
@@ -429,7 +420,7 @@ import birds from '../assets/birds.webp';
<!-- Payment link -->
<div class="payment-section">
<p class="section-label">A little extra</p>
<p class="section-label">Ieguldījums jūsu sapņu ceļojumā</p>
<a href={payment.url} target="_blank" rel="noopener noreferrer" class="gift-card">
<div class="payment-body">
<div class="payment-label">{payment.label}</div>