From 378694742a2408303942dee2cf170e8f67716bd7 Mon Sep 17 00:00:00 2001 From: Katelyn Nguyen Date: Sun, 21 Jan 2024 14:59:17 -0800 Subject: [PATCH 1/8] Day 1 --- .DS_Store | Bin 0 -> 6148 bytes frontend/public/Vector 15.svg | 3 + frontend/public/Vector 16.svg | 3 + .../src/app/components/HeaderBar.module.css | 291 ++++++++++++++++++ frontend/src/app/components/HeaderBar.tsx | 28 ++ frontend/src/app/page.module.css | 7 + frontend/src/app/page.tsx | 211 +++++++------ 7 files changed, 441 insertions(+), 102 deletions(-) create mode 100644 .DS_Store create mode 100644 frontend/public/Vector 15.svg create mode 100644 frontend/public/Vector 16.svg create mode 100644 frontend/src/app/components/HeaderBar.module.css create mode 100644 frontend/src/app/components/HeaderBar.tsx create mode 100644 frontend/src/app/page.module.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ecdf1dca27911e2853021d84e44c903473bcc444 GIT binary patch literal 6148 zcmeHKK}#z!5T0nCO_c{dD0mS9UW?W$*t7l^ zul^GMj?N^h)UKYMJVi1v`6ii}?B-*W*#H2m_kuNmA^>ny!rUx2ZwUEGGcsjH$jQ_k zZHOV*iR76dWuonXWxz7<)fk|?n+G2}ID<3zs4GuO(8@&n{qD6Nsptp) zItsfh_T9uwdfmF$`Axk;DI($|~z!#QRHxF8u z(N!#O)q4ZOGfK%%gCn>@V}gSlw-ZM)zCaIUaX5z#NIcz=H#xe;m~oCW@t@67b*)ws zm0z`gWGS<*37+z>3p=n4P1pw)nz|BV(K+NH=613^3fpUaF$6%@vJt$14 zBI;CTt{6pQj SBaWch9|1*!Z7c)-m4Rm#J-v(o literal 0 HcmV?d00001 diff --git a/frontend/public/Vector 15.svg b/frontend/public/Vector 15.svg new file mode 100644 index 00000000..9d9523fb --- /dev/null +++ b/frontend/public/Vector 15.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/public/Vector 16.svg b/frontend/public/Vector 16.svg new file mode 100644 index 00000000..181d6cda --- /dev/null +++ b/frontend/public/Vector 16.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/app/components/HeaderBar.module.css new file mode 100644 index 00000000..a248563c --- /dev/null +++ b/frontend/src/app/components/HeaderBar.module.css @@ -0,0 +1,291 @@ +/* Desktop */ + +/* Auto layout */ +.headerBar { + /* Auto layout */ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0px 96px; + gap: 10px; + + position: absolute; + width: 1440px; + height: 107px; + left: calc(50% - 1440px / 2); + top: 0px; + + background: #ffffff; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); +} + +/* Logo */ + +.logo { + margin: 0 auto; + width: 196px; + height: 69.54px; + + /* Inside auto layout */ + flex: none; + order: 0; + flex-grow: 0; +} + +/* 4 FUTURE LEADERS OF TOMORROW */ + +.subtitle { + position: absolute; + width: 194px; + height: 14px; + left: 0px; + top: 55.45px; + + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 300; + font-size: 10.6806px; + line-height: 14px; + /* identical to box height */ + letter-spacing: 0.03em; + + color: #000000; +} + +/* Vector 15 */ + +.vector15 { + position: absolute; + width: 22.44px; + height: 36.12px; + left: 23.73px; + top: 11.96px; + + background: #a0c7ef; + border: 1.26126px solid #0370bb; +} + +/* Vector 16 */ + +.vector16 { + position: absolute; + width: 27.59px; + height: 35.99px; + left: 15.48px; + top: 11.98px; + + background: #dfc5ff; + border: 1.26126px solid #743eb6; +} + +/* 4FLOT */ +.title { + position: absolute; + width: 143px; + height: 59px; + left: 53.74px; + top: 0px; + + font-family: "Roboto Slab"; + font-style: normal; + font-weight: 700; + font-size: 44.8812px; + line-height: 59px; + text-align: center; + letter-spacing: 0.01em; + + color: #743eb6; +} + +/* Frame 85 */ + +.frame85 { + /* Auto layout */ + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 48px; + + margin: 0 auto; + width: 541px; + height: 48px; + + /* Inside auto layout */ + flex: none; + order: 1; + flex-grow: 0; +} + +/* About Us */ +.aboutUs { + width: 75px; + height: 24px; + + /* Body/Normal (Bold) */ + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 150%; + /* identical to box height, or 24px */ + letter-spacing: 0.02em; + + color: #000000; + + /* Inside auto layout */ + flex: none; + order: 0; + flex-grow: 0; +} + +/* Get Involved */ + +.getInvolved { + width: 105px; + height: 24px; + + /* Body/Normal (Bold) */ + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 150%; + /* identical to box height, or 24px */ + letter-spacing: 0.02em; + + color: #000000; + + /* Inside auto layout */ + flex: none; + order: 1; + flex-grow: 0; +} + +/* Our Impact */ + +.ourImpact { + width: 94px; + height: 24px; + + /* Body/Normal (Bold) */ + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 150%; + /* identical to box height, or 24px */ + letter-spacing: 0.02em; + + color: #000000; + + /* Inside auto layout */ + flex: none; + order: 2; + flex-grow: 0; +} + +/* Button */ + +.button { + /* Auto layout */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0px; + gap: 10px; + + width: 123px; + height: 48px; + + /* Primary */ + background: #743eb6; + border-radius: 4px; + + /* Inside auto layout */ + flex: none; + order: 3; + flex-grow: 0; +} + +/* Opacity*/ + +/* Auto layout */ + +.opacity { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 12px 24px; + gap: 6px; + + width: 123px; + height: 48px; + + border-radius: 4px; + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 1; +} + +/* Icon Placeholder */ + +/* .iconPlaceholder{ +display: none; +width: 24px; +height: 24px; */ + +/* Inside auto layout */ +/* flex: none; +order: 0; +flex-grow: 0; +} */ + +/* Button */ + +.innerButton { + width: 75px; + height: 30px; +} + +/* Body/Medium (Bold) */ +.buttonBody { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 150%; + + /* identical to box height, or 30px */ + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.02em; + + /* Neutral/White */ + color: #ffffff; + + /* Inside auto layout */ + flex: none; + order: 1; + flex-grow: 0; +} + +/* Icon Placeholder */ + +/* display: none; +width: 24px; +height: 24px; */ + +/* Inside auto layout */ +/* flex: none; +order: 2; +flex-grow: 0; +*/ diff --git a/frontend/src/app/components/HeaderBar.tsx b/frontend/src/app/components/HeaderBar.tsx new file mode 100644 index 00000000..b62aeda1 --- /dev/null +++ b/frontend/src/app/components/HeaderBar.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +import styles from "./HeaderBar.module.css"; + +export const HeaderBar = () => { + return ( +
+
+ Left Hand + Right Hand + 4FLOT + 4 FUTURE LEADERS OF TOMORROW +
+
+ About Us + Get Involved + Our Impact +
+
+ +
+
+
+
+ ); +}; diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css new file mode 100644 index 00000000..42450630 --- /dev/null +++ b/frontend/src/app/page.module.css @@ -0,0 +1,7 @@ +.page { + width: 1440px; + height: 2152px; + top: -18860px; + left: 94213px; + background: #f9f9f9; +} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 992bc443..6feb1dd6 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,113 +1,120 @@ import Image from "next/image"; +import { HeaderBar } from "./components/HeaderBar"; +import styles from "./page.module.css"; + export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

- -
+
+ +
+ //
+ // + //
+ //

+ // Get started by editing  + // src/app/page.tsx + //

+ // + //
-
- Next.js Logo -
+ //
+ // Next.js Logo + //
-
+ // + //

+ // Deploy{" "} + // + // -> + // + //

+ //

+ // Instantly deploy your Next.js site to a shareable URL with Vercel. + //

+ // + // + //
); } From a5db7681692fc202f55a3223b129550ae65a84fd Mon Sep 17 00:00:00 2001 From: Katelyn Nguyen Date: Sun, 28 Jan 2024 13:17:03 -0800 Subject: [PATCH 2/8] Logo --- .DS_Store | Bin 6148 -> 8196 bytes backend/.DS_Store | Bin 0 -> 6148 bytes frontend/public/Color=Default.svg | 6 ++++ frontend/public/Vector 15.svg | 3 -- frontend/public/Vector 16.svg | 3 -- .../src/app/components/HeaderBar.module.css | 26 ------------------ frontend/src/app/components/HeaderBar.tsx | 5 +--- 7 files changed, 7 insertions(+), 36 deletions(-) create mode 100644 backend/.DS_Store create mode 100644 frontend/public/Color=Default.svg delete mode 100644 frontend/public/Vector 15.svg delete mode 100644 frontend/public/Vector 16.svg diff --git a/.DS_Store b/.DS_Store index ecdf1dca27911e2853021d84e44c903473bcc444..7ff256835d8a2464ea73a5f86a61a14e25bbdcea 100644 GIT binary patch literal 8196 zcmeHMO=uHA6n@jB&4#KCVj&)c1yK=VO@9cMUeYuH3-yPt=s~5;Cb13O?1W@vlu`_M z(~BqZ>RC{G6GRU}&w>X}UcGq}51#bRPt)0Kwg`esoPn7)JMX=jH{Ulqli2_O$+gOp z07(EaFf*AL#iCDQdX@ueNVb?L3HpPxHffb;tsbz{4H^NBfJQ(gpb^jr{3{6Hnaz?B za_$SQE;Rxgf&UT#wm+DdnaoPr5t45mSnw+V$|yGTg!Kfgpfsh-O4$(-HJFHSMJZf~ zykZdHj_szj%Szc1Qn&+=mk%OGCh~?t_~_Wb$<2Xeh18`+KqC-Dz{I8~Ou!mc!SmhU z$KJEw1zlZ@=JU2gZEQ21E^WX4@_c9BuP^VbudgfL1`fYOSBUM73+vDV+c!Eyz6UMT z7~UMcbNZ8rp{Ji3-HRmL$`=pc-e3gdVUaXp1Md2xVc$pmdNr2RiTHa0Z`BPz2W>)BRKX*{bn9{<>3;e1-O{#`-Jv{e##WqJ6bmX|E)XEKt`gR^3X2J5XvCcM_X>W$$c%M zFycmhC6V0RoS90e%*^!ER?6I*W%Zfq%+^-i7(ae?Zh2+Hsk!t4j~j?Qg5aQd?v@XO zvr-uwPPdCe3zetH=htITw)r~hK}TgL+)CwS4aUv8ME5c-X6N7#WCkh+0s(Fy;R-TlW8!z_$^0^&AVV3LAQph^ LWY`?fGlv-fwgnav diff --git a/backend/.DS_Store b/backend/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..3356df5afafab8d3225acb3948212acc46290de9 GIT binary patch literal 6148 zcmeHKy-ve05dI7WRfUQ&l?5phGYH-wRApf10f45Z{G_CUmN`2wfP}=#h}c! zV~BXdTRW5iW#G3lAbWQa=XTe2klnu>T<*q6)QXc9eRx2aH{!;-6x4qzUeav(Im*G^)6&i3^Y+*N?Qi+_k4I~ne|=$UETfM@L^z}EqJwpwR*C)I zz$q@-KF?PUSy8_7e1@X9hq1U>X1_p`&u&(ydu3S!7R1ZPXF02{T@5Ptmb1^%5kr%s zSw4VGCPftkt}BwdafB0cQc#b%9$TqItNc|4cxQ{07aXcp29yD1;FAG49|Edi=rMI@ zj}9991R$2!ZG~-lOGr%MG4z-^ + + + + + diff --git a/frontend/public/Vector 15.svg b/frontend/public/Vector 15.svg deleted file mode 100644 index 9d9523fb..00000000 --- a/frontend/public/Vector 15.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/public/Vector 16.svg b/frontend/public/Vector 16.svg deleted file mode 100644 index 181d6cda..00000000 --- a/frontend/public/Vector 16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/app/components/HeaderBar.module.css index a248563c..a456dcf8 100644 --- a/frontend/src/app/components/HeaderBar.module.css +++ b/frontend/src/app/components/HeaderBar.module.css @@ -53,32 +53,6 @@ color: #000000; } -/* Vector 15 */ - -.vector15 { - position: absolute; - width: 22.44px; - height: 36.12px; - left: 23.73px; - top: 11.96px; - - background: #a0c7ef; - border: 1.26126px solid #0370bb; -} - -/* Vector 16 */ - -.vector16 { - position: absolute; - width: 27.59px; - height: 35.99px; - left: 15.48px; - top: 11.98px; - - background: #dfc5ff; - border: 1.26126px solid #743eb6; -} - /* 4FLOT */ .title { position: absolute; diff --git a/frontend/src/app/components/HeaderBar.tsx b/frontend/src/app/components/HeaderBar.tsx index b62aeda1..9c6336db 100644 --- a/frontend/src/app/components/HeaderBar.tsx +++ b/frontend/src/app/components/HeaderBar.tsx @@ -6,10 +6,7 @@ export const HeaderBar = () => { return (
- Left Hand - Right Hand - 4FLOT - 4 FUTURE LEADERS OF TOMORROW + Default Logo
About Us From 0c924959b13b773d1f99248ba657862855882425 Mon Sep 17 00:00:00 2001 From: Katelyn Nguyen Date: Sun, 28 Jan 2024 13:46:48 -0800 Subject: [PATCH 3/8] Formatting from Left --- .../src/app/components/HeaderBar.module.css | 83 ++++++------------- 1 file changed, 25 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/app/components/HeaderBar.module.css index a456dcf8..a6d2e6db 100644 --- a/frontend/src/app/components/HeaderBar.module.css +++ b/frontend/src/app/components/HeaderBar.module.css @@ -13,7 +13,7 @@ position: absolute; width: 1440px; height: 107px; - left: calc(50% - 1440px / 2); + /* left: calc(50% - 1440px / 2); */ top: 0px; background: #ffffff; @@ -23,59 +23,22 @@ /* Logo */ .logo { - margin: 0 auto; + /* margin: 0 auto; */ width: 196px; height: 69.54px; - /* Inside auto layout */ - flex: none; - order: 0; - flex-grow: 0; -} - -/* 4 FUTURE LEADERS OF TOMORROW */ - -.subtitle { position: absolute; - width: 194px; - height: 14px; - left: 0px; - top: 55.45px; - - font-family: "Roboto Slab"; - font-style: normal; - font-weight: 300; - font-size: 10.6806px; - line-height: 14px; - /* identical to box height */ - letter-spacing: 0.03em; - - color: #000000; -} - -/* 4FLOT */ -.title { - position: absolute; - width: 143px; - height: 59px; - left: 53.74px; - top: 0px; - - font-family: "Roboto Slab"; - font-style: normal; - font-weight: 700; - font-size: 44.8812px; - line-height: 59px; - text-align: center; - letter-spacing: 0.01em; + left: 47px; - color: #743eb6; + /* Inside auto layout */ + /* flex: none; + order: 0; + flex-grow: 0; */ } /* Frame 85 */ .frame85 { - /* Auto layout */ display: flex; flex-direction: row; justify-content: flex-end; @@ -87,10 +50,9 @@ width: 541px; height: 48px; - /* Inside auto layout */ - flex: none; + /* flex: none; order: 1; - flex-grow: 0; + flex-grow: 0; */ } /* About Us */ @@ -110,9 +72,9 @@ color: #000000; /* Inside auto layout */ - flex: none; + /* flex: none; order: 0; - flex-grow: 0; + flex-grow: 0; */ } /* Get Involved */ @@ -133,9 +95,9 @@ color: #000000; /* Inside auto layout */ - flex: none; + /* flex: none; order: 1; - flex-grow: 0; + flex-grow: 0; */ } /* Our Impact */ @@ -156,9 +118,9 @@ color: #000000; /* Inside auto layout */ - flex: none; + /* flex: none; order: 2; - flex-grow: 0; + flex-grow: 0; */ } /* Button */ @@ -172,17 +134,22 @@ padding: 0px; gap: 10px; - width: 123px; - height: 48px; + /* width: Hug (123px); + height: Fixed (48px); + border-radius: 4px; + gap: 10px; */ + + /* width: 123px; + height: 48px; */ /* Primary */ - background: #743eb6; + background: #694c97; border-radius: 4px; /* Inside auto layout */ - flex: none; + /* flex: none; order: 3; - flex-grow: 0; + flex-grow: 0; */ } /* Opacity*/ From 4471330e4479d2745971e81fc9311960eb131169 Mon Sep 17 00:00:00 2001 From: Katelyn Nguyen Date: Sun, 28 Jan 2024 14:25:50 -0800 Subject: [PATCH 4/8] Dropdown menus --- .../src/app/components/HeaderBar.module.css | 218 ++++++++++-------- frontend/src/app/components/HeaderBar.tsx | 32 ++- 2 files changed, 156 insertions(+), 94 deletions(-) diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/app/components/HeaderBar.module.css index a6d2e6db..5783eb74 100644 --- a/frontend/src/app/components/HeaderBar.module.css +++ b/frontend/src/app/components/HeaderBar.module.css @@ -44,15 +44,11 @@ justify-content: flex-end; align-items: center; padding: 0px; - gap: 48px; + gap: 50px; - margin: 0 auto; + margin-left: 705px; width: 541px; height: 48px; - - /* flex: none; - order: 1; - flex-grow: 0; */ } /* About Us */ @@ -61,20 +57,20 @@ height: 24px; /* Body/Normal (Bold) */ - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; - font-weight: 700; + font-weight: 700; /* Adjusted to 700 as per the provided specifications */ font-size: 16px; - line-height: 150%; - /* identical to box height, or 24px */ - letter-spacing: 0.02em; + line-height: 24px; /* Adjusted to match the provided line height */ + letter-spacing: 0.03em; + text-decoration: none; color: #000000; /* Inside auto layout */ - /* flex: none; + flex: none; order: 0; - flex-grow: 0; */ + flex-grow: 0; } /* Get Involved */ @@ -84,20 +80,19 @@ height: 24px; /* Body/Normal (Bold) */ - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; font-size: 16px; - line-height: 150%; - /* identical to box height, or 24px */ - letter-spacing: 0.02em; + line-height: 24px; /* Adjusted to match the provided line height */ + letter-spacing: 0.03em; color: #000000; /* Inside auto layout */ - /* flex: none; + flex: none; order: 1; - flex-grow: 0; */ + flex-grow: 0; } /* Our Impact */ @@ -107,50 +102,24 @@ height: 24px; /* Body/Normal (Bold) */ - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; font-size: 16px; - line-height: 150%; - /* identical to box height, or 24px */ - letter-spacing: 0.02em; + line-height: 24px; /* Adjusted to match the provided line height */ + letter-spacing: 0.03em; color: #000000; /* Inside auto layout */ - /* flex: none; + flex: none; order: 2; - flex-grow: 0; */ + flex-grow: 0; } /* Button */ -.button { - /* Auto layout */ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0px; - gap: 10px; - - /* width: Hug (123px); - height: Fixed (48px); - border-radius: 4px; - gap: 10px; */ - - /* width: 123px; - height: 48px; */ - - /* Primary */ - background: #694c97; - border-radius: 4px; - - /* Inside auto layout */ - /* flex: none; - order: 3; - flex-grow: 0; */ -} +/* Button */ /* Opacity*/ @@ -168,32 +137,19 @@ height: 48px; border-radius: 4px; - - /* Inside auto layout */ - flex: none; - order: 0; - align-self: stretch; - flex-grow: 1; } -/* Icon Placeholder */ - -/* .iconPlaceholder{ -display: none; -width: 24px; -height: 24px; */ - -/* Inside auto layout */ -/* flex: none; -order: 0; -flex-grow: 0; -} */ - /* Button */ -.innerButton { - width: 75px; - height: 30px; +.button { + /* Auto layout */ + padding: 0px; + gap: 10px; + + /* Primary */ + background: #694c97; + border-radius: 4px; + order: 3; /* Adjust the order as needed */ } /* Body/Medium (Bold) */ @@ -205,28 +161,110 @@ flex-grow: 0; line-height: 150%; /* identical to box height, or 30px */ - display: flex; - align-items: center; - text-align: center; - letter-spacing: 0.02em; + letter-spacing: 0.04em; /* Neutral/White */ color: #ffffff; +} - /* Inside auto layout */ - flex: none; - order: 1; - flex-grow: 0; +/* Dropdown styles about us */ +.aboutUsDropdown { + display: none; + position: absolute; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + width: 156px; /* Set your preferred width */ + max-height: 163px; /* Set your preferred max height */ + overflow-y: auto; /* Enable vertical scroll if content exceeds max height */ +} + +.aboutUs:hover { + color: #743eb6; /* Set your preferred hover color */ +} + +.aboutUs:hover .aboutUsDropdown { + display: block; +} + +.aboutUsDropdown a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: "Open Sans", sans-serif; + font-size: 16px; + font-weight: 300; +} + +.aboutUsDropdown a:hover { + background-color: #f1f1f1; +} + +/* Dropdown styles getinvolved */ +.getInvolvedDropdown { + display: none; + position: absolute; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + width: 202px; /* Set your preferred width */ + max-height: 104px; /* Set your preferred max height */ + overflow-y: auto; /* Enable vertical scroll if content exceeds max height */ +} + +.getInvolved:hover { + color: #743eb6; /* Set your preferred hover color */ +} + +.getInvolved:hover .getInvolvedDropdown { + display: block; +} + +.getInvolvedDropdown a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: "Open Sans", sans-serif; + font-size: 16px; + font-weight: 300; +} + +.getInvolvedDropdown a:hover { + background-color: #f1f1f1; +} + +/* Dropdown styles our impact */ +.ourImpactDropdown { + display: none; + position: absolute; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + width: 167px; /* Set your preferred width */ + max-height: 104px; /* Set your preferred max height */ + overflow-y: auto; /* Enable vertical scroll if content exceeds max height */ } -/* Icon Placeholder */ +.ourImpact:hover { + color: #743eb6; /* Set your preferred hover color */ +} + +.ourImpact:hover .ourImpactDropdown { + display: block; +} -/* display: none; -width: 24px; -height: 24px; */ +.ourImpactDropdown a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: "Open Sans", sans-serif; + font-size: 16px; + font-weight: 300; +} -/* Inside auto layout */ -/* flex: none; -order: 2; -flex-grow: 0; -*/ +.ourImpactDropdown a:hover { + background-color: #f1f1f1; +} diff --git a/frontend/src/app/components/HeaderBar.tsx b/frontend/src/app/components/HeaderBar.tsx index 9c6336db..fd6bab3d 100644 --- a/frontend/src/app/components/HeaderBar.tsx +++ b/frontend/src/app/components/HeaderBar.tsx @@ -1,5 +1,4 @@ import React from "react"; - import styles from "./HeaderBar.module.css"; export const HeaderBar = () => { @@ -9,9 +8,34 @@ export const HeaderBar = () => { Default Logo
- About Us - Get Involved - Our Impact + {/* Use the dropdown styles for "About Us" */} +
+ About Us + +
+ + {/* Use the dropdown styles for "get Involved" */} +
+ Get Involved + +
+ + {/* Use the dropdown styles for "Our Impact" */} +
+ Our Impact + +
+
{/* Use the dropdown styles for "About Us" */} -
+
About Us
Our Mission @@ -19,7 +19,7 @@ export const HeaderBar = () => {
{/* Use the dropdown styles for "get Involved" */} -
+
Get Involved
Upcoming Events @@ -28,7 +28,7 @@ export const HeaderBar = () => {
{/* Use the dropdown styles for "Our Impact" */} -
+
Our Impact
Testimonials @@ -38,7 +38,7 @@ export const HeaderBar = () => {
-
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css deleted file mode 100644 index 42450630..00000000 --- a/frontend/src/app/page.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.page { - width: 1440px; - height: 2152px; - top: -18860px; - left: 94213px; - background: #f9f9f9; -} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 6feb1dd6..5a0574a5 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,120 +1,116 @@ import Image from "next/image"; import { HeaderBar } from "./components/HeaderBar"; -import styles from "./page.module.css"; export default function Home() { return ( -
+
-
- //
- // - //
- //

- // Get started by editing  - // src/app/page.tsx - //

- // - //
+
+

+ Get started by editing  + src/app/page.tsx +

+ +
- //
- // Next.js Logo - //
+
+ Next.js Logo +
- //
+ +

+ Deploy{" "} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+ ); } From d0711de12f1a999991823bb496bef05b66b7acd5 Mon Sep 17 00:00:00 2001 From: katelynpdn <94756838+katelynpdn@users.noreply.github.com> Date: Mon, 5 Feb 2024 18:01:59 -0800 Subject: [PATCH 6/8] Fix dropdown menus --- .../src/app/components/HeaderBar.module.css | 79 +++++++------------ frontend/src/app/components/HeaderBar.tsx | 11 ++- 2 files changed, 33 insertions(+), 57 deletions(-) diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/app/components/HeaderBar.module.css index 6df962a0..a945c3b3 100644 --- a/frontend/src/app/components/HeaderBar.module.css +++ b/frontend/src/app/components/HeaderBar.module.css @@ -1,8 +1,4 @@ -/* Desktop */ - -/* Auto layout */ .headerBar { - /* Auto layout */ display: flex; flex-direction: row; justify-content: space-between; @@ -10,24 +6,22 @@ padding: 0px 96px; gap: 10px; - position: absolute; - width: 100%; + position: relative; + top: -100px; + width: 120%; height: 107px; - top: 0px; background: #ffffff; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); } /* Logo */ - .logo { - /* margin: 0 auto; */ width: 196px; height: 69.54px; position: absolute; - left: 47px; + left: 64px; /* Inside auto layout */ flex: none; @@ -35,9 +29,8 @@ flex-grow: 0; } -/* Frame 85 */ - -.frame85 { +/* Container for About Us, Get Involved, Our Impact, and Donate*/ +.txtContainer { display: flex; flex-direction: row; justify-content: flex-end; @@ -46,7 +39,7 @@ gap: 48px; position: absolute; - right: 96px; + right: 128px; width: 541px; height: 48px; @@ -60,22 +53,21 @@ /* Body/Normal (Bold) */ font-family: "Open Sans", sans-serif; font-style: normal; - font-weight: 700; /* Adjusted to 700 as per the provided specifications */ + font-weight: 700; font-size: 16px; - line-height: 24px; /* Adjusted to match the provided line height */ + line-height: 24px; letter-spacing: 0.03em; text-decoration: none; - color: #000000; - /* Inside auto layout */ flex: none; order: 0; flex-grow: 0; + padding-bottom: 100px; + margin-bottom: -75px; } /* Get Involved */ - .getInvolved { width: 105px; height: 24px; @@ -85,19 +77,18 @@ font-style: normal; font-weight: 700; font-size: 16px; - line-height: 24px; /* Adjusted to match the provided line height */ + line-height: 24px; letter-spacing: 0.03em; - color: #000000; - /* Inside auto layout */ flex: none; order: 1; flex-grow: 0; + padding-bottom: 100px; + margin-bottom: -75px; } /* Our Impact */ - .ourImpact { width: 94px; height: 24px; @@ -107,46 +98,32 @@ font-style: normal; font-weight: 700; font-size: 16px; - line-height: 24px; /* Adjusted to match the provided line height */ + line-height: 24px; letter-spacing: 0.03em; - color: #000000; - /* Inside auto layout */ flex: none; order: 2; flex-grow: 0; + padding-bottom: 100px; + margin-bottom: -75px; } -/* Opacity*/ - -/* Auto layout */ - -.opacity { +/* Button */ +.button { display: flex; flex-direction: row; justify-content: center; align-items: center; - padding: 12px 24px 8px; - gap: 6px; - - width: 123px; - height: 48px; - - border-radius: 4px; -} - -/* Button */ - -.button { - /* Auto layout */ - padding: 0px; - gap: 10px; /* Primary */ background: #694c97; border-radius: 4px; - order: 3; /* Adjust the order as needed */ + padding: 12px 24px 8px; + gap: 6px; + width: 123px; + height: 48px; + order: 3; } /* Body/Medium (Bold) */ @@ -155,8 +132,8 @@ font-style: normal; font-weight: 550; font-size: 20px; - line-height: 30px; /* Adjusted to match the provided line height */ - letter-spacing: 1px; /* Adjusted to 2% of 20px */ + line-height: 30px; + letter-spacing: 1px; /* Center align text */ text-align: center; @@ -165,7 +142,7 @@ color: #ffffff; } -/* Dropdown styles about us */ +/* Dropdown styles for About Us */ .aboutUsDropdown { display: none; position: absolute; @@ -238,7 +215,7 @@ background-color: #f1f1f1; } -/* Dropdown styles our impact */ +/* Dropdown styles Our Impact */ .ourImpactDropdown { display: none; position: absolute; diff --git a/frontend/src/app/components/HeaderBar.tsx b/frontend/src/app/components/HeaderBar.tsx index a2fdae56..339eac97 100644 --- a/frontend/src/app/components/HeaderBar.tsx +++ b/frontend/src/app/components/HeaderBar.tsx @@ -1,4 +1,5 @@ import React from "react"; + import styles from "./HeaderBar.module.css"; export const HeaderBar = () => { @@ -7,7 +8,7 @@ export const HeaderBar = () => {
Default Logo
-
+
{/* Use the dropdown styles for "About Us" */}
About Us @@ -37,11 +38,9 @@ export const HeaderBar = () => {
-
- -
+
From 79d4910d1e5315b1d9da7242f7aad2cf37aefe87 Mon Sep 17 00:00:00 2001 From: jennymar Date: Sun, 11 Feb 2024 18:16:56 -0800 Subject: [PATCH 7/8] Added nav bar to layout.tsx --- frontend/src/app/layout.tsx | 6 +++++- frontend/src/app/page.tsx | 3 --- frontend/src/{app => }/components/HeaderBar.module.css | 3 +-- frontend/src/{app => }/components/HeaderBar.tsx | 0 4 files changed, 6 insertions(+), 6 deletions(-) rename frontend/src/{app => }/components/HeaderBar.module.css (99%) rename frontend/src/{app => }/components/HeaderBar.tsx (100%) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index a748bec4..55388f37 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -2,6 +2,7 @@ import { Inter } from "next/font/google"; import type { Metadata } from "next"; import "./globals.css"; +import { HeaderBar } from "@/components/HeaderBar"; const inter = Inter({ subsets: ["latin"] }); @@ -13,7 +14,10 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + + + {children} + ); } diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 5a0574a5..e9b420bd 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,11 +1,8 @@ import Image from "next/image"; -import { HeaderBar } from "./components/HeaderBar"; - export default function Home() { return (
-

Get started by editing  diff --git a/frontend/src/app/components/HeaderBar.module.css b/frontend/src/components/HeaderBar.module.css similarity index 99% rename from frontend/src/app/components/HeaderBar.module.css rename to frontend/src/components/HeaderBar.module.css index a945c3b3..ef3d6d34 100644 --- a/frontend/src/app/components/HeaderBar.module.css +++ b/frontend/src/components/HeaderBar.module.css @@ -7,8 +7,7 @@ gap: 10px; position: relative; - top: -100px; - width: 120%; + width: 100%; height: 107px; background: #ffffff; diff --git a/frontend/src/app/components/HeaderBar.tsx b/frontend/src/components/HeaderBar.tsx similarity index 100% rename from frontend/src/app/components/HeaderBar.tsx rename to frontend/src/components/HeaderBar.tsx From 523d04f0b9116cf003919eb26a493e4711d29a20 Mon Sep 17 00:00:00 2001 From: jennymar Date: Sun, 11 Feb 2024 18:23:55 -0800 Subject: [PATCH 8/8] Fixed internal tag to tags --- frontend/src/app/layout.tsx | 1 + frontend/src/components/HeaderBar.tsx | 15 ++++++++------- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 55388f37..23cc6b34 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,6 +1,7 @@ import { Inter } from "next/font/google"; import type { Metadata } from "next"; + import "./globals.css"; import { HeaderBar } from "@/components/HeaderBar"; diff --git a/frontend/src/components/HeaderBar.tsx b/frontend/src/components/HeaderBar.tsx index 339eac97..b54937c4 100644 --- a/frontend/src/components/HeaderBar.tsx +++ b/frontend/src/components/HeaderBar.tsx @@ -1,3 +1,4 @@ +import Link from "next/link"; import React from "react"; import styles from "./HeaderBar.module.css"; @@ -13,9 +14,9 @@ export const HeaderBar = () => {

About Us
- Our Mission - Our Team - Contact + Our Mission + Our Team + Contact
@@ -23,8 +24,8 @@ export const HeaderBar = () => {
Get Involved
- Upcoming Events - Donate + Upcoming Events + Donate
@@ -32,8 +33,8 @@ export const HeaderBar = () => {
Our Impact
- Testimonials - Newsletter + Testimonials + Newsletter