Setup basic landing page (#5)

* feat: favicon * feat: landing page * feat: button hover transition * refactor: font weight, button component props * fix: switch background to JPG, other semantic fixes
HackAtUCI · Nov 5, 2023 · f725912 · f725912
1 parent baf3d72
commit f725912
Show file tree

Hide file tree

Showing 14 changed files with 169 additions and 45 deletions.
diff --git 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
@@ -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
@@ -1,3 +1,5 @@
+import { Landing } from "./sections";
+
 export default function Home() {
-	return <h1 className="text-3xl font-bold underline">IrvineHacks 2024</h1>;
+	return <Landing />;
 }
diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.module.css 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
@@ -0,0 +1,19 @@
+import Button from "@/components/Button/Button";
+import styles from "./Landing.module.css";
+
+const Landing = () => {
+	return (
+		<section className={styles.landingSection}>
+			<div className={styles.landingGroup}>
+				<h1 className="font-display">IrvineHacks 2024</h1>
+				<p className="font-display">January 26&ndash;28</p>
+				<Button
+					text="Stay updated"
+					href="https://uci.us13.list-manage.com/subscribe?u=5976872928cd5681fbaca89f6&id=93333e11eb"
+				/>
+			</div>
+		</section>
+	);
+};
+
+export default Landing;
diff --git a/apps/site/src/app/(home)/sections/index.ts 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
diff --git 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
@@ -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 (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<body>{children}</body>
 		</html>
 	);
 }
diff --git a/apps/site/src/assets/backgrounds/landing-background.jpg b/apps/site/src/assets/backgrounds/landing-background.jpg
diff --git a/apps/site/src/components/Button/Button.module.css 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
@@ -0,0 +1,28 @@
+import styles from "./Button.module.css";
+
+interface ButtonProps {
+	text: string;
+	href?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, href }) => {
+	if (href) {
+		return (
+			<a
+				href={href}
+				target="_blank"
+				rel="noopener noreferrer"
+				className={styles.button + " font-body"}
+			>
+				{text}
+			</a>
+		);
+	}
+	return (
+		<button type="submit" className={styles.button + " font-body"}>
+			{text}
+		</button>
+	);
+};
+
+export default Button;
diff --git 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