Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Setup basic landing page #5

Merged
merged 5 commits into from
Nov 5, 2023
Merged

Setup basic landing page #5

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee572c1
feat: favicon
samderanova Nov 5, 2023
12cb5a3
feat: landing page
samderanova Nov 5, 2023
32dad9a
feat: button hover transition
samderanova Nov 5, 2023
9cf447c
refactor: font weight, button component props
samderanova Nov 5, 2023
d2c1b32
fix: switch background to JPG, other semantic fixes
samderanova Nov 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -28,6 +29,7 @@
"eslint": "^8",
"eslint-config-next": "13.5.6",
"postcss": "^8",
"postcss-nesting": "^12.0.1",
"tailwindcss": "^3",
"typescript": "^5"
}
Expand Down
11 changes: 6 additions & 5 deletions apps/site/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
plugins: {
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
},
};
4 changes: 3 additions & 1 deletion apps/site/src/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />;
}
16 changes: 16 additions & 0 deletions apps/site/src/app/(home)/sections/Landing/Landing.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.landingSection {
background-image: url("~@/assets/backgrounds/landing-background.png");
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;
}
20 changes: 20 additions & 0 deletions apps/site/src/app/(home)/sections/Landing/Landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
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-28</p>
samderanova marked this conversation as resolved.
Show resolved Hide resolved
<Button
text="Stay updated"
href="https://uci.us13.list-manage.com/subscribe?u=5976872928cd5681fbaca89f6&id=93333e11eb"
isLink
/>
</div>
</section>
);
};

export default Landing;
1 change: 1 addition & 0 deletions apps/site/src/app/(home)/sections/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Landing } from "./Landing/Landing";
Binary file modified apps/site/src/app/favicon.ico
100644 → 100755
View file
Open in desktop
Binary file not shown.
37 changes: 20 additions & 17 deletions apps/site/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
samderanova marked this conversation as resolved.
Show resolved Hide resolved
}

@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: bold;
samderanova marked this conversation as resolved.
Show resolved Hide resolved
}

p {
font-size: calc(15px + 1.5vw);
margin-bottom: 1rem;
}

a {
font-size: calc(13px + 1vw);
font-weight: bold;
}
5 changes: 1 addition & 4 deletions apps/site/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -17,7 +14,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body>{children}</body>
</html>
);
}
Binary file added apps/site/src/assets/backgrounds/landing-background.png
View file
Open in desktop
samderanova marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions apps/site/src/components/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}
31 changes: 31 additions & 0 deletions apps/site/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import styles from "./Button.module.css";

interface ButtonProps {
text: string;
href?: string;
isLink: boolean;
}

const Button: React.FC<ButtonProps> = ({ text, href, isLink }) => {
if (isLink) {
samderanova marked this conversation as resolved.
Show resolved Hide resolved
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className={styles.button + " font-body"}
>
{text}
</a>
);
}
return (
<input
type="submit"
samderanova marked this conversation as resolved.
Show resolved Hide resolved
className={styles.button + " font-body"}
value={text}
/>
);
};

export default Button;
40 changes: 22 additions & 18 deletions apps/site/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 31 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading