add social component
This commit is contained in:
Shing Hung
parent
7589b29cee
commit
aa55dc5e09
13 changed files with 120 additions and 10 deletions
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
Development version of the IEEE UC San Diego student branch website.
|
||||
|
||||
## Figma Design
|
||||
- [IEEE UCSD Website Design](https://www.figma.com/design/AihoR936yUmYrMoCZJ0LF7/UCSD-IEEE?node-id=0-1&t=ajK9lKroQFJbokFS-1)
|
||||
## Getting Started
|
||||
|
||||
Prerequisites:
|
||||
|
|
|
|||
BIN
public/evan.png
Normal file
BIN
public/evan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
BIN
public/event.png
Normal file
BIN
public/event.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
23
src/components/core/Footer.astro
Normal file
23
src/components/core/Footer.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Link from "next/link";
|
||||
import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg";
|
||||
import { IoHeart } from "react-icons/io5";
|
||||
---
|
||||
<div class="w-full py-[2%] flex justify-center">
|
||||
<div class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between">
|
||||
<Link href="/" className="hover:opacity-70 duration-300">
|
||||
<Image
|
||||
class="w-[15vw]"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
</Link>
|
||||
<div class="flex items-center">
|
||||
<p class="text-white text-[1.2vw]">
|
||||
made by IEEE UCSD webmasters with
|
||||
</p>
|
||||
<IoHeart className=" text-ieee-blue-100 ml-[1vw] text-[1.5vw]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@ import pages from "../../data/pages.json";
|
|||
---
|
||||
|
||||
<div class="md:w-full w-fit fixed z-10">
|
||||
<div class="flex justify-between items-center bg-black/40 my-[1%] mx-[2.5%] py-[0.8%] px-[1.5%] md:rounded-full md:border-[0.1vw]">
|
||||
<div class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]">
|
||||
<a
|
||||
href="/"
|
||||
class="hover:opacity-60 duration-300 hidden md:flex"
|
||||
|
|
@ -18,7 +18,7 @@ import pages from "../../data/pages.json";
|
|||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-3/5 md:justify-between">
|
||||
<div class="hidden md:flex md:w-[55%] md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
|
|
|
|||
49
src/components/core/Social.astro
Normal file
49
src/components/core/Social.astro
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
import { Image } from "astro:assets";
|
||||
import evan from "../../../public/evan.png"
|
||||
import { FaDiscord, FaFacebook} from "react-icons/fa";
|
||||
import { RiInstagramFill } from "react-icons/ri";
|
||||
import Link from "next/link";
|
||||
---
|
||||
|
||||
|
||||
<div class="text-white flex flex-row md:flex-col items-center h-[65vh] justify-between">
|
||||
<div class="flex items-center text-[2.5vw]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
Social Media
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
|
||||
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f
|
||||
</p>
|
||||
|
||||
<div class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90">
|
||||
<div class="w-2/5 flex justify-evenly ml-[5%]">
|
||||
<Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="flex flex-col items-center">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
|
||||
<FaDiscord />
|
||||
</div>
|
||||
<p class="text-[1.3vw] font-semibold">Discord</p>
|
||||
</Link>
|
||||
|
||||
<Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="flex flex-col items-center">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
|
||||
<FaFacebook />
|
||||
</div>
|
||||
<p class="text-[1.3vw] font-semibold">Facebook</p>
|
||||
</Link>
|
||||
|
||||
<Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="flex flex-col items-center">
|
||||
<div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100">
|
||||
<RiInstagramFill />
|
||||
</div>
|
||||
<p class="text-[1.3vw] font-semibold">Instagram</p>
|
||||
</Link>
|
||||
</div>
|
||||
<Image src={evan} alt="cat placeholder" class="absolute -bottom-[10vh] w-[25vw] right-0"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
24
src/components/join/JoinTitle.astro
Normal file
24
src/components/join/JoinTitle.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
import Link from "next/link";
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="pt-[14vh] text-white w-full flex justify-center mb-[20vh]">
|
||||
<div class="w-3/4 h-[40vh] flex justify-between flex-col">
|
||||
<div class="flex items-center text-[3vw] pl-[5%] pt-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
Join Us
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-[1.25vw]">
|
||||
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
|
||||
</p>
|
||||
<div class="flex justify-end">
|
||||
<Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
|
||||
JOIN
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,8 @@ 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";
|
||||
import { FaDiscord, FaFacebook} from "react-icons/fa";
|
||||
import { RiInstagramFill } from "react-icons/ri";
|
||||
---
|
||||
|
||||
<div class="w-full flex justify-between pt-[14vh]">
|
||||
|
|
@ -12,7 +13,7 @@ import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
|
|||
<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-[13vh]">
|
||||
<div class="flex justify-end w-full mt-[8vh]">
|
||||
<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 />
|
||||
|
|
@ -22,7 +23,7 @@ import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
|
|||
<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 />
|
||||
<RiInstagramFill />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
[
|
||||
{
|
||||
"name": "About",
|
||||
"path": "/about"
|
||||
},
|
||||
{
|
||||
"name": "Join",
|
||||
"path": "/join"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import Navbar from "../components/core/Navbar.astro";
|
||||
import Footer from "../components/core/Footer.astro";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
@ -12,11 +13,12 @@ import Navbar from "../components/core/Navbar.astro";
|
|||
<title>Astro Basics</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-ieee-black relative flex flex-col items-center">
|
||||
<body class="bg-ieee-black relative flex flex-col items-center min-h-screen justify-between">
|
||||
<Navbar />
|
||||
<main class="w-[95%]">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
import Layout from "../layouts/Layout.astro";
|
||||
import Landing from "../components/main_page/Landing.astro";
|
||||
import Divider from "../components/main_page/divider.astro";
|
||||
import Social from "../components/core/Social.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Landing />
|
||||
<Divider />
|
||||
<Social />
|
||||
</Layout>
|
||||
|
|
|
|||
10
src/pages/join.astro
Normal file
10
src/pages/join.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Social from "../components/core/Social.astro";
|
||||
import JoinTitle from "../components/join/JoinTitle.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<JoinTitle/>
|
||||
<Social/>
|
||||
</Layout>
|
||||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
yellow: "#F3C135",
|
||||
black: "#0A0E1A",
|
||||
"blue-100": "#88BFEC",
|
||||
"blue-300": "#233363",
|
||||
},
|
||||
|
||||
// Project Page Card colors
|
||||
|
|
|
|||
Loading…
Reference in a new issue