mirror of
https://github.com/System-End/campfire.git
synced 2026-04-19 19:45:12 +00:00
milestone: initial commit
This commit is contained in:
ascpixi
commit
24e8608ead
63 changed files with 5170 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
2
frontend/README.md
Normal file
2
frontend/README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
# Hack Club Campfire
|
||||||
|
This is the website for Campfire, a distributed game jam
|
||||||
23
frontend/eslint.config.js
Normal file
23
frontend/eslint.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Hack Club Campfire</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4077
frontend/package-lock.json
generated
Normal file
4077
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
frontend/package.json
Normal file
35
frontend/package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "campfire",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.1.17",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@tailwindcss/postcss": "^4.1.17",
|
||||||
|
"@types/node": "^24.10.0",
|
||||||
|
"@types/react": "^19.2.2",
|
||||||
|
"@types/react-dom": "^19.2.2",
|
||||||
|
"@vitejs/plugin-react": "^5.1.0",
|
||||||
|
"autoprefixer": "^10.4.22",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.1.17",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.3",
|
||||||
|
"vite": "^7.2.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
frontend/public/backgrounds/blue-gradient.png
Normal file
BIN
frontend/public/backgrounds/blue-gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
frontend/public/backgrounds/blue-sky.png
Normal file
BIN
frontend/public/backgrounds/blue-sky.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
frontend/public/backgrounds/bottom-cloud.png
Normal file
BIN
frontend/public/backgrounds/bottom-cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
frontend/public/backgrounds/clouds.png
Normal file
BIN
frontend/public/backgrounds/clouds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
BIN
frontend/public/backgrounds/corner-cloud.png
Normal file
BIN
frontend/public/backgrounds/corner-cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
frontend/public/backgrounds/grass.png
Normal file
BIN
frontend/public/backgrounds/grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
frontend/public/backgrounds/landing-grass.png
Normal file
BIN
frontend/public/backgrounds/landing-grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 728 KiB |
BIN
frontend/public/backgrounds/night-wallpaper.png
Normal file
BIN
frontend/public/backgrounds/night-wallpaper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
frontend/public/backgrounds/seafloor.png
Normal file
BIN
frontend/public/backgrounds/seafloor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
frontend/public/backgrounds/sky-shine.png
Normal file
BIN
frontend/public/backgrounds/sky-shine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
BIN
frontend/public/backgrounds/stars.png
Normal file
BIN
frontend/public/backgrounds/stars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
frontend/public/backgrounds/underwater-gradient.png
Normal file
BIN
frontend/public/backgrounds/underwater-gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
BIN
frontend/public/backgrounds/wood.png
Normal file
BIN
frontend/public/backgrounds/wood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
BIN
frontend/public/backgrounds/world-map.png
Normal file
BIN
frontend/public/backgrounds/world-map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
BIN
frontend/public/characters/astronaut.png
Normal file
BIN
frontend/public/characters/astronaut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 753 KiB |
BIN
frontend/public/characters/campfire.png
Normal file
BIN
frontend/public/characters/campfire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 969 KiB |
BIN
frontend/public/characters/fish-1.png
Normal file
BIN
frontend/public/characters/fish-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
BIN
frontend/public/characters/fish-2.png
Normal file
BIN
frontend/public/characters/fish-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
frontend/public/characters/ghosts.png
Normal file
BIN
frontend/public/characters/ghosts.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 632 KiB |
BIN
frontend/public/decorative/clouds-1.png
Normal file
BIN
frontend/public/decorative/clouds-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
frontend/public/decorative/clouds-2.png
Normal file
BIN
frontend/public/decorative/clouds-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
frontend/public/decorative/clouds-3.png
Normal file
BIN
frontend/public/decorative/clouds-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
frontend/public/decorative/cog.png
Normal file
BIN
frontend/public/decorative/cog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
frontend/public/decorative/hack-club-flag.png
Normal file
BIN
frontend/public/decorative/hack-club-flag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
frontend/public/decorative/moon-cloud.png
Normal file
BIN
frontend/public/decorative/moon-cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 901 KiB |
BIN
frontend/public/decorative/moon.png
Normal file
BIN
frontend/public/decorative/moon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
frontend/public/decorative/puzzle-outline.png
Normal file
BIN
frontend/public/decorative/puzzle-outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
BIN
frontend/public/decorative/puzzle-scattered.png
Normal file
BIN
frontend/public/decorative/puzzle-scattered.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 895 KiB |
BIN
frontend/public/decorative/sparkles.png
Normal file
BIN
frontend/public/decorative/sparkles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
frontend/public/decorative/vines.png
Normal file
BIN
frontend/public/decorative/vines.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
frontend/public/fonts/dreamplanner.woff
Normal file
BIN
frontend/public/fonts/dreamplanner.woff
Normal file
Binary file not shown.
BIN
frontend/public/fonts/dreamplanner.woff2
Normal file
BIN
frontend/public/fonts/dreamplanner.woff2
Normal file
Binary file not shown.
BIN
frontend/public/games/macuahuitl.png
Normal file
BIN
frontend/public/games/macuahuitl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
frontend/public/games/office-click-clack.png
Normal file
BIN
frontend/public/games/office-click-clack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
frontend/public/games/zero-sum.png
Normal file
BIN
frontend/public/games/zero-sum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
3
frontend/public/icons/email.svg
Normal file
3
frontend/public/icons/email.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Vector" d="M0.0843333 1.82619L11.0911 12.7636C11.4167 13.0873 11.8516 13.2795 12.3116 13.303C12.7717 13.3264 13.2241 13.1795 13.5814 12.8905L13.7227 12.7636L24.722 1.83358C24.758 1.96913 24.7816 2.10714 24.794 2.24884L24.8039 2.46449V17.2514C24.8041 17.8732 24.5677 18.472 24.1422 18.9279C23.7167 19.3838 23.1335 19.6631 22.5095 19.7097L22.3235 19.7159H2.48039C1.85461 19.7161 1.25189 19.4813 0.793044 19.0585C0.334196 18.6357 0.053134 18.0563 0.00620111 17.4362L0 17.2514V2.46449C0 2.31662 0.0124019 2.17368 0.0372058 2.0332L0.0843333 1.82619ZM22.3235 0C22.4735 0 22.6211 0.0123226 22.7638 0.0381997L22.9746 0.0862573L12.4081 10.585L1.83797 0.0837924C1.97439 0.0468251 2.11577 0.0221803 2.25963 0.00985782L2.48039 0H22.3235Z" fill="var(--fill-0, #854D16)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 946 B |
3
frontend/public/icons/plus.svg
Normal file
3
frontend/public/icons/plus.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Icon" d="M16 2V30M2 16H30" stroke="var(--stroke-0, #F5F5F5)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 314 B |
BIN
frontend/public/stories/ascpixi.png
Normal file
BIN
frontend/public/stories/ascpixi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
frontend/public/stories/manitej.png
Normal file
BIN
frontend/public/stories/manitej.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
frontend/public/stories/sebastian.png
Normal file
BIN
frontend/public/stories/sebastian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
frontend/public/ui/arrow.png
Normal file
BIN
frontend/public/ui/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
16
frontend/public/ui/faq-organizer-bg.svg
Normal file
16
frontend/public/ui/faq-organizer-bg.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 609 1520" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="bg" filter="url(#filter0_d_267_298)">
|
||||||
|
<path d="M0 0H35C35 0 54 16.9782 88.5 17.5C96.8246 17.6259 102.5 0 102.5 0H272.5L293.5 17.5L300 0L445.5 5L471.5 17.5L595 0V256.5L576 288L595 298L608.5 686C608.5 686 588.499 699.907 587.5 715C586.441 730.991 608.5 738.5 608.5 738.5V1116.5C608.5 1116.5 588.5 1118 588.5 1135.5C588.5 1151.1 608.5 1150.5 608.5 1150.5V1476L459 1485C459 1485 416.208 1460.75 399 1464C372.5 1469 350 1490 350 1490H215C215 1490 189.5 1483.5 185 1485C168.872 1490.38 161 1505 161 1505L96 1476L0 1484L13 948C13 948 24.5 906 28 884.5C31.5 863 8 864 8 864L0 566L18 451L9 381L0 0Z" fill="var(--fill-0, #AD684F)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_267_298" x="0" y="0" width="608.5" height="1520" 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="15"/>
|
||||||
|
<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_267_298"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_298" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
16
frontend/public/ui/faq-participant-bg.svg
Normal file
16
frontend/public/ui/faq-participant-bg.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 609 1506" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="bg" filter="url(#filter0_d_267_304)">
|
||||||
|
<path d="M0 0H284C284 0 291.826 13.3764 300 13.5C308.325 13.6259 316.5 0 316.5 0L434 7.5L456.5 13.5L469.5 0H595L598.5 454C598.5 454 575.863 474 579 490C583.593 513.425 598.5 528.5 598.5 528.5V954.5L582 995L598.5 1020L608.5 1166C608.5 1166 591 1169 591 1186.5C591 1202.1 608.5 1205.5 608.5 1205.5L595 1484H526C526 1484 526.476 1467.44 523 1461C516.737 1449.39 491.5 1446.5 481.5 1454C468.994 1463.38 476.5 1484 476.5 1484L455 1476H438.5C438.5 1476 412 1464.5 405 1468C389.795 1475.6 385.5 1490.5 385.5 1490.5L276.5 1472.5L0 1484L8 907.5C8 907.5 24.5 906 28 884.5C31.5 863 8 864 8 864V461L28 430.5L8 395.5L0 0Z" fill="var(--fill-0, #AD684F)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_267_304" x="0" y="0" width="608.5" height="1505.5" 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="15"/>
|
||||||
|
<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_267_304"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_304" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
16
frontend/public/ui/faq-speech-bubble.svg
Normal file
16
frontend/public/ui/faq-speech-bubble.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1736 2203" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="speech-bubble-bg" filter="url(#filter0_d_267_306)">
|
||||||
|
<path d="M866.63 2162.05C851.359 2131.93 912.467 1898.29 852.135 1867.72L0 1810.82L129.379 16.4642L1732.09 0L1635.43 1849.57C1387.78 1848.97 1159.28 1865.48 1061.79 1888.38C1039.06 1893.72 878.183 2126.79 866.63 2162.05Z" fill="var(--fill-0, #384FBC)"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_267_306" x="0" y="0" width="1735.09" height="2202.05" 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 dx="3" dy="40"/>
|
||||||
|
<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.5 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_267_306"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_306" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/public/ui/step-signup.png
Normal file
BIN
frontend/public/ui/step-signup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
frontend/public/ui/step-team.png
Normal file
BIN
frontend/public/ui/step-team.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
frontend/public/ui/step-workshops.png
Normal file
BIN
frontend/public/ui/step-workshops.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
frontend/public/ui/video-placeholder.png
Normal file
BIN
frontend/public/ui/video-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
1
frontend/public/vite.svg
Normal file
1
frontend/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
817
frontend/src/App.tsx
Normal file
817
frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,817 @@
|
||||||
|
const fonts = {
|
||||||
|
amatic: "'Amatic SC', sans-serif",
|
||||||
|
amaticBold: "'Amatic SC', sans-serif",
|
||||||
|
dreamPlanner: "'DREAM PLANNER', Impact, 'Arial Black', sans-serif"
|
||||||
|
};
|
||||||
|
|
||||||
|
function FaqButton({ className = "", content = "Check out the parent guide" }: {
|
||||||
|
className?: string
|
||||||
|
content?: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<div className="flex gap-1 items-center">
|
||||||
|
<div className="relative w-12 h-12 overflow-hidden">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
className="absolute -inset-1 w-full h-full object-cover"
|
||||||
|
src="/icons/plus.svg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-white text-5xl font-bold leading-none whitespace-nowrap"
|
||||||
|
style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FaqQuestion({ className = "", question = "What is a game jam?" }: {
|
||||||
|
className?: string
|
||||||
|
question?: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<p
|
||||||
|
className="text-white text-5xl text-center font-bold leading-none w-full"
|
||||||
|
style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
|
||||||
|
>
|
||||||
|
{question}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="w-full min-h-screen flex flex-col overflow-x-hidden">
|
||||||
|
<div className="absolute top-0 left-0 w-1/3 z-10">
|
||||||
|
<img
|
||||||
|
src="/backgrounds/corner-cloud.png"
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-screen">
|
||||||
|
<header className="relative h-[115px] bg-[#45b4f5] flex justify-end items-center pr-16">
|
||||||
|
<nav className="flex gap-12 items-center text-white text-5xl font-bold" style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}>
|
||||||
|
<button className="hover:opacity-80 transition-opacity">Steps</button>
|
||||||
|
<button className="hover:opacity-80 transition-opacity">Map</button>
|
||||||
|
<button className="hover:opacity-80 transition-opacity">Previous events</button>
|
||||||
|
<button className="hover:opacity-80 transition-opacity">FAQ</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="relative h-screen flex items-center px-6 md:px-16 lg:px-24" style={{
|
||||||
|
background: `
|
||||||
|
url(/backgrounds/blue-sky.png),
|
||||||
|
url(/backgrounds/sky-shine.png),
|
||||||
|
url(/backgrounds/bottom-cloud.png)
|
||||||
|
`,
|
||||||
|
backgroundPosition: 'center top, center top, center top',
|
||||||
|
backgroundSize: 'cover, cover, cover'
|
||||||
|
}}>
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full">
|
||||||
|
<img src="/backgrounds/sky-shine.png" alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-[32px] right-[140px] w-full h-full">
|
||||||
|
{/* fishy on the right. His name is frederick. */ }
|
||||||
|
<div className="absolute top-[64px] right-[140px] w-1/6 animate-fish-swim-2">
|
||||||
|
<img src="/characters/fish-2.png" alt="Fish named Frederick" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* fishy on the left. His name is gubson */ }
|
||||||
|
<div className="absolute top-[32px] right-[300px] w-1/6 animate-fish-swim-1">
|
||||||
|
<img src="/characters/fish-1.png" alt="Fish named Gubson" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-[160px] left-0 w-full h-full animate-cloud-float-right">
|
||||||
|
<img src="/backgrounds/bottom-cloud.png" alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vines overlay below grass */}
|
||||||
|
<div className="absolute -bottom-[50px] left-0 w-full h-[120px]">
|
||||||
|
<img src="/decorative/vines.png" alt="" className="w-full h-full object-cover object-top" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex flex-col lg:flex-row justify-between items-center w-full gap-8 pb-24 z-10">
|
||||||
|
{/* Left side - CTA */}
|
||||||
|
<div className="flex flex-col gap-4 w-full lg:w-[648px]">
|
||||||
|
{/* Logo section */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<img
|
||||||
|
src="/decorative/hack-club-flag.png"
|
||||||
|
alt="Hack Club"
|
||||||
|
className="w-[151px] h-[53px] object-cover transform rotate-[-4.8deg]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="transform rotate-[-2.97deg]">
|
||||||
|
<h1
|
||||||
|
className="text-[#fcf5ed] text-[80px] md:text-[120px] lg:text-[150px] font-normal leading-none mb-4"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.dreamPlanner,
|
||||||
|
textShadow: "5px 8px 0px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
CAMPFIRE
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pl-4">
|
||||||
|
<p
|
||||||
|
className="text-white text-4xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Game jam for high schoolers in 200+ cities
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-white text-4xl font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Jan 23-24, 2026
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RSVP section */}
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="bg-[#f9e2ca] border-4 border-[#d5a16c] rounded-[20px] px-4 md:px-8 py-4 flex items-center gap-3 md:gap-6 w-full transform rotate-[-1.2deg] shadow-[0_8px_20px_rgba(0,0,0,0.25)]"
|
||||||
|
>
|
||||||
|
<img src="/icons/email.svg" alt="" className="w-6 h-5 flex-shrink-0" />
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="text-[#854d16] text-2xl md:text-4xl font-bold truncate bg-transparent border-none outline-none flex-1 cursor-text"
|
||||||
|
style={{ fontFamily: fonts.amaticBold, fontWeight: 'bold' }}
|
||||||
|
placeholder="you@hackclub.com"
|
||||||
|
defaultValue="you@hackclub.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="bg-[#fca147] border-[5px] border-[rgba(0,0,0,0.2)] rounded-[20px] px-8 md:px-14 py-4 hover:scale-105 transition-transform w-full md:w-auto transform rotate-[1.5deg] shadow-[0_8px_20px_rgba(0,0,0,0.25)] cursor-pointer"
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
console.log('RSVP clicked');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="text-[#8d3f34] text-3xl md:text-5xl font-normal"
|
||||||
|
style={{ fontFamily: fonts.dreamPlanner }}
|
||||||
|
>
|
||||||
|
RSVP!
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right side - Video section */}
|
||||||
|
<div className="relative w-full lg:w-auto">
|
||||||
|
{/* Text and arrow above video */}
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-4">
|
||||||
|
<p
|
||||||
|
className="text-white text-2xl md:text-4xl font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
watch the video
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="/ui/arrow.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[45px] md:w-[55px] h-[33px] md:h-[41px] translate-y-6 rotate-[6.2deg] z-50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Video with rotation */}
|
||||||
|
<div className="relative transform rotate-[1.7deg]">
|
||||||
|
<img
|
||||||
|
src="/ui/video-placeholder.png"
|
||||||
|
alt="Campfire video"
|
||||||
|
className="w-full max-w-[442px] h-[200px] md:h-[259px] rounded-2xl shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 w-full">
|
||||||
|
<img src="/backgrounds/landing-grass.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<section className="relative py-48 pb-96" style={{
|
||||||
|
background: `url(/backgrounds/underwater-gradient.png)`,
|
||||||
|
backgroundSize: 'cover'
|
||||||
|
}}>
|
||||||
|
<div className="absolute top-0 left-0 w-screen h-[200px] bg-gradient-to-b from-[#004b2a] to-transparent"></div>
|
||||||
|
<div className="absolute top-[30px] left-0 w-full scale-125">
|
||||||
|
<img src="/decorative/vines.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Clouds behind astronaut overlay */}
|
||||||
|
<div className="absolute bottom-[500px] left-0 w-full h-[800px] -z-10">
|
||||||
|
<img src="/decorative/clouds-3.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Seafloor overlay */}
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[613px] -z-10">
|
||||||
|
<img src="/backgrounds/seafloor.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Astronaut overlay */}
|
||||||
|
<div className="absolute bottom-[400px] left-32 w-[569px] h-[676px]">
|
||||||
|
<img
|
||||||
|
src="/characters/astronaut.png"
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-cover transform rotate-[172deg] scale-y-[-1]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cog overlay */}
|
||||||
|
<div className="absolute top-[500px] right-32 w-[352px] h-[354px]">
|
||||||
|
<img src="/decorative/cog.png" alt="" className="w-full h-full object-cover rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps content */}
|
||||||
|
<div className="relative z-10 flex flex-col gap-24 items-center px-12 max-w-7xl mx-auto">
|
||||||
|
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div className="flex gap-16 items-center w-full">
|
||||||
|
<div className="flex flex-col items-end text-right text-white flex-1">
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
step 1
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-6xl font-bold leading-tight max-w-md"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Sign up for a Campfire near you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="/ui/step-signup.png"
|
||||||
|
alt="Step 1"
|
||||||
|
className="w-[539px] h-[299px] rounded-lg shadow-[15px_15px_0px_0px_rgba(0,0,0,0.25)] object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div className="flex gap-16 items-center w-full">
|
||||||
|
<img
|
||||||
|
src="/ui/step-team.png"
|
||||||
|
alt="Step 2"
|
||||||
|
className="w-[509px] h-[307px] rounded-lg shadow-[-8px_16px_0px_0px_rgba(0,0,0,0.25)] object-cover"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col items-start text-white flex-1">
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
step 2
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-6xl font-bold leading-tight"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Grab friends (or make new friends!) and form a team of 2-3
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div className="flex gap-16 items-center w-full">
|
||||||
|
<div className="flex flex-col items-end text-right text-white flex-1">
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
step 3
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-6xl font-bold leading-tight"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Learn from workshops, enjoy free food and merch!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="/ui/step-workshops.png"
|
||||||
|
alt="Step 3"
|
||||||
|
className="w-[539px] h-[299px] rounded-lg shadow-[15px_15px_0px_0px_rgba(0,0,0,0.25)] object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 4 */}
|
||||||
|
<div className="flex gap-16 items-center w-full">
|
||||||
|
<img
|
||||||
|
src="/ui/step-team.png"
|
||||||
|
alt="Step 4"
|
||||||
|
className="w-[509px] h-[307px] rounded-lg shadow-[-8px_16px_0px_0px_rgba(0,0,0,0.25)] object-cover"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col items-start text-white flex-1">
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
step 4
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-6xl font-bold leading-tight"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Build your game & publish it online!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Map Section */}
|
||||||
|
<section className="relative h-[900px] px-8">
|
||||||
|
{/* Clouds overlay behind map */}
|
||||||
|
<div className="absolute top-0 left-0 w-full -translate-y-96">
|
||||||
|
<img src="/decorative/clouds-3.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full h-full z-50 -translate-y-32" style={{
|
||||||
|
background: `url(/backgrounds/world-map.png)`,
|
||||||
|
backgroundSize: 'cover'
|
||||||
|
}}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stories Section */}
|
||||||
|
<section className="relative py-24 bg-[#384fbc] -translate-y-170 -z-10 pt-130 pb-330" style={{
|
||||||
|
background: `
|
||||||
|
url(/backgrounds/blue-gradient.png)
|
||||||
|
`,
|
||||||
|
backgroundSize: 'contain'
|
||||||
|
}}>
|
||||||
|
{/* Moon overlay */}
|
||||||
|
<div className="absolute top-[600px] left-[-200px] w-[778px] h-[719px]">
|
||||||
|
<img
|
||||||
|
src="/decorative/moon.png"
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-cover transform rotate-[346deg]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-full">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="decorative/clouds-1.png"
|
||||||
|
className="w-full h-full object-cover transform"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex flex-col gap-12 items-center px-32 max-w-7xl mx-auto">
|
||||||
|
<h2
|
||||||
|
className="text-[#d7cfeb] text-6xl font-bold text-center mb-8"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Stories from past events
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex gap-12 justify-between w-full">
|
||||||
|
<div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
|
||||||
|
<img
|
||||||
|
src="/stories/ascpixi.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[297px] h-[257px] object-cover mb-2"
|
||||||
|
/>
|
||||||
|
<div className="p-2">
|
||||||
|
<p
|
||||||
|
className="text-black text-5xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Counterspell
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-black text-3xl"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Game jam in 50 cities including Toronto, Boston, & Singapore
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
|
||||||
|
<img
|
||||||
|
src="/stories/manitej.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[297px] h-[257px] object-cover mb-2"
|
||||||
|
/>
|
||||||
|
<div className="p-2">
|
||||||
|
<p
|
||||||
|
className="text-black text-5xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Scrapyard
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-black text-3xl"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
In-person hackathon in 70 cities worldwide
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-[#d9d9d9] rounded-2xl p-6 flex flex-col gap-2 w-[347px] h-[557px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
|
||||||
|
<img
|
||||||
|
src="/stories/sebastian.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[297px] h-[257px] object-cover mb-2"
|
||||||
|
/>
|
||||||
|
<div className="p-2">
|
||||||
|
<p
|
||||||
|
className="text-black text-5xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Daydream
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-black text-3xl"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Game jam in 100 cities worldwide
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="relative h-[200px] bg-[#384fbc]">
|
||||||
|
<div className="absolute inset-0 w-full h-full opacity-30">
|
||||||
|
<img src="/decorative/puzzle-outline.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-[50px] left-[100px] transform rotate-[15deg]">
|
||||||
|
<img
|
||||||
|
src="/decorative/puzzle-scattered.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[150px] h-[120px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-[80px] right-[150px] transform rotate-[-20deg]">
|
||||||
|
<img
|
||||||
|
src="/decorative/puzzle-scattered.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[120px] h-[100px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="relative bg-[#384fbc] py-24">
|
||||||
|
<div className="flex flex-col gap-8 items-center px-32 max-w-7xl mx-auto">
|
||||||
|
<h2
|
||||||
|
className="text-[#f1ebff] text-6xl font-bold text-center mb-8"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Favorite games from past events
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex gap-5 w-full justify-between">
|
||||||
|
<div className="flex flex-col gap-10 items-center w-[400px]">
|
||||||
|
<a
|
||||||
|
href="https://theavgeekbee.itch.io/office-click-clack"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/games/office-click-clack.png"
|
||||||
|
alt="Office Click Clack"
|
||||||
|
className="w-[389px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div className="text-center text-[#d7cfeb]">
|
||||||
|
<p
|
||||||
|
className="text-7xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Office Click Clack
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
bunnyguy - Daydream dfw
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-9 items-center w-[400px]">
|
||||||
|
<a
|
||||||
|
href="https://arandompsi.itch.io/zero-sum"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/games/zero-sum.png"
|
||||||
|
alt="Zero Sum"
|
||||||
|
className="w-[391px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div className="text-center text-[#d7cfeb]">
|
||||||
|
<p
|
||||||
|
className="text-7xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Zero Sum
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
ARandomPsi - Daydream SV
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-9 items-center w-[400px]">
|
||||||
|
<a
|
||||||
|
href="https://scoopish.itch.io/macuahuitl"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/games/macuahuitl.png"
|
||||||
|
alt="Macuahuitl"
|
||||||
|
className="w-[391px] h-[263px] rounded-[20px] shadow-[12px_12px_0px_0px_rgba(0,0,0,0.25)] object-cover hover:scale-105 transition-transform"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<div className="text-center text-[#d7cfeb]">
|
||||||
|
<p
|
||||||
|
className="text-7xl font-bold mb-2"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Macuahuitl
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-4xl font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
scoopish - Daydream Global
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="relative h-[200px] bg-[#384fbc]">
|
||||||
|
<div className="absolute inset-0 w-full h-full opacity-30 transform rotate-180">
|
||||||
|
<img src="/decorative/puzzle-outline.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-[30px] left-[200px] transform rotate-[25deg]">
|
||||||
|
<img
|
||||||
|
src="/decorative/puzzle-scattered.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[180px] h-[140px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-[60px] right-[100px] transform rotate-[-15deg]">
|
||||||
|
<img
|
||||||
|
src="/decorative/puzzle-scattered.png"
|
||||||
|
alt=""
|
||||||
|
className="w-[140px] h-[110px] object-cover shadow-[0_12px_0px_0px_rgba(0,0,0,0.25)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="relative bg-[#384fbc] py-24">
|
||||||
|
<div className="absolute top-[100px] left-1/2 transform -translate-x-1/2 w-[1732px] h-[2162px] rotate-[-3.3deg] -z-10">
|
||||||
|
<img
|
||||||
|
src="/ui/faq-speech-bubble.svg"
|
||||||
|
alt=""
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 px-32">
|
||||||
|
<h2
|
||||||
|
className="text-[#d7cfeb] text-[128px] font-normal text-center mb-16"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
FAQ
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex gap-10 justify-center items-end">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 w-[608px] h-[1491px]">
|
||||||
|
<img src="/ui/faq-participant-bg.svg" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex flex-col gap-10 items-center px-16 pt-8 w-[608px]">
|
||||||
|
<p
|
||||||
|
className="text-[#d7cfeb] text-6xl font-normal text-center mb-4"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Participant
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<FaqQuestion className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="Am I Eligible?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="But I've never hacked before!" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="All this, for free?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="What do I need to bring?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqButton className="bg-[#091e8b] shadow-[8px_8px_0px_0px_#0a1861] flex items-start px-5 py-12 h-[168px] w-[467px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 w-[608px] h-[1505px]">
|
||||||
|
<img src="/ui/faq-organizer-bg.svg" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex flex-col gap-10 items-center px-16 pt-9 w-[608px]">
|
||||||
|
<p
|
||||||
|
className="text-[#d7cfeb] text-6xl font-normal text-center mb-4"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Organizer
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<FaqQuestion question="Can I organize a Campfire in my city?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="What are the steps to organizing?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="Do we get funding?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="Do we get volunteer hours?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqQuestion question="Can I join an organizing team?" className="bg-[#8d3f34] shadow-[8px_8px_0px_0px_#733a32] flex flex-col items-center justify-center px-12 py-0 h-[168px] w-[467px]" />
|
||||||
|
<FaqButton content="Apply to be an organizer" className="bg-[#091e8b] shadow-[8px_8px_0px_0px_#0a1861] flex items-start px-5 py-12 h-[168px] w-[467px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute -bottom-[100px] left-1/2 transform -translate-x-1/2 w-[800px] h-[150px]" style={{
|
||||||
|
backgroundImage: `url(/ui/faq-speech-bubble.svg)`,
|
||||||
|
backgroundSize: 'contain',
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
transform: 'translateX(-50%) rotate(180deg)'
|
||||||
|
}} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer className="relative h-[800px]" style={{
|
||||||
|
background: `
|
||||||
|
url(/backgrounds/night-wallpaper.png),
|
||||||
|
url(/backgrounds/stars.png),
|
||||||
|
url(/backgrounds/clouds.png),
|
||||||
|
url(/backgrounds/wood.png)
|
||||||
|
`,
|
||||||
|
backgroundSize: 'cover, cover, cover, cover'
|
||||||
|
}}>
|
||||||
|
<div className="absolute bottom-[190px] left-0 w-full h-[420px]">
|
||||||
|
<img src="/backgrounds/grass.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-[190px] left-[483px] w-[791px] h-[562px]">
|
||||||
|
<img src="/characters/ghosts.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-[190px] right-[380px] w-[363px] h-[483px]">
|
||||||
|
<img src="/characters/campfire.png" alt="" className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 left-0 w-full h-[190px] bg-[#0f371d] flex items-center justify-center">
|
||||||
|
<p
|
||||||
|
className="text-white text-6xl text-center font-bold"
|
||||||
|
style={{
|
||||||
|
fontFamily: fonts.amaticBold,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textShadow: "0px 4px 4px rgba(0,0,0,0.25)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
made with ♥ by Hack Club teens
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
1
frontend/src/assets/react.svg
Normal file
1
frontend/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
44
frontend/src/index.css
Normal file
44
frontend/src/index.css
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DREAM PLANNER';
|
||||||
|
src: url('/fonts/dreamplanner.woff2') format('woff2'),
|
||||||
|
url('/fonts/dreamplanner.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #root {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--animate-fish-swim-1: fish-swim 64s linear infinite;
|
||||||
|
--animate-fish-swim-2: fish-swim 70s linear infinite;
|
||||||
|
--animate-cloud-float-right: float-left-right 20s ease-in-out alternate infinite;
|
||||||
|
|
||||||
|
@keyframes fish-swim {
|
||||||
|
0% { transform: translateX(0px) scaleX(1); }
|
||||||
|
49.9999% { transform: translateX(-50vw) scaleX(1); }
|
||||||
|
50% { transform: translateX(-50vw) scaleX(-1); }
|
||||||
|
100% { transform: translateX(0px) scaleX(-1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-left-right {
|
||||||
|
0% { transform: translateX(-5vw); }
|
||||||
|
100% { transform: translateX(0vw); }
|
||||||
|
}
|
||||||
|
}
|
||||||
10
frontend/src/main.tsx
Normal file
10
frontend/src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
28
frontend/tsconfig.app.json
Normal file
28
frontend/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
frontend/tsconfig.json
Normal file
7
frontend/tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
26
frontend/tsconfig.node.json
Normal file
26
frontend/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
8
frontend/vite.config.ts
Normal file
8
frontend/vite.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue