Merge pull request 'shing/formatting' (#2) from shing/formatting into main
Reviewed-on: Webmaster/dev-ieeeucsd-org#2
This commit is contained in:
commit
84e5976541
11 changed files with 7669 additions and 133 deletions
7535
package-lock.json
generated
Normal file
7535
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -20,8 +20,10 @@
|
||||||
"astro-expressive-code": "^0.38.3",
|
"astro-expressive-code": "^0.38.3",
|
||||||
"astro-icon": "^1.1.4",
|
"astro-icon": "^1.1.4",
|
||||||
"motion": "^11.15.0",
|
"motion": "^11.15.0",
|
||||||
|
"next": "^15.1.2",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
"react-icons": "^5.4.0",
|
||||||
"tailwindcss": "^3.4.16"
|
"tailwindcss": "^3.4.16"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
BIN
public/landing.png
Normal file
BIN
public/landing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
|
|
@ -4,81 +4,79 @@ import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg
|
||||||
import pages from "../../data/pages.json";
|
import pages from "../../data/pages.json";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="flex items-center">
|
<div class="md:w-full w-fit fixed z-10">
|
||||||
<div
|
<div class="flex justify-between items-center bg-black/40 m-[1%] py-[0.8%] px-[1.5%] md:rounded-full md:border-[0.1vw]">
|
||||||
class="flex flex-col border-white-500 shadow-md shadow-ieee_blue bg-nav_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
|
<a
|
||||||
>
|
href="/"
|
||||||
<div class="flex justify-between items-center mx-6">
|
class="hover:opacity-60 duration-300 hidden md:flex"
|
||||||
<div class="flex min-h-[1rem] max-h-[3rem]">
|
>
|
||||||
<Image
|
<Image
|
||||||
src={whiteLogoHorizontal}
|
class="w-[15vw]"
|
||||||
alt="IEEE UCSD Logo"
|
src={whiteLogoHorizontal}
|
||||||
width={300}
|
alt="IEEE UCSD Logo"
|
||||||
height={300}
|
/>
|
||||||
/>
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Desktop Navigation -->
|
<!-- Desktop Navigation -->
|
||||||
<div class="hidden xl:flex gap-6">
|
<div class="hidden md:flex md:w-3/5 md:justify-between">
|
||||||
{
|
{
|
||||||
pages.map((page) => (
|
pages.map((page) => (
|
||||||
<a
|
<a
|
||||||
href={page.path}
|
href={page.path}
|
||||||
class={`uppercase font-bold text-xl px-2 py-2 rounded-[3rem] transition-colors duration-200
|
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw]
|
||||||
${
|
${
|
||||||
page.name === "Online Store"
|
page.name === "Online Store"
|
||||||
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||||
: "text-white border-white hover:text-gray-300"
|
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{page.name}
|
{page.name}
|
||||||
</a>
|
</a>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Hamburger/Close Button -->
|
|
||||||
<button
|
|
||||||
id="menu-btn"
|
|
||||||
class="xl:hidden text-white p-2 focus:outline-none relative z-[60] scale-150"
|
|
||||||
aria-label="Toggle menu"
|
|
||||||
>
|
|
||||||
<!-- Hamburger Icon -->
|
|
||||||
<svg
|
|
||||||
class="w-6 h-6 menu-icon"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M4 6h16M4 12h16M4 18h16"></path>
|
|
||||||
</svg>
|
|
||||||
<!-- Close Icon -->
|
|
||||||
<svg
|
|
||||||
class="w-6 h-6 close-icon hidden"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M6 18L18 6M6 6l12 12"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Hamburger/Close Button -->
|
||||||
|
<button
|
||||||
|
id="menu-btn"
|
||||||
|
class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
<!-- Hamburger Icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 menu-icon"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
|
</svg>
|
||||||
|
<!-- Close Icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 close-icon hidden"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Menu -->
|
<!-- Mobile Menu -->
|
||||||
<div
|
<div
|
||||||
id="mobile-menu"
|
id="mobile-menu"
|
||||||
class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
|
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center justify-center h-full space-y-6">
|
<div class="flex flex-col items-center h-[70vh] justify-evenly bg-black">
|
||||||
{
|
{
|
||||||
pages.map((page) => (
|
pages.map((page) => (
|
||||||
<a
|
<a
|
||||||
|
|
|
||||||
34
src/components/main_page/Landing.astro
Normal file
34
src/components/main_page/Landing.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
---
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { landing } from "../../data/landing";
|
||||||
|
import landingimg from "../../../public/landing.png"
|
||||||
|
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="w-full flex justify-between pt-[12vh]">
|
||||||
|
<div class=" pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[85vh] border-white/70 border-[0.1vw] rounded-[3vw]">
|
||||||
|
<p class=" text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">UC San Diego IEEE</p>
|
||||||
|
<p class="font-bold text-[2.8vw] text-white mb-[10%]">Join one of the largest IEEE student branch in the US!</p>
|
||||||
|
<p class="text-white font-light text-[1.3vw]">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
|
||||||
|
|
||||||
|
<div class="flex justify-end w-full mt-[15vh]">
|
||||||
|
<div class="text-white text-[2.5vw] w-1/2 flex justify-between">
|
||||||
|
<Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
|
||||||
|
<FaDiscord />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
|
||||||
|
<FaFacebook />
|
||||||
|
</Link>
|
||||||
|
<Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
|
||||||
|
<FaInstagram />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="w-[46%] h-[85vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black">
|
||||||
|
<Image src={landingimg} alt="circuit"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<div class="w-[100%] mx-auto py-8">
|
|
||||||
<div class="grid lg:grid-cols-2 gap-2 h-[40rem]">
|
|
||||||
<div
|
|
||||||
class="bg-card_bg rounded-[3rem] relative overflow-hidden text-center lg:text-left lg:px-12"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-card_gradient/10 to-transparent"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="px-6 pt-24 lg:pt-32 relative z-10 text-ieee_gold_text font-bold text-[min(4vw,1.5rem)]"
|
|
||||||
>
|
|
||||||
UC San Diego IEEE
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="px-6 pt-2 relative z-10 text-card_text font-bold text-[min(6vw,2.5rem)]"
|
|
||||||
>
|
|
||||||
Join the 2nd largest IEEE student branch in the US!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="px-6 pt-2 relative z-10 text-card_text text-[min(3vw,1.2rem)]"
|
|
||||||
>
|
|
||||||
Sint occaecat laboris do cupidatat cillum laborum sint et sint
|
|
||||||
velit fugiat. Velit do et irure laboris cillum adipisicing.
|
|
||||||
Nulla dolor esse ea do laboris aliquip ullamco.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-card_bg rounded-[3rem]">
|
|
||||||
<div class="p-6">2</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -24,8 +24,8 @@ const { width = "100%" } = Astro.props;
|
||||||
alt={`${title} Project`}
|
alt={`${title} Project`}
|
||||||
class="w-full h-full object-cover rounded-lg transition-transform duration-500 ease-in-out md:group-hover:scale-110"
|
class="w-full h-full object-cover rounded-lg transition-transform duration-500 ease-in-out md:group-hover:scale-110"
|
||||||
/>
|
/>
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-project_card_gradient/60 rounded-lg" />
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-lg" />
|
||||||
<div class="absolute bottom-0 left-0 p-6 text-project_card_text z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
|
<div class="absolute bottom-0 left-0 p-6 text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
|
||||||
<h3 class="text-xl font-bold mb-2 transition-transform duration-300">
|
<h3 class="text-xl font-bold mb-2 transition-transform duration-300">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -34,12 +34,12 @@ const { width = "100%" } = Astro.props;
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="absolute bottom-2 right-2 bg-project_button_bg rounded-full p-2 shadow
|
class="absolute bottom-2 right-2 bg-white rounded-full p-2 shadow
|
||||||
md:opacity-0 md:[.expanded_&]:opacity-100 transition-opacity duration-300"
|
md:opacity-0 md:[.expanded_&]:opacity-100 transition-opacity duration-300"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="h-6 w-6 text-project_button_color"
|
class="h-6 w-6 text-black"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
|
|
||||||
16
src/data/landing.js
Normal file
16
src/data/landing.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
|
||||||
|
|
||||||
|
export const landing = [
|
||||||
|
{
|
||||||
|
"icon": <FaDiscord />,
|
||||||
|
"link": "https://discord.gg/XxfjqZSjca"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": <FaFacebook />,
|
||||||
|
"link": "https://www.facebook.com/ieeeucsd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": <FaInstagram />,
|
||||||
|
"link": "https://www.instagram.com/ieee.ucsd"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
@ -12,13 +12,9 @@ import Navbar from "../components/core/Navbar.astro";
|
||||||
<title>Astro Basics</title>
|
<title>Astro Basics</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-bg_primary relative">
|
<body class="bg-ieee-black relative flex flex-col items-center">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div
|
<main class="w-[95%]">
|
||||||
class="fixed top-0 left-0 w-full h-full bg-gradient-radial from-top_gradient/80 to-transparent pointer-events-none z-[-10]"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<main class="w-[98%] mx-auto">
|
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import SplitCards from "../components/main_page/SplitCards.astro";
|
import Landing from "../components/main_page/Landing.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<SplitCards />
|
<Landing />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -3,30 +3,18 @@ export default {
|
||||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
boxShadow: {
|
||||||
|
'glow': '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
ieee_online_store_bg: "#f3c135",
|
ieee: {
|
||||||
ieee_blue: "#00629b",
|
yellow: "#F3C135",
|
||||||
ieee_gold_text: "#ffbc00",
|
black: "#0A0E1A",
|
||||||
|
"blue-100": "#88BFEC",
|
||||||
// Navigation colors
|
},
|
||||||
nav_bg: "#090d19",
|
|
||||||
nav_text: "#eaf7ff",
|
|
||||||
|
|
||||||
// Layout colors
|
|
||||||
bg_primary: "#0a0e1b",
|
|
||||||
top_gradient: "#1c284e",
|
|
||||||
|
|
||||||
// Main Page Card colors
|
|
||||||
card_bg: "#0d1324",
|
|
||||||
card_text: "#eaf7ff",
|
|
||||||
card_gradient: "#FFFFFF",
|
|
||||||
|
|
||||||
// Project Page Card colors
|
// Project Page Card colors
|
||||||
project_card_bg: "#0d1324",
|
project_card_bg: "#0d1324",
|
||||||
project_card_text: "#FFFFFF",
|
|
||||||
project_card_gradient: "#000000",
|
|
||||||
project_button_bg: "#FFFFFF",
|
|
||||||
project_button_color: "#000000",
|
|
||||||
},
|
},
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
"gradient-radial":
|
"gradient-radial":
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue