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", "name2": "Ainārs",
"weddingDate": "2026.05.25" "weddingDate": "2026.05.25"
}, },
"heading": "With love, on your special day", "heading": "Dāvanas, dāvanas, visiem patīk dāvanas",
"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.", "message": "Sveicu kāzās! Pirmajā kāzu gadadienā atveriet šo lapu, tad te būs kaut kas cits!",
"signature": "With love, from us", "signature": "Armands",
"giftCards": [ "giftCards": [
{ {
"id": 1, "id": 1,
"name": "IKEA Gift Card", "name": "Pirmā karte",
"description": "For your new home together", "description": "Puķu vietā",
"emoji": "🏡", "url": "https://wolt.com/en/giftcard/preview/dafb5ab9-93ce-4990-b8dd-9301c3c77e56"
"url": "https://example.com/ikea-gift"
}, },
{ {
"id": 2, "id": 2,
"name": "Booking.com", "name": "Otrā karte",
"description": "Your first trip as a married couple", "description": "Kartiņas vietā",
"emoji": "✈️", "url": "https://mega.nz/file/roxjWIZD#r_gNX0qssLi--cW7947pnXgnK6aSoq-W03FTYQ1Ldw8"
"url": "https://example.com/booking-gift"
},
{
"id": 3,
"name": "Amazon Gift Card",
"description": "Whatever your hearts desire",
"emoji": "🎁",
"url": "https://example.com/amazon-gift"
} }
], ],
"payment": { "payment": {
"label": "Or a little something extra", "label": "Revolut",
"description": "Straight to you, with love", "description": "Ļoti ceru šis strādās",
"emoji": "💸", "emoji": "💸",
"url": "https://revolut.me/example" "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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{couple.name1} & {couple.name2}</title> <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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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> <style>
:root { :root {
--ivory: #fffdf9; /* body background — warmer than pure white */ --ivory: #fffdf9;
--ivory-deep: #f9f5ef; /* icon well, emoji backgrounds */ --ivory-deep: #f9f5ef;
--white: #ffffff; /* cards — pure brilliant white */ --white: #ffffff;
--white-warm: #fefcfa; /* available for hover surfaces */ --white-warm: #fefcfa;
--cream: #f4ede3; /* fallback soft tone */ --cream: #f4ede3;
--gold: #c9a96e; /* accent: dates, ampersand, arrows, labels */ --gold: #c9a96e;
--gold-light: #e8d5b0; /* divider lines */ --gold-light: #e8d5b0;
--gold-faint: #f0e6cf; /* payment emoji background, blurs */ --gold-faint: #f0e6cf;
--text: #2c2420; /* rich warm dark (not cold black) */ --text: #2c2420;
--text-muted: #7a6e67; /* hero subtitle, descriptions */ --text-muted: #7a6e67;
--text-faint: #b8aea7; /* tertiary metadata */ --text-faint: #b8aea7;
} }
* { * {
@@ -40,21 +39,19 @@ import birds from '../assets/birds.webp';
} }
body { body {
background-color: var(--beige); background-color: var(--ivory);
color: var(--black); color: var(--text);
font-family: 'Lato', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 300; font-weight: 300;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
background-color: var(--ivory);
background-image: url('/images/wedding-bg.jpg'); background-image: url('/images/wedding-bg.jpg');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; /* parallax-like scroll */ background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* ── Watercolor SVG background blobs ── */
.wc-bg { .wc-bg {
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -70,7 +67,6 @@ import birds from '../assets/birds.webp';
inset: 0; inset: 0;
} }
/* ── Page wrapper ── */
.page { .page {
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -79,7 +75,6 @@ import birds from '../assets/birds.webp';
padding: 0 20px 60px; padding: 0 20px 60px;
} }
/* ── Hero section ── */
.hero { .hero {
text-align: center; text-align: center;
padding: 64px 0 48px; padding: 64px 0 48px;
@@ -87,12 +82,12 @@ import birds from '../assets/birds.webp';
} }
.hero-date { .hero-date {
font-family: 'Lato', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 0.7rem; font-size: 0.7rem;
letter-spacing: 0.25em; letter-spacing: 0.25em;
text-transform: uppercase; text-transform: uppercase;
color: var(--black); color: var(--text);
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -101,13 +96,13 @@ import birds from '../assets/birds.webp';
font-weight: 300; font-weight: 300;
font-size: clamp(2.6rem, 12vw, 3.6rem); font-size: clamp(2.6rem, 12vw, 3.6rem);
line-height: 1.05; line-height: 1.05;
color: var(--black); color: var(--text);
margin-bottom: 6px; margin-bottom: 6px;
} }
.hero-names .amp { .hero-names .amp {
font-style: italic; font-style: italic;
color: var(--beige-dark); color: var(--gold);
font-size: 0.85em; font-size: 0.85em;
} }
@@ -123,11 +118,11 @@ import birds from '../assets/birds.webp';
flex: 1; flex: 1;
max-width: 60px; max-width: 60px;
height: 1px; height: 1px;
background: linear-gradient(to right, transparent, var(--beige-dark)); background: linear-gradient(to right, transparent, var(--gold));
} }
.hero-divider-line.right { .hero-divider-line.right {
background: linear-gradient(to left, transparent, var(--beige-dark)); background: linear-gradient(to left, transparent, var(--gold));
} }
.hero-divider-icon { .hero-divider-icon {
@@ -139,11 +134,10 @@ import birds from '../assets/birds.webp';
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
font-size: clamp(1.1rem, 5vw, 1.35rem); font-size: clamp(1.1rem, 5vw, 1.35rem);
color: var(--black); color: var(--text);
line-height: 1.5; line-height: 1.5;
} }
/* ── Message card ── */
.message-card { .message-card {
background: var(--white); background: var(--white);
border-radius: 20px; border-radius: 20px;
@@ -156,7 +150,6 @@ import birds from '../assets/birds.webp';
animation: fadeUp 0.9s 0.15s ease both; animation: fadeUp 0.9s 0.15s ease both;
} }
/* Corner watercolor smudge accents */
.message-card::before, .message-card::before,
.message-card::after { .message-card::after {
content: ''; content: '';
@@ -169,25 +162,25 @@ import birds from '../assets/birds.webp';
} }
.message-card::before { .message-card::before {
background: var(--beige-light); background: var(--gold-faint);
top: -16px; top: -16px;
left: -16px; left: -16px;
filter: blur(18px); filter: blur(18px);
} }
.message-card::after { .message-card::after {
background: var(--beige-dark); background: var(--gold);
bottom: -16px; bottom: -16px;
right: -16px; right: -16px;
filter: blur(22px); filter: blur(22px);
} }
.message-text { .message-text {
font-family: 'Lato', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.85; line-height: 1.85;
color: var(--black); color: var(--text);
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -195,24 +188,22 @@ import birds from '../assets/birds.webp';
font-family: 'Cormorant Garamond', serif; font-family: 'Cormorant Garamond', serif;
font-style: italic; font-style: italic;
font-size: 1.1rem; font-size: 1.1rem;
color: var(--beige-dark); color: var(--gold);
text-align: right; text-align: right;
} }
/* ── Section label ── */
.section-label { .section-label {
font-family: 'Lato', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 0.65rem; font-size: 0.65rem;
letter-spacing: 0.22em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
color: var(--black); color: var(--text);
margin-bottom: 16px; margin-bottom: 16px;
padding-left: 2px; padding-left: 2px;
animation: fadeUp 0.9s 0.25s ease both; animation: fadeUp 0.9s 0.25s ease both;
} }
/* ── Gift card list ── */
.gift-list { .gift-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -228,7 +219,7 @@ import birds from '../assets/birds.webp';
border-radius: 16px; border-radius: 16px;
padding: 18px 20px; padding: 18px 20px;
text-decoration: none; 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); 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; transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: fadeUp 0.9s ease both; animation: fadeUp 0.9s ease both;
@@ -251,7 +242,7 @@ import birds from '../assets/birds.webp';
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--beige-light); background: var(--gold-faint);
border-radius: 12px; border-radius: 12px;
} }
@@ -267,19 +258,19 @@ import birds from '../assets/birds.webp';
} }
.gift-card-desc { .gift-card-desc {
font-family: 'Poppins', sans-serif;
font-size: 0.78rem; font-size: 0.78rem;
color: var(--black); color: var(--text-muted);
font-weight: 300; font-weight: 300;
} }
.gift-card-arrow { .gift-card-arrow {
color: var(--beige-dark); color: var(--gold);
font-size: 1.1rem; font-size: 1.1rem;
flex-shrink: 0; flex-shrink: 0;
opacity: 0.7; opacity: 0.7;
} }
/* ── Payment link ── */
.payment-section { .payment-section {
animation: fadeUp 0.9s 0.55s ease both; animation: fadeUp 0.9s 0.55s ease both;
} }
@@ -288,11 +279,11 @@ import birds from '../assets/birds.webp';
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
background: var(--beige-light); background: var(--gold-faint);
border-radius: 16px; border-radius: 16px;
padding: 22px 20px; padding: 22px 20px;
text-decoration: none; text-decoration: none;
color: var(--black); color: var(--text);
border: 1px solid rgba(237, 223, 200, 0.5); border: 1px solid rgba(237, 223, 200, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px rgba(217, 210, 200, 0.15); box-shadow: 0 4px 20px rgba(217, 210, 200, 0.15);
@@ -326,8 +317,9 @@ import birds from '../assets/birds.webp';
} }
.payment-desc { .payment-desc {
font-family: 'Poppins', sans-serif;
font-size: 0.78rem; font-size: 0.78rem;
color: var(--black); color: var(--text-muted);
font-weight: 300; font-weight: 300;
} }
@@ -339,7 +331,6 @@ import birds from '../assets/birds.webp';
pointer-events: none; pointer-events: none;
} }
/* ── Animation ── */
@keyframes fadeUp { @keyframes fadeUp {
from { from {
opacity: 0; opacity: 0;
@@ -414,7 +405,7 @@ import birds from '../assets/birds.webp';
</div> </div>
<!-- Gift cards --> <!-- Gift cards -->
<p class="section-label">Your gifts</p> <p class="section-label">Wolt dāvanu kartes</p>
<div class="gift-list"> <div class="gift-list">
{giftCards.map((card) => ( {giftCards.map((card) => (
<a href={card.url} target="_blank" rel="noopener noreferrer" class="gift-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 --> <!-- Payment link -->
<div class="payment-section"> <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"> <a href={payment.url} target="_blank" rel="noopener noreferrer" class="gift-card">
<div class="payment-body"> <div class="payment-body">
<div class="payment-label">{payment.label}</div> <div class="payment-label">{payment.label}</div>