diff --git a/src/assets/logo/esc-logo.png b/src/assets/logo/esc-logo.png new file mode 100644 index 0000000..5b9e034 Binary files /dev/null and b/src/assets/logo/esc-logo.png differ diff --git a/src/assets/logo/gearfest-logo.png b/src/assets/logo/gearfest-logo.png new file mode 100644 index 0000000..2c6edff Binary files /dev/null and b/src/assets/logo/gearfest-logo.png differ diff --git a/src/assets/logo/kntu-logo.png b/src/assets/logo/kntu-logo.png new file mode 100644 index 0000000..6385604 Binary files /dev/null and b/src/assets/logo/kntu-logo.png differ diff --git a/src/assets/scene/scene2/1.png b/src/assets/scene/scene2/1.png new file mode 100644 index 0000000..441d385 Binary files /dev/null and b/src/assets/scene/scene2/1.png differ diff --git a/src/assets/scene/scene2/2.png b/src/assets/scene/scene2/2.png new file mode 100644 index 0000000..d1c35b5 Binary files /dev/null and b/src/assets/scene/scene2/2.png differ diff --git a/src/assets/scene/scene2/3.png b/src/assets/scene/scene2/3.png new file mode 100644 index 0000000..f6b7e5b Binary files /dev/null and b/src/assets/scene/scene2/3.png differ diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx new file mode 100644 index 0000000..fd7703e --- /dev/null +++ b/src/components/register-page/Hero.tsx @@ -0,0 +1,55 @@ +import BarImage from "@/assets/images/bar.png"; +import { cn } from "@/lib/utils"; + +interface Props { + page: "register" | "start" | "redo"; + dDay: boolean; +} + +const Hero = ({ page, dDay }: Props) => { + return ( +
+
+ Bar Image +
+ {dDay ? ( +
+ + + +
+ ) : ( +
+ +
+ )} +
+ ); +}; + +export default Hero; diff --git a/src/components/story/bg-animation/Scene2.tsx b/src/components/story/bg-animation/Scene2.tsx new file mode 100644 index 0000000..da1035b --- /dev/null +++ b/src/components/story/bg-animation/Scene2.tsx @@ -0,0 +1,33 @@ +import Tap from "@/components/story/Tap.tsx"; +import type { ImageMetadata } from "astro"; +import { useEffect, useState } from "react"; + +interface Props { + scene: ImageMetadata[]; +} + +const Scene2 = ({ scene }: Props) => { + const [sceneIndex, setSceneIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setSceneIndex((prev) => { + if (prev === scene.length - 1) return scene.length - 1; + return prev + 1; + }); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( + <> + {sceneIndex === scene.length - 1 ? : null} +
+ +
+ + ); +}; + +export default Scene2; diff --git a/src/data/cocktail.ts b/src/data/cocktail.ts index 4b73aed..8ce7a37 100644 --- a/src/data/cocktail.ts +++ b/src/data/cocktail.ts @@ -1,40 +1,39 @@ export interface Cocktail { - variant: "raspberry" | "cosmo" | "pina" | "gin" | "lagoon" | "lalemon"; + variant: "raspberry" | "cosmo" | "pina" | "gin" | "lagoon" | "lalemon"; } export const BACKGROUND: Record = { - raspberry: "bg-raspberry", - cosmo: "bg-cosmo", - pina: "bg-pina", - gin: "bg-gin", - lagoon: "bg-lagoon", - lalemon: "bg-lalemon", + raspberry: "bg-raspberry", + cosmo: "bg-cosmo", + pina: "bg-pina", + gin: "bg-gin", + lagoon: "bg-lagoon", + lalemon: "bg-lalemon", }; export const BACKGROUND_BOX: Record = { - raspberry: "bg-raspberrybox", - cosmo: "bg-cosmobox", - pina: "bg-pinabox", - gin: "bg-ginbox", - lagoon: "bg-lagoonbox", - lalemon: "bg-lalemonbox", + raspberry: "bg-raspberrybox", + cosmo: "bg-cosmobox", + pina: "bg-pinabox", + gin: "bg-ginbox", + lagoon: "bg-lagoonbox", + lalemon: "bg-lalemonbox", }; export const TEXT: Record = { - raspberry: "text-salmon", - cosmo: "text-peach", - pina: "text-pineapple", - gin: "text-leaf", - lagoon: "text-tropical", - lalemon: "text-lavender", + raspberry: "text-salmon", + cosmo: "text-peach", + pina: "text-pineapple", + gin: "text-leaf", + lagoon: "text-tropical", + lalemon: "text-lavender", }; export const NAME: Record = { - raspberry: "Summer Berry Sangria", - cosmo: "Cosmopolitan", - pina: "Pina Colada", - gin: "Gin and Tonic", - lagoon: "Blue Lagoon", - lalemon: "Lavender Lemonade", + raspberry: "Summer Berry Sangria", + cosmo: "Cosmopolitan", + pina: "Pina Colada", + gin: "Gin and Tonic", + lagoon: "Blue Lagoon", + lalemon: "Lavender Lemonade", }; - diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 40224f2..4525c0d 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,5 +1,6 @@ --- -import "@/style.css"; +import "@/styles/global.css"; + import { ViewTransitions } from "astro:transitions"; interface Props { pageTitle?: string; @@ -19,7 +20,7 @@ const { pageTitle = "GearFestival" } = Astro.props;
diff --git a/src/layouts/SignInBackground.astro b/src/layouts/SignInBackground.astro new file mode 100644 index 0000000..857f61a --- /dev/null +++ b/src/layouts/SignInBackground.astro @@ -0,0 +1,107 @@ +--- +import { Image } from "astro:assets"; + +import elemLavenderLemonade from "@/assets/elements/lavender-lemonade.png"; +import elemPinaColada from "@/assets/elements/pina-colada.png"; +import elemIceCream2 from "@/assets/elements/icecream-2.png"; +import elemBlueLagoon from "@/assets/elements/blue-lagoon.png"; +import elemGinAndTonic from "@/assets/elements/gin-and-tonic.png"; +import elemRadio from "@/assets/elements/radio.png"; +import elemPalette from "@/assets/elements/palette.png"; +import elemLightning from "@/assets/elements/lightning.png"; +import elemSummerBerrySangria from "@/assets/elements/summer-berry-sangria.png"; +import elemCosmopolitan from "@/assets/elements/cosmopolitan.png"; +import elemCalendar from "@/assets/elements/calendar.png"; +--- + + diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 21fe2b7..055b8bd 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -2,5 +2,5 @@ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...args: ClassValue[]) { - return twMerge(clsx(args)); + return twMerge(clsx(args)); } diff --git a/src/pages/index.astro b/src/pages/index.astro index 9afdd94..532502c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,8 +1,34 @@ --- +import { Image } from "astro:assets"; + import BaseLayout from "@/layouts/BaseLayout.astro"; +import SignInBackground from "@/layouts/SignInBackground.astro"; +import Hero from "@/components/register-page/Hero.tsx"; + +import escLogo from "@/assets/logo/esc-logo.png"; +import gearfestLogo from "@/assets/logo/gearfest-logo.png"; +import kntuLogo from "@/assets/logo/kntu-logo.png"; --- - - -

email

+ + +
+
+ ESC + Gear Festival 2023 + KNTU +
+ +
+ diff --git a/src/pages/signin.astro b/src/pages/signin.astro deleted file mode 100644 index d3b75fa..0000000 --- a/src/pages/signin.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- -import BaseLayout from "@/layouts/BaseLayout.astro"; ---- - - - -
- -
- diff --git a/src/pages/story/Scene2.astro b/src/pages/story/Scene2.astro new file mode 100644 index 0000000..4010f37 --- /dev/null +++ b/src/pages/story/Scene2.astro @@ -0,0 +1,12 @@ +--- +import BaseLayout from "@/layouts/BaseLayout.astro"; +import Scene2Anim from "@/components/story/bg-animation/Scene2.tsx"; + +import Door1 from "@/assets/scene/scene2/1.png"; +import Door2 from "@/assets/scene/scene2/2.png"; +import Door3 from "@/assets/scene/scene2/3.png"; +--- + + + + diff --git a/src/style.css b/src/styles/global.css similarity index 95% rename from src/style.css rename to src/styles/global.css index d449964..523f807 100644 --- a/src/style.css +++ b/src/styles/global.css @@ -1,47 +1,47 @@ -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-Text.ttf"); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf"); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf"); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf"); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-Light.ttf"); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "SukhumvitSet"; - src: url("/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf"); - font-weight: 100; - font-style: normal; - font-display: swap; -} +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-Text.ttf"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-Bold.ttf"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-SemiBold.ttf"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-Medium.ttf"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-Light.ttf"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "SukhumvitSet"; + src: url("/fonts/sukhumvit-set/SukhumvitSet-Thin.ttf"); + font-weight: 100; + font-style: normal; + font-display: swap; +} diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 0139479..6f1506f 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -10,6 +10,8 @@ export default { sans: ["SukhumvitSet", ...defaultTheme.fontFamily.sans], }, backgroundImage: { + signin: + "url(/src/assets/images/grain-bg.png), linear-gradient(170deg, #A283AB -10.14%, #0D3C56 69.45%);", raspberry: 'url("/src/assets/images/grain-bg.png"), linear-gradient(170deg, #F9998C -10.14%, #650C17 98.39%)', raspberrybox: @@ -29,6 +31,8 @@ export default { lalemonbox: "linear-gradient(166deg, #FBF6FE -16.07%, #E2C9E8 81.36%)", }, colors: { + primary: "#864974", + base: "#E0E0E0", mutedpurple: "#864974", mutedbrown: "#6D5958", salmon: "#EB7676", @@ -38,6 +42,10 @@ export default { tropical: "#3884EB", lavender: "#8D61A7", }, + boxShadow: { + button: + "0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset, 0px 2px 9px 0px rgba(0, 0, 0, 0.25);", + }, }, }, plugins: [addDynamicIconSelectors()], diff --git a/tsconfig.json b/tsconfig.json index 2117e54..cce70d7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@/*": ["src/*"], + "#/*": ["public/*"] }, "jsx": "react-jsx", "jsxImportSource": "react"