This commit is contained in:
Gus Ruben 2025-07-14 12:17:05 -04:00
parent ed1ef1f168
commit 45cd04da02
33 changed files with 308 additions and 76 deletions

View file

@ -23,4 +23,8 @@
--color-gradient-daydream: linear-gradient(to bottom, #487DAB, #3F709A);
--color-daydream: #44DBC8;
--color-daydream-hover: #3CC2AF;
--color-dark: #4477A3;
--color-light: #FCF7C4;
--color-pink: #E472AB;
--color-pink-dark: #A65A80;
}

View file

@ -10,7 +10,7 @@
// Configurable angles for each point (in degrees)
// 0 = horizontal, positive = upward slope, negative = downward slope
const pointAngles = [-10, -10, -10, 0]; // Last point angle now configurable for approach slope
const pointAngles = [0, 0, -10, -10, -10, 0, 0]; // Point 0: center, Point 0.5: left curve, Points 1-4: cards, Point 5: final card
// Generate control points for smooth curves
const controlPoints = [];
@ -33,25 +33,23 @@
y: points[i].y + Math.sin(angleRadians) * controlDistance
};
} else if (i === points.length - 1) {
// Last point - curve out to the right and approach from right-to-left
// Last point - simple straight-down vertical approach
const prev = points[i - 1];
const distance = Math.sqrt(Math.pow(points[i].x - prev.x, 2) + Math.pow(points[i].y - prev.y, 2));
// Create a wide curve that goes out to the right and comes back
const controlDistance = distance * tension * 1.2; // Increased for wider curve
// Create a simple curve that transitions smoothly to vertical
const controlDistance = distance * tension * 0.4; // Reduced for simpler curve
// First control point - extend out to the right from the previous point's flow
// First control point - minimal horizontal extension from previous point
cp1 = {
x: points[i].x + controlDistance * 0.8 , // Go out to the right
y: points[i].y - controlDistance * 0.2 // Slight upward curve
x: prev.x + (points[i].x - prev.x) * 0.7, // Move most of the way horizontally
y: prev.y + (points[i].y - prev.y) * 0.3 // Move only slightly vertically
};
// Second control point - approach from the right at the specified angle
// Force approach from right side regardless of angle
const approachDistance = controlDistance * 0.6;
// Second control point - directly above target for straight-down approach
cp2 = {
x: points[i].x + approachDistance, // Always approach from right
y: points[i].y + Math.sin(angleRadians) * approachDistance // Apply angle to vertical component
x: points[i].x, // Directly above the target point
y: points[i].y - controlDistance * 0.5 // Close approach from above
};
} else {
// Middle points - flow at specified angle through the point
@ -114,7 +112,7 @@
// Generate the same control points as the path
const tension = 1.2;
const pointAngles = [-10, -10, -10, 0];
const pointAngles = [0, 0, -10, -10, -10, 0, 0];
const controlPoints = [];
for (let i = 0; i < points.length; i++) {
@ -134,17 +132,16 @@
} else if (i === points.length - 1) {
const prev = points[i - 1];
const distance = Math.sqrt(Math.pow(points[i].x - prev.x, 2) + Math.pow(points[i].y - prev.y, 2));
const controlDistance = distance * tension * 1.2;
const controlDistance = distance * tension * 0.4;
cp1 = {
x: points[i].x + controlDistance * 0.8,
y: points[i].y - controlDistance * 0.2
x: prev.x + (points[i].x - prev.x) * 0.7,
y: prev.y + (points[i].y - prev.y) * 0.3
};
const approachDistance = controlDistance * 0.6;
cp2 = {
x: points[i].x + approachDistance,
y: points[i].y + Math.sin(angleRadians) * approachDistance
x: points[i].x,
y: points[i].y - controlDistance * 0.5
};
} else {
const prev = points[i - 1];
@ -232,6 +229,15 @@
let currentAirplaneProgress = 0;
let animationFrameId: number | null = null;
let isFlipped = false;
let showVideoPopup = false;
function openVideoPopup() {
showVideoPopup = true;
}
function closeVideoPopup() {
showVideoPopup = false;
}
function updateAirplanePosition() {
const container = document.getElementById("islands-container");
@ -271,8 +277,9 @@
// Get points for path calculation
const points = [];
for (let i = 1; i <= 4; i++) {
const element = document.querySelector(`[data-point="${i}"]`);
const pointIds = ["0", "0.5", "1", "2", "3", "4", "5"];
pointIds.forEach(id => {
const element = document.querySelector(`[data-point="${id}"]`);
if (element) {
const rect = element.getBoundingClientRect();
points.push({
@ -280,7 +287,7 @@
y: rect.top + rect.height / 2 - containerRect.top
});
}
}
});
if (points.length > 0) {
const airplanePos = getPointAlongPath(points, currentAirplaneProgress);
@ -317,8 +324,9 @@
const points = [];
// Get points in order by data-point attribute
for (let i = 1; i <= 4; i++) {
const element = document.querySelector(`[data-point="${i}"]`);
const pointIds = ["0", "0.5", "1", "2", "3", "4", "5"];
pointIds.forEach(id => {
const element = document.querySelector(`[data-point="${id}"]`);
if (element) {
const rect = element.getBoundingClientRect();
points.push({
@ -326,7 +334,7 @@
y: rect.top + rect.height / 2 - containerRect.top
});
}
}
});
const pathData = createSmoothPath(points);
pathElement.setAttribute("d", pathData);
@ -367,7 +375,7 @@
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
<div class="flex flex-col items-center justify-center h-screen text-center bg-gradient-to-b from-[#CCF4FD] to-[#9DACF2] bg-blend-overlay">
<div class="flex flex-col items-center justify-center h-screen text-center bg-gradient-to-b from-[#CCF4FD] to-[#B8D9F8] bg-blend-overlay">
<div class="absolute top-0 left-0 w-full h-full bg-[url(/buildings-back.png)] bg-no-repeat bg-contain pointer-events-none -translate-y-15"></div>
<div class="absolute top-0 left-0 w-full h-full bg-[url(/buildings-front.png)] bg-no-repeat bg-contain pointer-events-none -translate-y-15"></div>
@ -375,63 +383,160 @@
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-repeat pointer-events-none opacity-100 -translate-y-15 bg-center mix-blend-overlay" style="mask-image: url('/buildings-top.png'); mask-size: contain; mask-repeat: no-repeat; mask-position: center top; -webkit-mask-image: url('/buildings-top.png'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top;"></div>
<div class="inline-block relative">
<h2
class="text-xl font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent absolute left-[calc(50%+3rem)] -translate-x-1/2 bottom-8 italic"
class="text-xl font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent absolute left-[calc(50%+4rem)] -translate-x-1/2 bottom-8 italic w-max md:text-lg sm:text-base"
>
September 24th & 25th
September 24th & 25th, 2025
</h2>
<img src="daydream.png" alt="Daydream" class="h-40 mb-6" />
<img src="daydream.png" alt="Daydream" class="h-40 mb-6 w-auto object-contain max-w-full" />
</div>
<div class="relative inline-block">
<h3
class="text-3xl italic font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent"
>
The World's Biggest High School Game Jam
Game jam for high schoolers
</h3>
<img
src="underline.svg"
alt=""
class="absolute left-1/2 -translate-x-1/2 -mt-1 h-auto scale-115"
/>
<h4
class="text-2xl opacity-90 mt-2 font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent"
>
Organized by high schoolers in 100 cities worldwide
</h4>
</div>
<div class="mt-8 flex flex-col items-center gap-3 z-10">
<input
type="email"
placeholder="Enter Your Email Address"
class="w-80 px-4 py-2 bg-white text-black rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-daydream font-sans"
/>
<div class="rounded-full bg-white border-2 border-dark font-sans p-2 flex flex-row items-center gap-2 shadow-[0_3px_0_0_theme(colors.dark)] focus-within:border-pink focus-within:shadow-[0_3px_0_0_#E472AB] has-[button:active]:border-dark has-[button:active]:shadow-[0_3px_0_0_theme(colors.dark)] has-[button:focus]:border-dark has-[button:focus]:shadow-[0_3px_0_0_theme(colors.dark)]">
<input
type="email"
placeholder="Enter email to organize Daydream"
class="w-80 px-3 py-1 text-dark focus:outline-none"
/>
<button class="bg-light h-full px-5 rounded-full border-b-2 border-[#B3866A] cursor-pointer hover:border-b-4 hover:transform hover:-translate-y-0.5 active:border-b-0 active:transform active:translate-y-0.5 focus:outline-none transition-all duration-100">
<img src="submit.svg" alt="Go">
</button>
</div>
<button
class="w-80 px-4 py-2 bg-daydream text-white rounded-full border border-gray-300 hover:bg-daydream-hover transition-colors font-sans font-bold cursor-pointer"
class="w-max px-4 py-2 bg-pink text-white rounded-full border-b-2 border-pink-dark hover:brightness-90 transition-colors font-sans cursor-pointer mx-auto relative overflow-hidden"
>
SIGN UP NOW
Get free stickers
<img
src="button-clouds.svg"
alt=""
class="absolute bottom-0 left-1/2 -translate-x-1/2 w-auto object-contain pointer-events-none"
>
</button>
</div>
<img src="hot-air-balloon.png" alt="" class="absolute w-1/8 right-32 bottom-40 z-20">
<img src="hot-air-balloon.png" alt="" class="absolute w-1/12 left-36 bottom-81 z-20">
<!-- <img src="hot-air-balloon.png" alt="" class="absolute w-1/8 right-32 bottom-40 z-20"> -->
<!-- <img src="hot-air-balloon.png" alt="" class="absolute w-1/12 left-36 bottom-81 z-20"> -->
<img src="/clouds-right.png" alt="" class="absolute right-0 w-7/12 -bottom-6">
<img src="/clouds-left.png" alt="" class="absolute left-0 w-5/12 -bottom-4">
<img src="/clouds-top-middle-bg.svg" alt="" class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24">
<div class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24 bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none h-full" style="mask-image: url('/clouds-top-middle-bg.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/clouds-top-middle-bg.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;"></div>
<img src="/clouds-top-right-bg.svg" alt="" class="absolute right-0 w-1/2 -bottom-12 translate-y-1/2">
<div class="absolute right-0 w-1/2 -bottom-12 translate-y-1/2 bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none h-full" style="mask-image: url('/clouds-top-right-bg.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/clouds-top-right-bg.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;"></div>
<img src="/clouds-top-left-bg.svg" alt="" class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2">
<div class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2 bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none h-full" style="mask-image: url('/clouds-top-left-bg.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/clouds-top-left-bg.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;"></div>
<img src="/clouds-top-middle.png" alt="" class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24">
<img src="/clouds-top-right.png" alt="" class="absolute right-0 w-1/2 -bottom-12 translate-y-1/2">
<img src="/clouds-top-left.png" alt="" class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2">
<!-- Video Thumbnail Button -->
<button
on:click={openVideoPopup}
class="absolute bottom-8 right-8 w-72 h-40 rounded overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer group md:w-56 md:h-32 sm:w-40 sm:h-24"
>
<img src="thumbnail.png" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
<div class="absolute inset-0 bg-[rgba(0,0,0,0.1)] bg-opacity-30 group-hover:bg-opacity-20 transition-colors duration-300 flex items-center justify-center">
<div class="w-8 h-8 bg-[rgba(255,255,255,0.5)] bg-opacity-20 rounded-full flex items-center justify-center md:w-6 md:h-6 sm:w-4 sm:h-4">
<div class="w-0 h-0 border-l-[8px] border-l-[rgba(255,255,255,0.5)] border-t-[5px] border-t-transparent border-b-[5px] border-b-transparent ml-1 md:border-l-[6px] md:border-t-[4px] md:border-b-[4px] sm:border-l-[4px] sm:border-t-[3px] sm:border-b-[3px]"></div>
</div>
</div>
</button>
</div>
<div class="flex flex-row flex-wrap w-full h-auto bg-gradient-to-b from-[#9DACF2] to-[#FDC5D1] px-36 pb-50 relative" id="islands-container">
<div class="w-full relative flex items-start justify-center min-h-screen">
<!-- background -->
<div class="absolute top-0 left-0 w-full h-full -z-50 bg-[#FCEFC5]"></div>
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-30 pointer-events-none -z-40"></div>
<div class="relative max-w-4xl mx-auto h-full flex items-start pt-24 px-8">
<div class="relative z-20 px-20 pt-20 pb-32 rounded-lg mb-0" style="background-image: url('/letter-top.png'), linear-gradient(to bottom, #FCEFC5 100px, transparent 100px), url('/letter-loop.png'); background-size: 100% auto, 100% auto, 100% auto; background-repeat: no-repeat, no-repeat, repeat-y; background-position: top, top, top; background-attachment: local, local, local;">
<h2 class="text-5xl font-serif italic text-[#8B4513] mb-10 relative">
Dear Hacker,
<img src="/underline.svg" alt="" class="absolute left-0 -bottom-3 w-64 h-auto opacity-70">
</h2>
<div class="text-[#8B4513] font-serif text-xl leading-relaxed space-y-8">
<p>
Hackathons are <em class="italic font-bold">magical</em>. You've probably felt it before: staying up all night
with your friends, building something that actually works, finally meeting
everyone whose code you've admired. That rush when your code compiles at 3:00 am
and suddenly your wild idea becomes real.
</p>
<p class="font-bold text-2xl">
Hack Club wants you to organize a hackathon.
</p>
<p>
We want more hackers than ever from all over the world to have this life
changing experience, and we want your help in making that happen.
</p>
<p>
Sign up to organize a Daydream event in your city! All of our hackathons are
teen-led. You do not need to have any previous experience, and Hack Club
will provide you with funding and coaching.
</p>
<p>
Our goal is to get <span class="font-bold">4,000 Hack Clubbers</span> to make projects they're proud of
through Daydream, and we're giving out over <span class="font-bold">$120k in funding</span> to organizers
like you!
</p>
<p class="text-center font-bold text-2xl mt-10 text-[#2C3E50]">
Check out our video!
</p>
</div>
</div>
</div>
<div class="w-full absolute z-30 max-h-64 bottom-0 pointer-events-none">
<img src="/cloud-cover-1.png" alt="" class="w-full h-full object-contain">
<!-- Invisible marker for airplane starting point -->
<div class="absolute top-1/2 left-1/2 w-1 h-1 -translate-x-1/2 -translate-y-1/2" data-point="0"></div>
<!-- Intermediate point to the left -->
<div class="absolute top-1/2 left-1/4 w-1 h-1 -translate-x-1/2 -translate-y-1/2" data-point="0.5"></div>
</div>
</div>
<div class="w-full h-64 bg-[#FCEFC5]"></div>
<div class="flex flex-row flex-wrap w-full h-auto bg-gradient-to-b from-[#FCEFC5] to-[#FEC1CF] px-36 pb-50 relative" id="islands-container">
<img src="/clouds-left-2.png" alt="" class="absolute left-0 w-3/12 top-12">
<img src="/clouds-left-3.png" alt="" class="absolute left-0 w-2/12 bottom-32">
<img src="/clouds-right-2.png" alt="" class="absolute right-0 w-3/12 bottom-0">
<!-- SVG Path Overlay -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0" id="path-svg">
<path id="dotted-path" stroke="rgba(255,255,255,0.3)" stroke-width="3" fill="none" stroke-dasharray="8,8" opacity="0.7"></path>
<path id="dotted-path" stroke="rgba(255,255,255,0.5)" stroke-width="3" fill="none" stroke-dasharray="8,8" opacity="0.7"></path>
</svg>
<img src="paper-airplane.png" alt="Paper airplane" class="h-16 absolute z-5" id="paper-airplane">
<img src="paper-airplane.png" alt="Paper airplane" class="h-16 absolute z-10" id="paper-airplane">
<div class="flex flex-col items-center w-max basis-1/2 z-10">
<div class="relative translate-y-8">
<img src="/letter-1-front.png" alt="" class="object-contain absolute -bottom-16 -left-13 w-28 h-28">
<img src="/letter-1-back.png" alt="" class="object-contain absolute -bottom-16 -left-13 w-28 h-28 -z-10">
<div class="bg-[#FFF5FA] border-2 border-[#AA8B83] rounded-2xl text-xl font-serif p-6 w-56 text-center" data-point="1">
<span class="font-sans text-[#EEA7CA] font-bold text-[1.3rem] mr-1">#1:</span> Sign up for a Daydream event in your city
<span class="font-sans text-[#E472AB] font-bold text-[1.3rem] mr-1">#1:</span> Find a team of co-organizers
</div>
</div>
<img src="/island-1.png" alt="" class="w-72 h-72 object-contain">
@ -442,7 +547,7 @@
<img src="/letter-2-front.png" alt="" class="object-contain absolute -bottom-16 -right-13 w-28 h-28">
<img src="/letter-2-back.png" alt="" class="object-contain absolute -bottom-16 -right-13 w-28 h-28 -z-10">
<div class="bg-[#FFF5FA] border-2 border-[#AA8B83] rounded-2xl text-xl font-serif p-6 w-56 text-center" data-point="2">
<span class="font-sans text-[#639DEB] font-bold text-[1.3rem] mr-1">#2:</span> Find a team of other teenagers at Daydream
<span class="font-sans text-[#639DEB] font-bold text-[1.3rem] mr-1">#2:</span> Find a venue to host your hackathon
</div>
</div>
<img src="/island-3.png" alt="" class="w-86 h-86 object-contain">
@ -452,7 +557,7 @@
<img src="/letter-3-front.png" alt="" class="object-contain absolute -bottom-18 left-24 w-28 h-28">
<img src="/letter-3-back.png" alt="" class="object-contain absolute -bottom-18 left-24 w-28 h-28 -z-10">
<div class="bg-[#FFF5FA] border-2 border-[#AA8B83] rounded-2xl text-xl font-serif p-6 w-56 text-center" data-point="3">
<span class="font-sans text-[#AB68E2] font-bold text-[1.3rem] mr-1">#3:</span> Start building your game - <u>No experience needed</u>
<span class="font-sans text-[#AB68E2] font-bold text-[1.3rem] mr-1">#3:</span> Find sponsors to buy merch and prizes
</div>
</div>
<img src="/island-2.png" alt="" class="w-72 h-72 object-contain">
@ -462,22 +567,35 @@
<img src="/letter-4-front.png" alt="" class="object-contain absolute -bottom-16 -right-13 w-28 h-28">
<img src="/letter-4-back.png" alt="" class="object-contain absolute -bottom-16 -right-13 w-28 h-28 -z-10">
<div class="bg-[#FFF5FA] border-2 border-[#AA8B83] rounded-2xl text-xl font-serif p-6 w-56 text-center" data-point="4">
<span class="font-sans text-[#F2993E] font-bold text-[1.3rem] mr-1">#4:</span> Attend workshops or talk to one of our mentors for help
<span class="font-sans text-[#F2993E] font-bold text-[1.3rem] mr-1">#4:</span> Buy supplies, order food, and prepare workshops
</div>
</div>
<img src="/island-4.png" alt="" class="w-88 h-88 object-contain">
</div>
<!-- Final Card -->
<div class="flex flex-col items-center w-full basis-full translate-y-40 z-20">
<div class="relative">
<div class="bg-[url('/card-final.png')] bg-contain bg-no-repeat bg-center text-2xl font-serif pt-24 px-8 w-128 h-96 text-center" data-point="5">
<span class="font-sans text-[#F2CC32] font-bold text-[1.5rem] mr-1">#5:</span> Run the game jam!!
</div>
</div>
</div>
<img src="/clouds-pink-left.png" alt="" class="absolute left-0 w-5/12 bottom-0 translate-y-32 z-50 pointer-events-none">
<img src="/clouds-pink-right.png" alt="" class="absolute right-0 w-5/12 bottom-0 translate-y-32 z-50 pointer-events-none">
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none bg-position-[0_100vh]"></div>
</div>
<div class="w-full bg-gradient-to-b from-[#FDC5D1] to-[#FAE3C9] items-center justify-center px-32 relative">
<div class="w-full bg-gradient-to-b from-[#FDC5D1] to-[#FAE3C9] items-center justify-center px-32 relative pt-72">
<div class="relative w-full max-w-3xl mx-auto">
<img src="banner.png" alt="" class="absolute top-0 left-1/2 -translate-x-1/2 h-24 w-auto z-10 scale-150">
<img src="hole.png" alt="" class="w-full h-full max-w-3xl">
<iframe
src="https://hackclub.com/map/"
class="absolute top-0 left-0 w-full h-full border-0"
style="mask: url('hole.png') no-repeat center; -webkit-mask: url('hole.png') no-repeat center; mask-size: contain; -webkit-mask-size: contain; pointer-events: none;"
style="mask: url('hole.png') no-repeat center; -webkit-mask: url('hole.png') no-repeat center; mask-size: contain; -webkit-mask-size: contain;"
title="Map">
</iframe>
</div>
@ -486,77 +604,77 @@
<div class="w-full py-24 bg-gradient-to-b from-[#FAE3C9] to-[#e99cce] relative flex flex-col items-center justify-center">
<img src="faq-clouds.png" alt="" class="w-full">
<h1 class="text-9xl font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent mb-12">FAQ</h1>
<img src="faq.png" alt="FAQ" class="mb-12 h-48">
<!-- FAQ Grid -->
<div class="grid grid-cols-2 gap-8 max-w-6xl px-8 z-10">
<!-- FAQ Item 1 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform -rotate-2">
<img src="window-3.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">Who can participate in Daydream?</h3>
<p class="text-sm">All high-school & upper-middle-school aged students are welcome to come!</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform rotate-1">
<img src="window-4.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">Can I organize a Daydream in my city?</h3>
<p class="text-sm">Definitely! Contact us via daydream@hackclub.com or join #daydream on slack.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform rotate-2">
<img src="window-2.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">All this, for free?</h3>
<p class="text-sm">Yep! Food, swag and good vibes are all included. Plus, if you're joining us from afar, we'll cover the cost of gas or a bus / train ticket.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="relative">
<div class="relative transform -rotate-1">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">What do I need?</h3>
<p class="text-sm">Your laptop, chargers, toiletries, sleeping bags, and an open mind!</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform rotate-1">
<img src="window-4.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">What has Hack Club done before?</h3>
<p class="text-sm">Hack Club has run an overnight hackathon in San Francisco, a Game Jam across 50 cities, a hackathon on a train from Vermont to Los Angeles, and much more!</p>
</div>
</div>
<!-- FAQ Item 6 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform rotate-1">
<img src="window-3.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">I'm not good at coding. Can I still participate?</h3>
<p class="text-sm">This game jam is for all skill levels! We'll have workshops and other events so join us and let's learn together.</p>
</div>
</div>
<!-- FAQ Item 7 -->
<div class="relative">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="relative transform -rotate-2">
<img src="window-2.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">What if my parents are concerned?</h3>
<p class="text-sm">We're here to help! You can see our parent guide here, or they can reach out to us at daydream@hackclub.com for questions.</p>
</div>
</div>
<!-- FAQ Item 8 -->
<div class="relative">
<div class="relative transform -rotate-1">
<img src="window-1.png" alt="window" class="w-full h-full object-contain">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24">
<div class="absolute top-20 left-12 right-12 bottom-16 flex flex-col items-center justify-center text-center px-24 opacity-70">
<h3 class="text-xl font-serif font-bold mb-4">What can I make at Daydream?</h3>
<p class="text-sm">ANY type of game based on the theme! Platformer, visual novel, clicker game, etc. Be as creative as possible!</p>
</div>
@ -566,10 +684,59 @@
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
</div>
<div class="w-full bg-white relative -z-10 min-h-80">
<div class="w-full bg-[#FFFFF8] relative -z-10 min-h-80">
<div class="absolute top-0 left-0 w-full h-full bg-[url('/noise.png')] bg-repeat opacity-10 pointer-events-none z-0"></div>
<div class="absolute w-full h-32 bg-[url('brushstroking.png')] bg-repeat-x z-10 bg-size-[100vw_100vh] mix-blend-overlay -translate-0.5" style="mask-image: url(/footer-clouds.png); mask-size: contain; mask-repeat: repeat-x; -webkit-mask-image: url(/footer-clouds.png); -webkit-mask-size: contain; -webkit-mask-repeat: repeat-x;"></div>
<div class="w-full h-32 bg-[#e99cce] z-5" style="mask-image: url(/footer-clouds.png); mask-size: contain; mask-repeat: repeat-x; -webkit-mask-image: url(/footer-clouds.png); -webkit-mask-size: contain; -webkit-mask-repeat: repeat-x;"></div>
<!-- Footer Text -->
<div class="absolute bottom-20 left-32 text-center z-20">
<p class="text-gray-700 mb-2">Made with ♡ by teenagers, for teenagers at Hack Club</p>
<div class="flex space-x-4">
<a href="https://hackclub.com" class="text-gray-700 hover:text-gray-900 transition-colors">Hack Club</a>
<span class="text-gray-700"></span>
<a href="https://hackclub.com/slack" class="text-gray-700 hover:text-gray-900 transition-colors">Slack</a>
<span class="text-gray-700"></span>
<a href="https://hackclub.com/clubs" class="text-gray-700 hover:text-gray-900 transition-colors">Clubs</a>
<span class="text-gray-700"></span>
<a href="https://hackclub.com/hackathons" class="text-gray-700 hover:text-gray-900 transition-colors">Hackathons</a>
</div>
</div>
<div class="absolute bottom-2 right-16 h-2/3 aspect-square bg-[url('brushstroking.png')] bg-repeat z-10 bg-size-[100vw_100vh] mix-blend-overlay" style="mask-image: url(/thought-bubbles.png); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url(/thought-bubbles.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;"></div>
<div class="absolute bottom-2 right-16 h-2/3 aspect-square bg-[#e99cce]" style="mask-image: url(/thought-bubbles.png); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url(/thought-bubbles.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;"></div>
</div>
</div>
<!-- Video Popup Modal -->
{#if showVideoPopup}
<div
class="fixed inset-0 bg-[rgba(0,0,0,0.5)] bg-opacity-70 flex items-center justify-center z-50"
on:click={closeVideoPopup}
on:keydown={(e) => e.key === 'Escape' && closeVideoPopup()}
role="dialog"
aria-modal="true"
aria-label="Video popup"
tabindex="-1"
>
<button
class="absolute top-4 right-4 z-10 w-8 h-8 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full flex items-center justify-center text-white text-xl font-bold transition-colors duration-200"
on:click={closeVideoPopup}
aria-label="Close video"
>
×
</button>
<div
class="relative w-[90vw] h-[90vh] max-w-6xl max-h-[80vh] bg-black rounded-lg overflow-hidden"
on:click|stopPropagation
>
<iframe
src="https://www.youtube.com/embed/O44y8TeJrNE?autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
class="w-full h-full"
></iframe>
</div>
</div>
{/if}

BIN
site/static/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

View file

@ -0,0 +1,25 @@
<svg width="256" height="20" viewBox="0 0 256 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_650_43)">
<g opacity="0.1" filter="url(#filter0_d_650_43)">
<path d="M-21 6.6094C-20.4549 5.96016 -19.3646 4.47137 -17.5043 2.79089C-16.7601 2.11869 -15.8607 1.48261 -14.823 0.784402C-11.7598 -1.27659 -2.97132 1.18597 0.555604 2.87344C2.44241 3.7762 4.60139 9.81502 7.06925 11.5375C7.61357 11.9174 7.89187 12.2385 7.95098 12.1965C8.0101 12.1545 7.79336 11.7851 7.79008 11.4101C7.77329 9.49257 10.8474 8.05199 12.7619 7.4881C13.6642 7.22235 14.8965 10.2519 16.1542 10.4366C17.1072 10.5765 17.6352 11.833 18.673 12.3479C20.6022 13.3052 22.1244 10.7192 23.0521 10.7178C24.1745 10.7161 24.9715 11.6483 25.5183 12.3451C26.1795 13.1877 25.96 15.0904 26.0142 16.6785C26.05 17.7297 27.9237 14.4551 29.6741 13.3805C30.7255 12.735 32.0845 12.5858 33.1222 12.3983C35.4193 11.9832 37.4471 17.7688 38.9265 18.9358C39.2743 19.2101 39.3124 19.6326 39.6933 19.8229C41.9087 20.9296 44.5633 19.3611 45.4385 19.0365C46.2021 18.7533 45.5584 17.3154 45.225 15.7749C45.0215 14.8342 46.642 14.1392 47.844 13.6732C49.6849 12.9596 52.0014 13.4816 54.6794 13.8538C60.7875 14.7026 65.1108 20.1587 67.6082 23.3657C68.1144 24.0158 67.994 24.8601 67.9399 25.2351C67.7789 26.3494 68.4275 22.4478 69.9562 20.6274C72.4157 17.6985 74.6604 18.9705 76.5257 17.7573C78.438 16.5135 81.11 15.797 87.5021 15.8838C97.9823 16.026 101.7 19.0544 103.723 20.4494C109.416 24.3756 113.844 29.5766 114.517 31.6951C114.646 32.1009 113.969 29.9824 114.131 28.2586C114.364 25.7923 118.123 24.7521 119.161 24.1924C119.968 23.7568 120.862 24.2791 121.3 24.5142C121.709 24.7333 120.977 23.3528 120.811 22.6546C120.734 22.3296 121.187 22.0488 121.842 21.906C125.029 21.2118 126.881 22.7876 127.592 22.8827C129.454 23.1318 129.397 19.1607 130.712 17.8497C131.015 17.5473 131.367 22.3664 132.076 22.2698C136.255 21.701 140.444 23.7544 142.969 24.552C145.171 25.2473 145.921 20.2227 147.787 18.0316C148.227 17.5141 148.66 17.1444 149.209 16.9541C152.751 15.7249 157.855 18.2526 159.009 19.5105C159.582 20.1348 160.269 20.6789 160.978 21.0063C162.761 21.8295 165.104 19.4696 165.32 18.9099C166.19 16.6647 170.774 20.8608 173.506 23.4704C175.166 25.0555 176.36 25.8085 176.853 26.599C177.097 26.9918 177.02 27.482 176.749 27.7198C175.416 28.8902 172.652 27.0286 170.188 26.0953C167.704 25.1549 164.659 25.3495 162.579 25.1131C160.479 24.8744 158.748 24.4148 152.634 24.412C149.907 24.4108 148.023 25.5286 145.939 25.8574C143.743 26.2041 139.931 26.9279 137.511 27.3504C135.144 27.7637 133.134 22.7876 130.835 23.1611C130.282 23.251 129.85 23.3472 125.834 23.3948C121.817 23.4424 114.232 23.4424 109.89 23.3962C104.68 23.3408 100.971 23.1625 96.4311 23.2087C91.434 23.2595 82.9227 23.4424 79.0608 23.6747C75.12 23.9117 73.1498 21.9721 65.6493 22.2044C59.5778 22.3924 47.8702 22.2519 41.5701 22.2058C34.7263 22.1556 33.6279 19.0194 30.9105 19.1594C24.9526 19.4661 20.4923 19.2993 17.7206 19.4392C7.15498 19.9726 4.95606 11.0869 1.02686 10.8547C-9.36767 10.2402 -11.5752 10.5272 -13.3321 9.87799C-14.1933 9.55973 -14.1038 8.47876 -13.9412 7.78056C-13.5946 6.29181 -10.9381 6.14485 -8.58845 5.81743C-3.66692 5.13161 -0.764518 6.4191 3.232 6.70175C5.43783 6.85775 7.55692 12.4288 9.6422 12.5701C12.4903 12.7631 16.2002 16.0335 19.0522 16.221C22.8101 16.468 24.5282 16.873 26.5543 17.0143C28.7157 17.1651 34.1303 20.5729 37.828 20.8051C40.5087 20.9735 43.5683 21.1325 49.0902 21.5971C53.304 21.9516 57.9059 22.6213 60.9238 22.904C63.4874 23.1441 66.2339 23.931 70.0531 24.3018C74.0863 24.6934 78.9164 27.5421 83.0705 28.2418C88.0524 29.0808 92.7088 29.0393 95.7891 29.5039C97.8507 29.8148 100.708 29.8789 103.884 30.1111C108.693 30.4629 110.895 30.4385 114.225 30.6708C120.076 31.079 122.927 30.9982 125.344 31.2767C130.113 31.8261 136.286 36.8176 142.296 36.9589C148.749 37.1107 157.297 36.8232 160.154 36.4007C163.749 35.869 169.02 34.5845 171.265 33.7911C171.79 33.6056 172.088 33.2804 172.255 32.9068C172.422 32.5332 172.422 32.0714 172.26 31.6951C171.946 30.9683 171.112 30.3868 170.186 29.6424C167.503 27.4852 163.457 28.7021 159.044 29.585C145.783 32.2377 143.426 31.8756 141.017 32.3401C137.598 32.9995 134.887 27.0804 127.387 26.6634C121.318 26.3261 109.608 26.0618 103.362 25.8253C94.8209 25.5019 90.2327 25.2166 85.2001 25.2138C82.6654 25.2124 76.5815 23.6512 68.705 23.6973C64.7266 23.7207 61.0157 23.931 56.6941 23.9772C51.0527 24.0375 43.8113 24.3956 37.5883 24.5369C30.5972 24.6957 21.1523 21.9102 18.1459 22.0516C17.3195 22.0904 16.5614 19.1451 10.9689 19.1927C5.3764 19.2402 -5.02704 14.1652 -10.7115 14.0729C-17.0534 13.9699 -18.1496 13.5132 -19.0231 13.2348C-19.4832 13.0881 -19.8966 12.7716 -20.1741 12.4442C-20.4516 12.1168 -20.56 11.7474 -20.399 11.4186C-18.9246 10.3425 -17.611 9.8752 -16.7917 9.8738C-16.4058 9.96475 -16.0807 10.2418 -15.7457 10.5272" stroke="white" stroke-width="8.88214" stroke-linecap="round"/>
<path d="M90.0821 23.6266C87.1084 19.3127 87.2486 17.6156 87.3909 16.0565C87.5236 14.6022 88.8034 13.4355 89.9355 12.726C91.7589 11.5835 93.8289 11.3072 95.4909 11.6598C96.6307 11.9016 97.5842 11.8021 98.1842 12.0134C99.9329 12.6293 101.123 14.6292 102.15 16.0449C102.752 16.8749 102.896 20.9716 102.757 26.3518C102.709 28.2383 102.057 28.3675 101.034 28.4397C96.2595 28.7765 94.4066 27.8068 92.4291 26.6067C90.3564 25.3488 88.7397 24.4083 88.2798 23.8433C87.8899 23.3642 87.958 22.4988 88.0281 21.51C88.2074 18.9815 90.9954 16.766 94.9164 13.6553C95.7823 12.9683 96.2333 12.7983 96.6602 12.6899C97.0872 12.5816 97.5077 12.5816 97.8996 12.9671C99.7887 14.8255 100.061 17.1016 100.983 19.0536C101.277 19.6763 100.847 20.5765 100.247 21.6364C99.686 22.6267 98.6547 23.41 97.3845 24.0822C95.9849 24.823 94.5468 24.3361 93.6643 23.9134C91.2023 22.7342 89.9461 19.1109 89.7624 17.4011C89.7229 17.0332 90.0778 16.6258 90.3964 16.304C91.0372 15.6568 92.0595 15.5553 93.0833 15.7305C95.5523 16.1531 97.2911 20.7677 97.8008 23.0213C97.9018 23.4677 96.6708 23.0616 95.9285 22.7441C94.6378 22.192 93.9096 19.2554 93.7981 16.801C93.7796 16.3936 94.1135 16.1967 94.5022 16.4038C97.1425 17.8105 97.0914 21.0714 96.9512 22.0623C96.8971 22.4448 96.5307 22.4924 96.1759 22.5285C94.2608 22.7235 92.3527 21.2243 91.6443 20.2706C90.4714 18.6915 92.7711 16.7617 92.7732 16.3369C92.7811 14.7695 89.6615 15.9801 88.9191 16.0852C88.584 16.1327 88.3871 16.4006 88.4189 16.5791C88.4508 16.7575 88.7312 16.8977 88.9457 16.7596C89.5021 16.4015 89.4448 15.277 89.2696 14.4986C89.1956 14.1698 88.7439 14.1407 88.3881 14.1396C87.063 14.1356 85.8425 15.3386 84.2462 16.612C83.555 17.1634 83.4975 18.8008 83.5676 20.7103C83.6126 21.9362 84.2027 22.7027 85.0481 23.4089C87.2423 25.242 88.9436 24.969 90.6067 25.0434C90.9996 24.9733 91.28 24.8331 91.3193 24.6557C91.3586 24.4784 91.1483 24.2681 90.9317 24.0514" stroke="white" stroke-width="5.72664" stroke-linecap="round"/>
<path d="M270.662 6.93864C270.204 6.299 269.289 4.83221 267.727 3.17657C267.102 2.5143 266.347 1.88762 265.476 1.19973C262.904 -0.830806 255.526 1.59536 252.564 3.2579C250.98 4.14731 249.168 10.0969 247.096 11.7939C246.639 12.1682 246.405 12.4845 246.355 12.4432C246.306 12.4018 246.488 12.0379 246.491 11.6684C246.505 9.77921 243.924 8.35992 242.316 7.80436C241.559 7.54254 240.524 10.5273 239.468 10.7092C238.668 10.8471 238.225 12.085 237.354 12.5923C235.734 13.5355 234.456 10.9877 233.677 10.9863C232.735 10.9847 232.065 11.9031 231.606 12.5896C231.051 13.4198 231.235 15.2943 231.19 16.859C231.16 17.8946 229.587 14.6684 228.117 13.6097C227.234 12.9737 226.093 12.8267 225.222 12.642C223.294 12.2331 221.591 17.9331 220.349 19.0828C220.057 19.3531 220.025 19.7694 219.705 19.9568C217.845 21.0472 215.616 19.5019 214.882 19.1821C214.241 18.903 214.781 17.4865 215.061 15.9687C215.232 15.0419 213.871 14.3572 212.862 13.8981C211.317 13.195 209.372 13.7092 207.123 14.0759C201.995 14.9123 198.365 20.2877 196.268 23.4473C195.843 24.0878 195.945 24.9196 195.99 25.2891C196.125 26.3869 195.581 22.543 194.297 20.7495C192.232 17.8639 190.348 19.117 188.782 17.9218C187.176 16.6964 184.933 15.9905 179.566 16.0759C170.767 16.2161 167.646 19.1997 165.947 20.5742C161.167 24.4423 157.45 29.5665 156.885 31.6536C156.776 32.0534 157.345 29.9662 157.209 28.2679C157.013 25.8381 153.857 24.8132 152.986 24.2618C152.308 23.8326 151.558 24.3473 151.19 24.5788C150.847 24.7947 151.461 23.4347 151.601 22.7468C151.665 22.4265 151.285 22.1498 150.735 22.0092C148.059 21.3252 146.504 22.8777 145.907 22.9715C144.344 23.2169 144.392 19.3045 143.288 18.0128C143.033 17.7149 142.738 22.4628 142.142 22.3676C138.634 21.8072 135.117 23.8303 132.997 24.6161C131.149 25.3011 130.518 20.3508 128.952 18.192C128.583 17.6822 128.219 17.318 127.759 17.1305C124.784 15.9194 120.499 18.4098 119.53 19.6491C119.049 20.2641 118.473 20.8002 117.877 21.1228C116.38 21.9338 114.413 19.6088 114.231 19.0574C113.501 16.8453 109.653 20.9794 107.359 23.5504C105.965 25.1122 104.963 25.854 104.549 26.6329C104.344 27.0198 104.409 27.5027 104.636 27.7371C105.755 28.8902 108.076 27.0561 110.145 26.1366C112.23 25.2101 114.786 25.4018 116.533 25.1689C118.296 24.9337 119.749 24.481 124.883 24.4782C127.172 24.477 128.754 25.5783 130.503 25.9022C132.348 26.2438 135.547 26.9568 137.579 27.3732C139.566 27.7803 141.255 22.8777 143.185 23.2458C143.648 23.3343 144.012 23.4291 147.384 23.476C150.756 23.5229 157.124 23.5229 160.769 23.4774C165.144 23.4228 168.258 23.2472 172.069 23.2927C176.265 23.3427 183.411 23.5229 186.653 23.7517C189.962 23.9853 191.616 22.0743 197.913 22.3031C203.011 22.4884 212.84 22.35 218.13 22.3045C223.875 22.2551 224.798 19.1653 227.079 19.3031C232.081 19.6054 235.826 19.441 238.153 19.5788C247.024 20.1044 248.87 11.35 252.169 11.1212C260.896 10.5158 262.749 10.7986 264.224 10.1589C264.947 9.84537 264.872 8.78038 264.736 8.09249C264.445 6.62575 262.214 6.48096 260.242 6.15837C256.11 5.48269 253.673 6.75116 250.317 7.02963C248.465 7.18333 246.686 12.672 244.936 12.8113C242.544 13.0014 239.43 16.2235 237.035 16.4082C233.88 16.6516 232.438 17.0506 230.736 17.1898C228.922 17.3383 224.376 20.6958 221.271 20.9246C219.021 21.0905 216.452 21.2472 211.816 21.7049C208.278 22.0541 204.414 22.7139 201.881 22.9924C199.728 23.229 197.422 24.0043 194.216 24.3696C190.83 24.7554 186.774 27.562 183.287 28.2513C179.104 29.0779 175.195 29.0371 172.608 29.4948C170.878 29.8011 168.478 29.8642 165.812 30.0931C161.774 30.4396 159.926 30.4156 157.13 30.6445C152.218 31.0466 149.824 30.9671 147.794 31.2414C143.79 31.7827 138.608 36.7004 133.562 36.8397C128.144 36.9892 120.968 36.706 118.569 36.2896C115.551 35.7658 111.125 34.5003 109.24 33.7186C108.8 33.5359 108.55 33.2155 108.409 32.8474C108.269 32.4793 108.269 32.0244 108.405 31.6536C108.669 30.9376 109.369 30.3646 110.146 29.6312C112.399 27.5059 115.795 28.7048 119.501 29.5747C130.634 32.1883 132.614 31.8314 134.636 32.2891C137.507 32.9387 139.782 27.1071 146.08 26.6963C151.174 26.3639 161.006 26.1035 166.25 25.8706C173.421 25.552 177.273 25.2709 181.499 25.2681C183.627 25.2667 188.735 23.7286 195.348 23.7741C198.688 23.797 201.803 24.0043 205.432 24.0498C210.168 24.1091 216.248 24.462 221.473 24.6012C227.342 24.7576 235.272 22.0134 237.796 22.1526C238.49 22.1909 239.126 19.2891 243.822 19.336C248.517 19.3828 257.252 14.3828 262.024 14.2918C267.349 14.1903 268.269 13.7404 269.002 13.4661C269.389 13.3216 269.736 13.0098 269.969 12.6872C270.202 12.3646 270.293 12.0007 270.158 11.6767C268.92 10.6166 267.817 10.1562 267.129 10.1548C266.805 10.2444 266.532 10.5174 266.251 10.7986" stroke="white" stroke-width="8.88214" stroke-linecap="round"/>
<path d="M159.918 23.6266C162.892 19.3127 162.751 17.6156 162.609 16.0565C162.476 14.6022 161.197 13.4355 160.064 12.726C158.241 11.5835 156.171 11.3072 154.509 11.6598C153.369 11.9016 152.416 11.8021 151.816 12.0134C150.067 12.6293 148.877 14.6292 147.85 16.0449C147.248 16.8749 147.104 20.9716 147.243 26.3518C147.291 28.2383 147.943 28.3675 148.966 28.4397C153.74 28.7765 155.593 27.8068 157.571 26.6067C159.644 25.3488 161.26 24.4083 161.72 23.8433C162.11 23.3642 162.042 22.4988 161.972 21.51C161.793 18.9815 159.005 16.766 155.084 13.6553C154.218 12.9683 153.767 12.7983 153.34 12.6899C152.913 12.5816 152.492 12.5816 152.1 12.9671C150.211 14.8255 149.939 17.1016 149.017 19.0536C148.723 19.6763 149.153 20.5765 149.753 21.6364C150.314 22.6267 151.345 23.41 152.615 24.0822C154.015 24.823 155.453 24.3361 156.336 23.9134C158.798 22.7342 160.054 19.1109 160.238 17.4011C160.277 17.0332 159.922 16.6258 159.604 16.304C158.963 15.6568 157.94 15.5553 156.917 15.7305C154.448 16.1531 152.709 20.7677 152.199 23.0213C152.098 23.4677 153.329 23.0616 154.072 22.7441C155.362 22.192 156.09 19.2553 156.202 16.801C156.22 16.3936 155.887 16.1967 155.498 16.4038C152.858 17.8105 152.909 21.0714 153.049 22.0623C153.103 22.4448 153.469 22.4924 153.824 22.5285C155.739 22.7235 157.647 21.2243 158.356 20.2706C159.529 18.6915 157.229 16.7617 157.227 16.3369C157.219 14.7695 160.338 15.9801 161.081 16.0852C161.416 16.1327 161.613 16.4006 161.581 16.5791C161.549 16.7575 161.269 16.8977 161.054 16.7596C160.498 16.4015 160.555 15.277 160.73 14.4986C160.804 14.1698 161.256 14.1407 161.612 14.1396C162.937 14.1356 164.158 15.3386 165.754 16.612C166.445 17.1634 166.502 18.8008 166.432 20.7103C166.387 21.9362 165.797 22.7027 164.952 23.4089C162.758 25.242 161.056 24.969 159.393 25.0434C159 24.9733 158.72 24.8331 158.681 24.6557C158.641 24.4784 158.852 24.2681 159.068 24.0514" stroke="white" stroke-width="5.72664" stroke-linecap="round"/>
</g>
</g>
<defs>
<filter id="filter0_d_650_43" x="-29.4414" y="-4.44104" width="308.545" height="53.882" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_650_43"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_650_43" result="shape"/>
</filter>
<clipPath id="clip0_650_43">
<rect width="256" height="20" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB

BIN
site/static/card-final.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 568 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 KiB

View file

@ -0,0 +1,10 @@
<svg width="483" height="871" viewBox="0 0 483 871" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_640_1475)">
<path d="M498.5 352.5L-36.5 131V968H498.5V352.5Z" fill="#FCEFC5"/>
</g>
<defs>
<clipPath id="clip0_640_1475">
<rect width="483" height="871" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 320 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

View file

@ -0,0 +1,10 @@
<svg width="1193" height="436" viewBox="0 0 1193 436" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_649_12)">
<path d="M592.496 294.5L1205.5 275V477.5H-62.5V381.5L160.496 347.5L285.496 275L592.496 294.5Z" fill="#FCEFC5"/>
</g>
<defs>
<clipPath id="clip0_649_12">
<rect width="1193" height="436" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 364 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

View file

@ -0,0 +1,10 @@
<svg width="647" height="602" viewBox="0 0 647 602" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_633_1430)">
<path d="M649.5 278.5C560.5 279.5 227 210.5 -9 206V667H649.5V278.5Z" fill="#FCEFC5"/>
</g>
<defs>
<clipPath id="clip0_633_1430">
<rect width="647" height="602" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 339 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 423 KiB

After

Width:  |  Height:  |  Size: 212 KiB

BIN
site/static/faq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
site/static/letter-loop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
site/static/letter-top.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
site/static/letter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

BIN
site/static/noise.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

BIN
site/static/step-card.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

3
site/static/submit.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.2071 8.70711C30.5976 8.31659 30.5976 7.68342 30.2071 7.2929L23.8431 0.928934C23.4526 0.53841 22.8195 0.53841 22.4289 0.928934C22.0384 1.31946 22.0384 1.95262 22.4289 2.34315L28.0858 8L22.4289 13.6569C22.0384 14.0474 22.0384 14.6805 22.4289 15.0711C22.8195 15.4616 23.4526 15.4616 23.8431 15.0711L30.2071 8.70711ZM0.5 8L0.5 9L29.5 9L29.5 8L29.5 7L0.5 7L0.5 8Z" fill="#B3866A"/>
</svg>

After

Width:  |  Height:  |  Size: 493 B

BIN
site/static/thumbnail.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

BIN
site/static/window-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
site/static/window-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

BIN
site/static/window-4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View file

@ -3,5 +3,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()]
plugins: [tailwindcss(), sveltekit()],
server: {
allowedHosts: true,
}
});