diff --git a/apps/site/package.json b/apps/site/package.json index 6fded16e..28ba05bb 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -16,6 +16,7 @@ "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", + "clsx": "^2.0.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -28,6 +29,7 @@ "eslint": "^8", "eslint-config-next": "13.5.6", "postcss": "^8", + "postcss-nesting": "^12.0.1", "tailwindcss": "^3", "typescript": "^5" } diff --git a/apps/site/postcss.config.js b/apps/site/postcss.config.js index 33ad091d..10c61e37 100644 --- a/apps/site/postcss.config.js +++ b/apps/site/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} + plugins: { + "tailwindcss/nesting": "postcss-nesting", + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx index abd8d072..19671700 100644 --- a/apps/site/src/app/(home)/page.tsx +++ b/apps/site/src/app/(home)/page.tsx @@ -1,3 +1,5 @@ +import { Landing } from "./sections"; + export default function Home() { - return

IrvineHacks 2024

; + return ; } diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.module.css b/apps/site/src/app/(home)/sections/Landing/Landing.module.css new file mode 100644 index 00000000..ec266681 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Landing/Landing.module.css @@ -0,0 +1,16 @@ +.landingSection { + background-image: url("~@/assets/backgrounds/landing-background.jpg"); + background-position: center; + background-repeat: no-repeat; + position: relative; + min-height: 100vh; + min-width: 100vw; +} + +.landingGroup { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.tsx b/apps/site/src/app/(home)/sections/Landing/Landing.tsx new file mode 100644 index 00000000..606ac342 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Landing/Landing.tsx @@ -0,0 +1,19 @@ +import Button from "@/components/Button/Button"; +import styles from "./Landing.module.css"; + +const Landing = () => { + return ( +
+
+

IrvineHacks 2024

+

January 26–28

+
+
+ ); +}; + +export default Landing; diff --git a/apps/site/src/app/(home)/sections/index.ts b/apps/site/src/app/(home)/sections/index.ts new file mode 100644 index 00000000..7b020ed8 --- /dev/null +++ b/apps/site/src/app/(home)/sections/index.ts @@ -0,0 +1 @@ +export { default as Landing } from "./Landing/Landing"; diff --git a/apps/site/src/app/favicon.ico b/apps/site/src/app/favicon.ico old mode 100644 new mode 100755 index 718d6fea..cb4c9457 Binary files a/apps/site/src/app/favicon.ico and b/apps/site/src/app/favicon.ico differ diff --git a/apps/site/src/app/globals.css b/apps/site/src/app/globals.css index fd81e885..3085ae67 100644 --- a/apps/site/src/app/globals.css +++ b/apps/site/src/app/globals.css @@ -1,27 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --color-cream: #fffce2; + --color-brown: #432810; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } +body { + color: var(--color-cream); } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); +h1 { + font-size: calc(30px + 2vw); + font-weight: 700; +} + +p { + font-size: calc(15px + 1.5vw); + margin-bottom: 1rem; +} + +a { + font-size: calc(13px + 1vw); + font-weight: 700; } diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx index 1a617fb6..c147e35d 100644 --- a/apps/site/src/app/layout.tsx +++ b/apps/site/src/app/layout.tsx @@ -1,9 +1,6 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; import "./globals.css"; -const inter = Inter({ subsets: ["latin"] }); - export const metadata: Metadata = { title: "IrvineHacks 2024", description: @@ -17,7 +14,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/apps/site/src/assets/backgrounds/landing-background.jpg b/apps/site/src/assets/backgrounds/landing-background.jpg new file mode 100644 index 00000000..7313d235 Binary files /dev/null and b/apps/site/src/assets/backgrounds/landing-background.jpg differ diff --git a/apps/site/src/components/Button/Button.module.css b/apps/site/src/components/Button/Button.module.css new file mode 100644 index 00000000..7fff22e3 --- /dev/null +++ b/apps/site/src/components/Button/Button.module.css @@ -0,0 +1,20 @@ +.button { + background-image: radial-gradient( + 50% 50% at 50% 50%, + #fff3d6 0%, + #ffda7b 51.04%, + #ffa700 100% + ); + box-shadow: 0px 0px 20px rgba(255, 252, 226, 0.5); + border-radius: 15px; + color: var(--color-brown); + padding: 0.55rem 1.25rem; + transition: + filter 0.1s ease, + box-shadow 0.1s ease; + + &:hover { + box-shadow: 0px 0px 20px #fffce2; + filter: brightness(1.05); + } +} diff --git a/apps/site/src/components/Button/Button.tsx b/apps/site/src/components/Button/Button.tsx new file mode 100644 index 00000000..fb5ce697 --- /dev/null +++ b/apps/site/src/components/Button/Button.tsx @@ -0,0 +1,28 @@ +import styles from "./Button.module.css"; + +interface ButtonProps { + text: string; + href?: string; +} + +const Button: React.FC = ({ text, href }) => { + if (href) { + return ( + + {text} + + ); + } + return ( + + ); +}; + +export default Button; diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts index 1af3b8f0..6c404317 100644 --- a/apps/site/tailwind.config.ts +++ b/apps/site/tailwind.config.ts @@ -1,20 +1,24 @@ -import type { Config } from 'tailwindcss' +import type { Config } from "tailwindcss"; const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', - ], - theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, - }, - plugins: [], -} -export default config + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + backgroundImage: { + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": + "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + }, + fontFamily: { + display: ["Alegreya"], + body: ["Mulish"], + }, + }, + }, + plugins: [], +}; +export default config; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d36bf988..efc4c3d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: '@radix-ui/react-toast': specifier: ^1.1.5 version: 1.1.5(@types/react-dom@18.2.3)(@types/react@18.2.5)(react-dom@18.2.0)(react@18.2.0) + clsx: + specifier: ^2.0.0 + version: 2.0.0 next: specifier: 13.5.6 version: 13.5.6(react-dom@18.2.0)(react@18.2.0) @@ -75,6 +78,9 @@ importers: postcss: specifier: ^8 version: 8.4.14 + postcss-nesting: + specifier: ^12.0.1 + version: 12.0.1(postcss@8.4.14) tailwindcss: specifier: ^3 version: 3.3.4 @@ -368,6 +374,15 @@ packages: '@jridgewell/trace-mapping': 0.3.9 dev: true + /@csstools/selector-specificity@3.0.0(postcss-selector-parser@6.0.13): + resolution: {integrity: sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss-selector-parser: ^6.0.13 + dependencies: + postcss-selector-parser: 6.0.13 + dev: true + /@eslint-community/eslint-utils@4.4.0(eslint@8.48.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2168,6 +2183,11 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx@2.0.0: + resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} + engines: {node: '>=6'} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -4700,6 +4720,17 @@ packages: postcss-selector-parser: 6.0.13 dev: true + /postcss-nesting@12.0.1(postcss@8.4.14): + resolution: {integrity: sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss: ^8.4 + dependencies: + '@csstools/selector-specificity': 3.0.0(postcss-selector-parser@6.0.13) + postcss: 8.4.14 + postcss-selector-parser: 6.0.13 + dev: true + /postcss-selector-parser@6.0.13: resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} engines: {node: '>=4'}