shing/formatting #2
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-icon": "^1.1.4",
|
||||
"motion": "^11.15.0",
|
||||
"next": "^15.1.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.4.0",
|
||||
"tailwindcss": "^3.4.16"
|
||||
},
|
||||
"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";
|
||||
---
|
||||
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div class="flex justify-between items-center mx-6">
|
||||
<div class="flex min-h-[1rem] max-h-[3rem]">
|
||||
<Image
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
width={300}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
<div class="md:w-full w-fit fixed z-10">
|
||||
<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]">
|
||||
<a
|
||||
href="/"
|
||||
class="hover:opacity-60 duration-300 hidden md:flex"
|
||||
>
|
||||
<Image
|
||||
class="w-[15vw]"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden xl:flex gap-6">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase font-bold text-xl px-2 py-2 rounded-[3rem] transition-colors duration-200
|
||||
${
|
||||
page.name === "Online Store"
|
||||
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
||||
: "text-white border-white hover:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{page.name}
|
||||
</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>
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-3/5 md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw]
|
||||
${
|
||||
page.name === "Online Store"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
}`}
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div
|
||||
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) => (
|
||||
<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`}
|
||||
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 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 inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-lg" />
|
||||
<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">
|
||||
{title}
|
||||
</h3>
|
||||
|
|
@ -34,12 +34,12 @@ const { width = "100%" } = Astro.props;
|
|||
</p>
|
||||
</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"
|
||||
>
|
||||
<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"
|
||||
viewBox="0 0 24 24"
|
||||
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>
|
||||
</head>
|
||||
|
||||
<body class="bg-bg_primary relative">
|
||||
<body class="bg-ieee-black relative flex flex-col items-center">
|
||||
<Navbar />
|
||||
<div
|
||||
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">
|
||||
<main class="w-[95%]">
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import SplitCards from "../components/main_page/SplitCards.astro";
|
||||
import Landing from "../components/main_page/Landing.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<SplitCards />
|
||||
<Landing />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -3,30 +3,18 @@ export default {
|
|||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
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: {
|
||||
ieee_online_store_bg: "#f3c135",
|
||||
ieee_blue: "#00629b",
|
||||
ieee_gold_text: "#ffbc00",
|
||||
|
||||
// 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",
|
||||
ieee: {
|
||||
yellow: "#F3C135",
|
||||
black: "#0A0E1A",
|
||||
"blue-100": "#88BFEC",
|
||||
},
|
||||
|
||||
// Project Page Card colors
|
||||
project_card_bg: "#0d1324",
|
||||
project_card_text: "#FFFFFF",
|
||||
project_card_gradient: "#000000",
|
||||
project_button_bg: "#FFFFFF",
|
||||
project_button_color: "#000000",
|
||||
},
|
||||
backgroundImage: {
|
||||
"gradient-radial":
|
||||
|
|
|
|||
Loading…
Reference in a new issue