diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..4aca6eb --- /dev/null +++ b/.gitattributes @@ -0,0 +1,5 @@ +public/videos/** filter=lfs diff=lfs merge=lfs -text +public/*.mp4 filter=lfs diff=lfs merge=lfs -text +*.mp4 filter=lfs diff=lfs merge=lfs -text +*.ogv filter=lfs diff=lfs merge=lfs -text +*.webm filter=lfs diff=lfs merge=lfs -text diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..da5d8a7 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,49 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Next.js: debug server-side", + "type": "node-terminal", + "request": "launch", + "command": "npm run dev" + }, + { + "name": "Next.js: debug client-side", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000" + }, + { + "name": "Next.js: debug client-side (Firefox)", + "type": "firefox", + "request": "launch", + "url": "http://localhost:3000", + "reAttach": true, + "pathMappings": [ + { + "url": "webpack://_N_E", + "path": "${workspaceFolder}" + } + ] + }, + { + "name": "Next.js: debug full stack", + "type": "node", + "request": "launch", + "program": "${workspaceFolder}/node_modules/.bin/next", + "runtimeArgs": [ + "--inspect" + ], + "skipFiles": [ + "/**" + ], + "serverReadyAction": { + "action": "debugWithEdge", + "killOnServerStop": true, + "pattern": "- Local:.+(https?://.+)", + "uriFormat": "%s", + "webRoot": "${workspaceFolder}" + } + } + ] +} diff --git a/public/cebula.mp4 b/public/cebula.mp4 deleted file mode 100644 index c173301..0000000 Binary files a/public/cebula.mp4 and /dev/null differ diff --git a/public/site.webmanifest b/public/site.webmanifest index ccf313a..a7b5140 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,6 +1,6 @@ { - "name": "MyWebSite", - "short_name": "MySite", + "name": "CebulaCamp", + "short_name": "Cebula", "icons": [ { "src": "/web-app-manifest-192x192.png", @@ -18,4 +18,4 @@ "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" -} \ No newline at end of file +} diff --git a/public/videos/ceboola_gradient-white_full.mp4 b/public/videos/ceboola_gradient-white_full.mp4 new file mode 100644 index 0000000..2c0de28 --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:51ad52ec5d15803e215eecd8b38da201d1859823eab4928659af69c436485e99 +size 7011773 diff --git a/public/videos/ceboola_gradient-white_full.ogv b/public/videos/ceboola_gradient-white_full.ogv new file mode 100644 index 0000000..08a7e63 --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2d84199328bc9a4816c8d5e9382deba152e0abe517f174dd1daac0d4842b329e +size 18804511 diff --git a/public/videos/ceboola_gradient-white_full.webm b/public/videos/ceboola_gradient-white_full.webm new file mode 100644 index 0000000..52eea5e --- /dev/null +++ b/public/videos/ceboola_gradient-white_full.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:139aaf6bbcc174536bb20617d19dc766749237c97ff7a3a60b2fc9758fd97167 +size 7580264 diff --git a/public/videos/ceboola_gradient-white_hd.mp4 b/public/videos/ceboola_gradient-white_hd.mp4 new file mode 100644 index 0000000..d57dbdc --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0afab07eb28ccb52f0520a7969249d8d5b041c83d08e4dc35e1a312825558fcc +size 2099635 diff --git a/public/videos/ceboola_gradient-white_hd.ogv b/public/videos/ceboola_gradient-white_hd.ogv new file mode 100644 index 0000000..ff742bf --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9e842f08ec6a553789a44175f1d8f9f2c9e11522d5d144fe3ca37cf83b455550 +size 3734565 diff --git a/public/videos/ceboola_gradient-white_hd.webm b/public/videos/ceboola_gradient-white_hd.webm new file mode 100644 index 0000000..630daa4 --- /dev/null +++ b/public/videos/ceboola_gradient-white_hd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0eef62394a425b50e2db05aa395bea91bb3973777a0cc35b13974c5efe17a0a9 +size 4815227 diff --git a/public/videos/ceboola_gradient-white_mobile.mp4 b/public/videos/ceboola_gradient-white_mobile.mp4 new file mode 100644 index 0000000..e952705 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7e0e199970214b4c5217738732cd126f7bd3917c132fa6f7f0664045c4603275 +size 701189 diff --git a/public/videos/ceboola_gradient-white_mobile.ogv b/public/videos/ceboola_gradient-white_mobile.ogv new file mode 100644 index 0000000..5047b28 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0225451504fb900a382b9b93266104ba3a793fb46c8469672eadcc160a5d18ee +size 1124342 diff --git a/public/videos/ceboola_gradient-white_mobile.webm b/public/videos/ceboola_gradient-white_mobile.webm new file mode 100644 index 0000000..1397338 --- /dev/null +++ b/public/videos/ceboola_gradient-white_mobile.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:340a6f349536f5e3f4159d0dafeb50a80139135b0536a76029bdda1f83144f1d +size 1718846 diff --git a/public/videos/ceboola_gradient-white_tablet.mp4 b/public/videos/ceboola_gradient-white_tablet.mp4 new file mode 100644 index 0000000..547cd85 --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:de41305810b1bd405e03c1622083b37195f01a47adaf10b2203639edd0b9a502 +size 1242282 diff --git a/public/videos/ceboola_gradient-white_tablet.ogv b/public/videos/ceboola_gradient-white_tablet.ogv new file mode 100644 index 0000000..1b8ee23 --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:60c468c10b8d276df0e2a42044bef44b5674ce623bb012db788b40d5002c61ad +size 2221672 diff --git a/public/videos/ceboola_gradient-white_tablet.webm b/public/videos/ceboola_gradient-white_tablet.webm new file mode 100644 index 0000000..53b306e --- /dev/null +++ b/public/videos/ceboola_gradient-white_tablet.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a0f7bfe7278fb36235663aec28faee6d0ba63639ed5d5b39d376a98a00b909d9 +size 3097957 diff --git a/public/videos/ceboola_gradient-white_twok.mp4 b/public/videos/ceboola_gradient-white_twok.mp4 new file mode 100644 index 0000000..0dd0057 --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2da667d5249582ee69292be11bc631b4052dbeb9d1870c12087bd423882a0a39 +size 2949586 diff --git a/public/videos/ceboola_gradient-white_twok.ogv b/public/videos/ceboola_gradient-white_twok.ogv new file mode 100644 index 0000000..8b20794 --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2c3e4120cdf0a0ff9a6eed87ba0e33fd7af7f7a69135fb7e92554d7b505be16d +size 5246477 diff --git a/public/videos/ceboola_gradient-white_twok.webm b/public/videos/ceboola_gradient-white_twok.webm new file mode 100644 index 0000000..b5b0af6 --- /dev/null +++ b/public/videos/ceboola_gradient-white_twok.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fc3728f4b77595c86802da3882015a5565932f7097455ea442d136e324b88928 +size 6295095 diff --git a/public/videos/ceboola_gradient-white_uhd.mp4 b/public/videos/ceboola_gradient-white_uhd.mp4 new file mode 100644 index 0000000..7d45a22 --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:568ef107a92b927e88297db970bda4a87808b548c60e619df5513d7f5ba3f98a +size 4271204 diff --git a/public/videos/ceboola_gradient-white_uhd.ogv b/public/videos/ceboola_gradient-white_uhd.ogv new file mode 100644 index 0000000..7798dd1 --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:93dc6debc437d4ee44025ef229df6c46c9f40919c53a49bbf449e3d4e1e4728c +size 8231770 diff --git a/public/videos/ceboola_gradient-white_uhd.webm b/public/videos/ceboola_gradient-white_uhd.webm new file mode 100644 index 0000000..eceb55d --- /dev/null +++ b/public/videos/ceboola_gradient-white_uhd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6d0e3f3e12a7e8723be5389924b96c59a09b6d9a6b9cd70ef881ace7c6972da7 +size 9187455 diff --git a/public/videos/ceboola_gradient_full.mp4 b/public/videos/ceboola_gradient_full.mp4 new file mode 100644 index 0000000..266d96a --- /dev/null +++ b/public/videos/ceboola_gradient_full.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:db3a76081e9ff791a7b08bbb8c54dd5f9cf7bf31b0cc401895e65a2c20c8012b +size 8557366 diff --git a/public/videos/ceboola_gradient_full.ogv b/public/videos/ceboola_gradient_full.ogv new file mode 100644 index 0000000..f728a96 --- /dev/null +++ b/public/videos/ceboola_gradient_full.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cb59c102ca9a00e913cbad5b793d9a281b3248ba5132b212f8efffa6f33777e7 +size 26139433 diff --git a/public/videos/ceboola_gradient_full.webm b/public/videos/ceboola_gradient_full.webm new file mode 100644 index 0000000..a25558a --- /dev/null +++ b/public/videos/ceboola_gradient_full.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:87d21e5d9c50e7d9423c5ec77bcad4e21151927e2d01ea5bf8ca4eefe5a7acd2 +size 9284212 diff --git a/public/videos/ceboola_gradient_hd.mp4 b/public/videos/ceboola_gradient_hd.mp4 new file mode 100644 index 0000000..fe731c5 --- /dev/null +++ b/public/videos/ceboola_gradient_hd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:297e72d490ccddc357628c886b8cb3abad706e5e42145a2c1dc27bdb9a865bf9 +size 2617323 diff --git a/public/videos/ceboola_gradient_hd.ogv b/public/videos/ceboola_gradient_hd.ogv new file mode 100644 index 0000000..ae38fab --- /dev/null +++ b/public/videos/ceboola_gradient_hd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c438218b7650e8fa33aa8738be6c66d0142dbedc7f5b086892cc1e569b90a37f +size 4984630 diff --git a/public/videos/ceboola_gradient_hd.webm b/public/videos/ceboola_gradient_hd.webm new file mode 100644 index 0000000..b9c040e --- /dev/null +++ b/public/videos/ceboola_gradient_hd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fc28052a4be45cfb0a508dac5033c3d6675fe5ec7819b9086ad1e1bb7568e44a +size 6129449 diff --git a/public/videos/ceboola_gradient_mobile.mp4 b/public/videos/ceboola_gradient_mobile.mp4 new file mode 100644 index 0000000..67b8653 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f33b7e2ac6c55684a4988b06049652a493d9ff64642700af208b90de3757a7dc +size 951995 diff --git a/public/videos/ceboola_gradient_mobile.ogv b/public/videos/ceboola_gradient_mobile.ogv new file mode 100644 index 0000000..d27e7f8 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ecdeebdc27f8fc81c923f4555f55c2511ae54d059256d1b6a6999e07e8d0bae7 +size 1834219 diff --git a/public/videos/ceboola_gradient_mobile.webm b/public/videos/ceboola_gradient_mobile.webm new file mode 100644 index 0000000..f03cc02 --- /dev/null +++ b/public/videos/ceboola_gradient_mobile.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d5a163fe08052725326178cd48a74154133b890b4d167a9b7f40471868cc733f +size 2367459 diff --git a/public/videos/ceboola_gradient_tablet.mp4 b/public/videos/ceboola_gradient_tablet.mp4 new file mode 100644 index 0000000..6839fd0 --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d259d47b35481cf4996c418c626b719fc45e49fbce411a080f4830b6ff1fcab3 +size 1601683 diff --git a/public/videos/ceboola_gradient_tablet.ogv b/public/videos/ceboola_gradient_tablet.ogv new file mode 100644 index 0000000..001139d --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c23314ecc7029a1ca6afe205f177ce3e652a86e322ab8d804ad73c2b262a7ca9 +size 3152008 diff --git a/public/videos/ceboola_gradient_tablet.webm b/public/videos/ceboola_gradient_tablet.webm new file mode 100644 index 0000000..16e6818 --- /dev/null +++ b/public/videos/ceboola_gradient_tablet.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5fed5ec6dab109619c42c8dec870cf9e704c099efe7212863239238154df6eca +size 4065859 diff --git a/public/videos/ceboola_gradient_twok.mp4 b/public/videos/ceboola_gradient_twok.mp4 new file mode 100644 index 0000000..92e1988 --- /dev/null +++ b/public/videos/ceboola_gradient_twok.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:95d75f2183a9d961dfc5b76f6ea297be3c2c46e64d2bc0179b43b6ada9fe6955 +size 3501004 diff --git a/public/videos/ceboola_gradient_twok.ogv b/public/videos/ceboola_gradient_twok.ogv new file mode 100644 index 0000000..d1a07ad --- /dev/null +++ b/public/videos/ceboola_gradient_twok.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0767139b74c6e43cb4ccc46b61e35df67f44cc5e8d28e4df27ad96f55666c05c +size 6947904 diff --git a/public/videos/ceboola_gradient_twok.webm b/public/videos/ceboola_gradient_twok.webm new file mode 100644 index 0000000..02f1dd3 --- /dev/null +++ b/public/videos/ceboola_gradient_twok.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:14780c373974366f342a7ed083da77cd7ed2069d2c10f3564eda5903bb67627e +size 7812413 diff --git a/public/videos/ceboola_gradient_uhd.mp4 b/public/videos/ceboola_gradient_uhd.mp4 new file mode 100644 index 0000000..6b4d064 --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2cd1da0d4d62e79cdee482bcc72264891c8aaf33e8e14c1723c389cb61a740c7 +size 5165018 diff --git a/public/videos/ceboola_gradient_uhd.ogv b/public/videos/ceboola_gradient_uhd.ogv new file mode 100644 index 0000000..84e49fa --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.ogv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:119e4bda2d0fcff857a061c90c6e2a153af03a81abc6b435c3053f135ef1d586 +size 10640048 diff --git a/public/videos/ceboola_gradient_uhd.webm b/public/videos/ceboola_gradient_uhd.webm new file mode 100644 index 0000000..5808139 --- /dev/null +++ b/public/videos/ceboola_gradient_uhd.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1b6daf32883c2417f65bd47fac4d2ceb852b1b391edc681b6a92a34fe7c30150 +size 11756135 diff --git a/scripts/reencode-videos.sh b/scripts/reencode-videos.sh new file mode 100755 index 0000000..c8185a2 --- /dev/null +++ b/scripts/reencode-videos.sh @@ -0,0 +1,90 @@ +#!/bin/bash + +# Define directories +SOURCE_DIR="./source-videos" +DEST_DIR="./public/videos" + +# Define sizes and names +SIZES=(480 720 1080 1440 2160) +NAMES=("mobile" "tablet" "hd" "twok" "uhd") + +# Create destination directory if it doesn't exist +mkdir -p "$DEST_DIR" + +for video in "$SOURCE_DIR"/*.mp4; do + if [ -f "$video" ]; then + filename=$(basename "$video" .mp4) + echo "Processing: $filename" + + # Get video dimensions + width=$(ffprobe -v error -select_streams v:0 -show_entries stream=width -of csv=p=0 "$video") + height=$(ffprobe -v error -select_streams v:0 -show_entries stream=height -of csv=p=0 "$video") + + # Process each size + for i in "${!SIZES[@]}"; do + size="${SIZES[$i]}" + name="${NAMES[$i]}" + + echo "Debug: Processing $name with height=$size" + + if [ "$size" -le "$height" ]; then + echo "Processing size $name (${size}p)" + # MP4 + ffmpeg -n -i "$video" \ + -c:v libx264 \ + -vf "scale=-1:${size}" \ + -preset slow \ + -crf 23 \ + -an \ + "${DEST_DIR}/${filename}_${name}.mp4" + + # WebM + ffmpeg -n -i "$video" \ + -c:v libvpx-vp9 \ + -deadline good \ + -cpu-used 2 \ + -row-mt 1 \ + -threads 8 \ + -vf "scale=-1:${size}" \ + -quality good \ + -an \ + -crf 20 \ + "${DEST_DIR}/${filename}_${name}.webm" + + # Ogg + ffmpeg -n -i "$video" \ + -c:v libtheora \ + -q:v 5 \ + -vf "scale=-1:${size}" \ + -an \ + "${DEST_DIR}/${filename}_${name}.ogv" + fi + done + + # Create original resolution version + echo "Creating original resolution version" + + cp "$video" "${DEST_DIR}/${filename}_full.mp4" + + ffmpeg -n -i "$video" \ + -c:v libvpx-vp9 \ + -deadline good \ + -cpu-used 2 \ + -row-mt 1 \ + -threads 8 \ + -quality good \ + -an \ + "${DEST_DIR}/${filename}_full.webm" + + ffmpeg -n -i "$video" \ + -c:v libtheora \ + -q:v 5 \ + -an \ + "${DEST_DIR}/${filename}_full.ogv" + + echo "Completed processing: $filename" + echo "----------------------------" + fi +done + +echo "All videos have been processed." diff --git a/source-videos/ceboola_gradient-white.mp4 b/source-videos/ceboola_gradient-white.mp4 new file mode 100644 index 0000000..2c0de28 --- /dev/null +++ b/source-videos/ceboola_gradient-white.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:51ad52ec5d15803e215eecd8b38da201d1859823eab4928659af69c436485e99 +size 7011773 diff --git a/source-videos/ceboola_gradient.mp4 b/source-videos/ceboola_gradient.mp4 new file mode 100644 index 0000000..266d96a --- /dev/null +++ b/source-videos/ceboola_gradient.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:db3a76081e9ff791a7b08bbb8c54dd5f9cf7bf31b0cc401895e65a2c20c8012b +size 8557366 diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 8d002bd..333c093 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -2,10 +2,12 @@ import "../../globals.css"; import type React from "react"; -import { Lang, locales } from "@/i18n/locales"; +import { getLocale, Lang } from "@/i18n/locales"; import Head from 'next/head'; +import { ThemeProvider } from "@/components/providers"; import { Oxanium } from "next/font/google"; +import { headers } from "next/headers"; const oxanium = Oxanium({ subsets: ["latin-ext"] }) @@ -16,20 +18,34 @@ export default async function RootLayout({ children: React.ReactNode params: Promise<{ locale: Lang }> }) { - const { locale } = await params - const currentLang = locales.includes(locale) ? locale : "en" + const [{ locale }, head] = await Promise.all([ + params, + headers(), + ]); + + const preferedTheme = head.get("Sec-CH-Prefers-Color-Scheme")?.toLowerCase(); + const supportedThemes = ["dark", "light"]; + + const isDarkOrLight = + preferedTheme && supportedThemes.includes(preferedTheme); + + const currentLang = getLocale(locale); + const defaultTheme = isDarkOrLight ? preferedTheme : "dark"; + return ( - + - + - {children} + + {children} + ) diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx new file mode 100644 index 0000000..558db1e --- /dev/null +++ b/src/app/[locale]/loading.tsx @@ -0,0 +1,4 @@ + +export default function Loading() { + return
Loading...
+} diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx new file mode 100644 index 0000000..c363b3b --- /dev/null +++ b/src/app/[locale]/not-found.tsx @@ -0,0 +1,5 @@ + + +export default function NotFound() { + return
Not Found
+} diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index 9270e39..b711c17 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -1,130 +1,17 @@ -"use client" - -import { Nav } from "@/components/nav" -import { translations } from "@/i18n/translations" -import { useEffect, useRef } from "react" +import LandingPage from "@/components/landing-page"; +import { getLocale, Lang } from "@/i18n/locales"; +import { translations } from "@/i18n/translations"; -export default function Home() { - const videoRef = useRef(null) - const t = translations.pl // For now using Polish, could be made dynamic +export default async function Home( + { params } + : + { params: Promise<{ locale: Lang }> } +) { + const { locale } = await params + const currentLocale = getLocale(locale) + const t = translations[currentLocale]; - - useEffect(() => { - const handleScroll = () => { - if (videoRef.current) { - const scrolled = window.scrollY; - videoRef.current.style.willChange = "transform"; - videoRef.current.style.transform = `translateY(${scrolled * 0.5}px)`; - videoRef.current.style.willChange = "unset"; - } - }; - - const throttledHandleScroll = () => { - requestAnimationFrame(handleScroll); - }; - - window.addEventListener('scroll', throttledHandleScroll); - return () => window.removeEventListener('scroll', throttledHandleScroll); - }, []); - - return ( -
-
- ) + return } diff --git a/src/components/landing-page.tsx b/src/components/landing-page.tsx new file mode 100644 index 0000000..0ab37bd --- /dev/null +++ b/src/components/landing-page.tsx @@ -0,0 +1,173 @@ +"use client" + +import { Nav } from "@/components/nav"; +import { Translations } from "@/i18n/translations"; +import { cn } from "@/lib/utils"; +import { ReactElement, useEffect, useRef } from "react"; +import { useTheme } from "./providers"; + +function Section({ + id, + title, + paragraphs +}: { + id: string + title: string; + paragraphs: ReactElement; +}) { + return (
+
+

{title}

+
+ {paragraphs} +
+
+
) +} + +function getSource({ + src, + type +}: { + src: string; + type: 'mp4' | 'webm' | 'ogv' +}) { + const sourceType = `video/${type}` + return [ + , + + , + + , + + , + + , + + , + ]; +} + +function Video({ sourceBase, hidden }: { + sourceBase: string; + hidden: boolean; +}) { + const videoRef = useRef(null); + + useEffect(() => { + const handleScroll = () => { + if (!videoRef.current || hidden) return; + + videoRef.current.play(); + const scrolled = window.scrollY; + videoRef.current.style.willChange = "transform"; + videoRef.current.style.transform = `translateY(${scrolled * 0.5}px)`; + videoRef.current.style.willChange = "unset"; + }; + + const throttledHandleScroll = () => { + requestAnimationFrame(handleScroll); + }; + + window.addEventListener("scroll", throttledHandleScroll); + handleScroll(); + return () => window.removeEventListener("scroll", throttledHandleScroll); + }, [hidden]); + + const sources = [...getSource({ src: sourceBase, type: 'mp4' }), ...getSource({ src: sourceBase, type: 'ogv' }), ...getSource({ src: sourceBase, type: 'webm' })] + + return ( + + ); +} + +export default function LandingPage( + { t }: { t: Translations } +) { + + const { theme } = useTheme() + + return ( +
+
+ ) +} + diff --git a/src/components/nav.tsx b/src/components/nav.tsx index 5f8b574..364f5ef 100644 --- a/src/components/nav.tsx +++ b/src/components/nav.tsx @@ -3,10 +3,12 @@ import { Button } from "@/components/ui/button" import { Sections, type translations } from "@/i18n/translations" import { cn } from "@/lib/utils" import { MoonIcon, SunIcon } from "lucide-react" -import { useCallback, useEffect, useState } from "react" +import { useEffect, useState } from "react" import { MobileNav } from "./mobile-nav" +import { useTheme } from "./providers" const linksOrder: Array = [ + "hero", "about", "where", "when", @@ -16,41 +18,12 @@ const linksOrder: Array = [ "contact", ] -function useTheme(): [theme: "light" | "dark", setTheme: (theme: "light" | "dark") => void] { - /* eslint-disable react-hooks/rules-of-hooks */ - if (typeof window === "undefined") return ["dark", () => { }] - const [theme, setTheme] = useState<"light" | "dark">("dark") - - const root = window.document.documentElement - - const changeTheme = useCallback((theme: "light" | "dark") => { - root.classList.remove("light", "dark") - root.classList.add(theme) - }, [root]) - - useEffect(() => { - // Determine the user's preferred color scheme - const preferredTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" - setTheme(preferredTheme) - - changeTheme(preferredTheme) - }, [changeTheme]) - - const updateTheme = useCallback((theme: "light" | "dark") => { - setTheme(theme) - changeTheme(theme) - }, [changeTheme, setTheme]) - - return [theme, updateTheme] - /* eslint-enable react-hooks/rules-of-hooks */ -} - export function Nav({ t, }: { t: typeof translations.pl }) { - const [theme, setTheme] = useTheme() + const { theme, setTheme } = useTheme() const [activeSection, setActiveSection] = useState("about") @@ -90,7 +63,7 @@ export function Nav({ }, []); return ( -