- (null);
+
+ const handleEscapePress = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ setOpenModal(false);
+ }
+ },
+ [setOpenModal]
+ );
+
+ useEffect(() => {
+ const applyContainer = applyRef.current;
+
+ if (applyContainer && openModal) {
+ applyContainer.addEventListener('keydown', handleEscapePress);
+ }
+
+ return () => {
+ if (applyContainer) {
+ applyContainer.removeEventListener('keydown', handleEscapePress);
+ }
+ };
+ }, [applyRef, handleEscapePress, openModal]);
-export default function Apply() {
return (
-
-
+
);
}
diff --git a/src/app/pages/Apply/apply-info.ts b/src/app/pages/Apply/apply-info.ts
new file mode 100644
index 0000000..6a69462
--- /dev/null
+++ b/src/app/pages/Apply/apply-info.ts
@@ -0,0 +1,26 @@
+export const applyInfo = [
+ {
+ id: 'apply-0',
+ header: 'Solve Meaningful Problems',
+ content:
+ 'Bring your visions to reality, design with intention, problem-solve and overcome obstacles, and work to create lasting change for a larger community!'
+ },
+ {
+ id: 'apply-1',
+ header: 'UP-Grade your resume + portfolio',
+ content:
+ 'Gain real-world experience through a fully developed project and stand out from other student designers with a personal story about your involvement in the project process!'
+ },
+ {
+ id: 'apply-2',
+ header: 'Put skills to real-world use',
+ content:
+ 'Bring your knowledge of technical and soft skills (and all things design process related) to active and practical use, further refining your skills along the way!'
+ },
+ {
+ id: 'apply-3',
+ header: 'Network with peers & professionals',
+ content:
+ 'Collaborate with leaders in local nonprofit organizations, connect with tech industry professionals, and get to know project mentors!'
+ }
+];
diff --git a/src/app/pages/FAQ/FAQ.scss b/src/app/pages/FAQ/FAQ.scss
index 8f342c7..e3532b9 100644
--- a/src/app/pages/FAQ/FAQ.scss
+++ b/src/app/pages/FAQ/FAQ.scss
@@ -1,2 +1,79 @@
#faq {
+ $mobile-apricot-lower-breakpoint: 720px;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ h2 {
+ margin-bottom: $main-padding-mobile-block;
+ }
+
+ #apricot-container,
+ .apricot.mobile {
+ display: none;
+ z-index: 0;
+ }
+
+ @media (min-width: $mobile-breakpoint) {
+ overflow: hidden;
+ h2 {
+ margin-bottom: calc($main-padding-mobile-block);
+ }
+ }
+
+ @media ($mobile-apricot-lower-breakpoint < width < $tablet-breakpoint) {
+ .apricot.mobile {
+ display: block;
+ position: absolute;
+ width: 30%;
+ height: auto;
+ }
+
+ #apricot-1 {
+ top: 20%;
+ left: -20%;
+ transform: rotate(20deg);
+ }
+
+ #apricot-2 {
+ bottom: 20%;
+ right: -15%;
+ transform: rotate(-30deg);
+ }
+ }
+
+ @media (min-width: $desktop-breakpoint) {
+ h2 {
+ margin-bottom: calc($main-padding-mobile-block - 24px);
+ }
+
+ #apricot-container {
+ display: flex;
+ position: absolute;
+ align-items: baseline;
+ justify-content: center;
+ gap: 10%;
+ bottom: -5%;
+ width: calc(100% - 2 * $main-padding-desktop-inline);
+
+ .apricot {
+ transform: rotate(-10deg);
+
+ &#apricot-3 {
+ height: 15%;
+ width: 15%;
+ }
+
+ &#apricot-4 {
+ height: 20%;
+ width: 20%;
+ }
+
+ &#apricot-5 {
+ height: 25%;
+ width: 25%;
+ }
+ }
+ }
+ }
}
diff --git a/src/app/pages/FAQ/FAQ.tsx b/src/app/pages/FAQ/FAQ.tsx
index 67cea5f..ed43635 100644
--- a/src/app/pages/FAQ/FAQ.tsx
+++ b/src/app/pages/FAQ/FAQ.tsx
@@ -1,10 +1,60 @@
import './FAQ.scss';
+import MyAccordion from '@/components/MyAccordion/MyAccordion';
+import { FAQContent } from './constants';
+import Image from 'next/image';
+import Apricot from '@/assets/images/Apricot.webp';
+import { PageRef } from '@/page';
+import Sustainability from '@/assets/stickers/sustainability.svg';
+import Melon from '@/assets/stickers/melon.svg';
+import Orange from '@/assets/stickers/orange.svg';
+import Sticker from '@/components/Sticker/Sticker';
-export default function FAQ() {
+type FAQProps = {
+ faqRef: PageRef;
+};
+
+export default function FAQ({ faqRef }: FAQProps) {
return (
-
+
+
);
}
diff --git a/src/app/pages/FAQ/constants.ts b/src/app/pages/FAQ/constants.ts
new file mode 100644
index 0000000..9115faa
--- /dev/null
+++ b/src/app/pages/FAQ/constants.ts
@@ -0,0 +1,49 @@
+export const FAQContent = [
+ {
+ id: 'item-1',
+ header: 'Who is eligible to participate in UP-Grade?',
+ content:
+ 'Eligibility is offered to all UCSD students and recent graduates — of various backgrounds, experience levels, and majors! We encourage anyone interested to apply, to learn, and offer their unique knowledge.'
+ },
+ {
+ id: 'item-2',
+ header: 'What is the time commitment?',
+ content: 'UP-Grade requires a 12-15 hour commitment per week, for 10 weeks.'
+ },
+ {
+ id: 'item-3',
+ header: 'How many people will be accepted?',
+ content:
+ 'UP-Grade will have 7 student teams, with 6 participants in each team — 42 participants total.'
+ },
+ {
+ id: 'item-4',
+ header: 'How will UP-Graders be selected?',
+ content:
+ 'We will be reviewing all the applications holistically and accepting students based on application responses, an interview process, past experience, and a desire to make an impact! (Interviews will take place a week after applications are closed).'
+ },
+ {
+ id: 'item-5',
+ header: 'Who will my mentors be?',
+ content:
+ 'All UP-Grade participants will work closely with industry professionals, gaining valuable mentorship and insight. More information about mentors will be released in the coming week(s).'
+ },
+ {
+ id: 'item-6',
+ header: 'Can I request teammates?',
+ content:
+ 'Yes! We cannot guarantee you will be placed with everyone you request, but we will take this into consideration when organizing teams.'
+ },
+ {
+ id: 'item-7',
+ header: 'What roles are available?',
+ content:
+ 'Each team in Up-Grade may be comprised of a Web Builder/Developer, UX Designer, UX Researcher, Visual Designer, and Marketing + Content Strategist. Roles are flexible depending on the number of people working on the project, the deliverables, and the level of difficulty.'
+ },
+ {
+ id: 'item-8',
+ header: 'When is the application due?',
+ content:
+ 'Sunday, June 9 at 11:59PM PT. Decisions will be sent out around a week after the application deadline.'
+ }
+];
diff --git a/src/app/pages/Landing/Landing.tsx b/src/app/pages/Landing/Landing.tsx
index 508767b..2bcb661 100644
--- a/src/app/pages/Landing/Landing.tsx
+++ b/src/app/pages/Landing/Landing.tsx
@@ -1,15 +1,29 @@
+import Sticker from '@/components/Sticker/Sticker';
import './Landing.scss';
import Fruits from '@/components/Fruits/Fruits';
+import { PageRef } from '@/page';
+import DcoSticker from '@/assets/stickers/dco-sticker.svg';
+import Impact from '@/assets/stickers/impact.svg';
-export default function Landing() {
+type LandingProps = {
+ landingRef: PageRef;
+};
+
+export default function Landing({ landingRef }: LandingProps) {
return (
-
-
+
+
+
);
}
diff --git a/src/app/pages/Overview/constants.ts b/src/app/pages/Overview/constants.ts
new file mode 100644
index 0000000..e6fcffd
--- /dev/null
+++ b/src/app/pages/Overview/constants.ts
@@ -0,0 +1,26 @@
+export const PAST_PROJECTS = [
+ {
+ name: 'UP-Grade 2023',
+ link: 'https://upgrade23.ucsddesign.co/'
+ },
+ {
+ name: 'Build-Up 2022',
+ link: 'https://buildup.ucsddesign.co/'
+ },
+ {
+ name: 'Power-Up 2021',
+ link: 'https://powerup.ucsddesign.co/'
+ },
+ {
+ name: 'Level-Up 2020',
+ link: 'https://levelup.ucsddesign.co/'
+ }
+];
+
+export const EXPECTATIONS_LIST = [
+ { id: 'expectation-item-1', text: 'Network with industry professionals' },
+ { id: 'expectation-item-2', text: 'Work alongside nonprofits' },
+ { id: 'expectation-item-3', text: 'Mentor-led workshops' },
+ { id: 'expectation-item-4', text: 'Weekly team meetings' },
+ { id: 'expectation-item-5', text: 'And more!' }
+];
diff --git a/src/app/pages/Themes/Themes.scss b/src/app/pages/Themes/Themes.scss
index d7adcb8..797bc1e 100644
--- a/src/app/pages/Themes/Themes.scss
+++ b/src/app/pages/Themes/Themes.scss
@@ -1,2 +1,53 @@
#themes {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ padding-top: 0;
+ overflow: hidden;
+
+ @media (min-width: $tablet-breakpoint) {
+ padding-top: $main-padding-mobile-block;
+ }
+
+ h2 {
+ margin-bottom: 2rem;
+
+ @media (min-width: $tablet-breakpoint) {
+ margin-bottom: 0;
+ }
+ }
+
+ .title-line {
+ display: none;
+ border: 1px solid #bababa;
+ margin-block: 1rem;
+
+ @media (min-width: $tablet-breakpoint) {
+ display: block;
+ margin-block: 2rem;
+ }
+ }
+
+ .pomegranate-container {
+ position: absolute;
+ // bottom: calc(-15% - 5vw);
+ bottom: 0;
+ right: -100px;
+ z-index: 1;
+ height: fit-content;
+ width: calc(160px + 8vw);
+
+ .pomegranate {
+ transform: rotate(-20deg);
+ object-fit: contain;
+ width: 100%;
+ height: fit-content;
+ }
+
+ @media (min-width: $tablet-breakpoint) {
+ right: auto;
+ bottom: max(calc(-75px - 6.5vw), -200px);
+ left: 150px;
+ }
+ }
}
diff --git a/src/app/pages/Themes/Themes.tsx b/src/app/pages/Themes/Themes.tsx
index 50c4e59..07499b6 100644
--- a/src/app/pages/Themes/Themes.tsx
+++ b/src/app/pages/Themes/Themes.tsx
@@ -1,10 +1,41 @@
import './Themes.scss';
+import ThemesSlider from '@/components/ThemesSlider/ThemesSlider';
+import { ThemesContent } from './constants';
+import pomegranateImg from '@/assets/images/pomegranate.webp';
+import Image from 'next/image';
+import { PageRef } from '@/page';
+import Sticker from '@/components/Sticker/Sticker';
+import Capybara from '@/assets/stickers/capybara.svg';
+import Rooting from '@/assets/stickers/rooting.svg';
+import Figjam from '@/assets/stickers/figjam.svg';
-export default function Themes() {
+type ThemesProps = {
+ themesRef: PageRef;
+};
+
+export default function Themes({ themesRef }: ThemesProps) {
return (
-
+
+
+
);
}
diff --git a/src/app/pages/Themes/constants.ts b/src/app/pages/Themes/constants.ts
new file mode 100644
index 0000000..4d4d09d
--- /dev/null
+++ b/src/app/pages/Themes/constants.ts
@@ -0,0 +1,54 @@
+export const ThemesContent = [
+ {
+ theme: 'Sustainability',
+ themeColor: '#9BFF76',
+ description:
+ 'Sustainability nonprofits here in San Diego are dedicated to fostering a more just world, empowering people to take care of our planet through public policy, education, and outreach. Their work is vital in mobilizing local communities to drive greater environmental change.',
+ nonProfits: [
+ {
+ text: 'MPA Collaborative Network',
+ link: 'https://www.mpacollaborative.org/'
+ },
+ {
+ text: 'SanDiego360',
+ link: 'https://sandiego350.org/'
+ }
+ ]
+ },
+ {
+ theme: 'Community',
+ themeColor: '#92E9FF',
+ description:
+ 'Community-focused nonprofit organizations here in San Diego tackle basic needs insecurities, like food, housing, and healthcare crises through accessible medical support, healthy meals, and services that aid the search for affordable housing. With remarkable resilience and innovation, these groups foster significant, empathetic change in their local communities.',
+ nonProfits: [
+ {
+ text: 'HandsOn San Diego',
+ link: 'https://www.handsonsandiego.org/'
+ },
+ {
+ text: 'SAY San Diego',
+ link: 'https://sdmilitaryfamily.org'
+ },
+ {
+ text: 'Vietnamese American Youth Alliance',
+ link: 'https://www.sdtet.com/'
+ }
+ ]
+ },
+ {
+ theme: 'Education',
+ themeColor: '#FFA0DC',
+ description:
+ 'Nonprofit organizations here in San Diego thrive on their commitment to accessible education. From mentoring/tutoring services to outdoor recreational courses, these groups provide learning opportunities regardless of age, socio-economic status, and other barriers! They work hard to provide opportunities for local youth to develop the skills and knowledge they need to succeed.',
+ nonProfits: [
+ {
+ text: 'The League of Amazing Programmers',
+ link: 'https://www.jointheleague.org/'
+ },
+ {
+ text: 'Triton Consulting Group',
+ link: 'https://www.ucsdtcg.org/'
+ }
+ ]
+ }
+];
diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
index f7b8b7b..744f54f 100644
--- a/src/app/styles/global.scss
+++ b/src/app/styles/global.scss
@@ -63,6 +63,7 @@ h3 {
}
p {
+ line-height: 1.4;
font-size: $p-size;
letter-spacing: 0.01rem;
font-family: $p-font, Arial, sans-serif;
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
index d69157e..2fcad92 100644
--- a/src/app/styles/variables.scss
+++ b/src/app/styles/variables.scss
@@ -2,6 +2,7 @@
$primary-black: #212121;
$primary-white: #fcfcfc;
$secondary-yellow: #f5ff85;
+$outline-gray: #bababa;
// Font Families
$p-font: var(--font-aspekta);
@@ -11,19 +12,21 @@ $subheading-font: var(--font-uncutsans-medium);
// Breakpoints
$mobile-breakpoint: 550px;
$tablet-breakpoint: 979px;
+$desktop-breakpoint: 1367px;
+$testimonial-height-breakpoint: 800px;
// Sizes
$nav-width: clamp(250px, 200px + 11vw, 470px);
// Spacing
$main-padding-mobile-block: clamp(20px, 30px + 1.2vw, 40px);
-$main-padding-mobile-inline: clamp(20px, 12px + 1.2vw, 40px);
-$main-padding-desktop-block: clamp(50px, 25px + 1.8vw, 80px);
-$main-padding-desktop-inline: clamp(50px, 25px + 1.8vw, 80px);
+$main-padding-mobile-inline: clamp(20px, 12px + 5vw, 40px);
+$main-padding-desktop-block: clamp(40px, 22px + 1.7vw, 70px);
+$main-padding-desktop-inline: clamp(40px, 22px + 1.7vw, 70px);
//Font Sizes
$h1-size: clamp(26px, calc(24px + 0.46vw), 40px);
$h2-size: clamp(30px, calc(27px + 0.52vw), 44px);
-$h3-size: clamp(18px, calc(15px + 0.32vw), 24px);
+$h3-size: clamp(18px, calc(16px + 0.32vw), 22px);
$p-size: clamp(14px, calc(12px + 0.25vw), 20px);
$footer-font-size: clamp(12px, 2.8vw, $p-size);
+
);
diff --git a/src/app/pages/Apply/Apply.scss b/src/app/pages/Apply/Apply.scss
index 9bea10e..f42e496 100644
--- a/src/app/pages/Apply/Apply.scss
+++ b/src/app/pages/Apply/Apply.scss
@@ -1,4 +1,71 @@
#apply {
position: relative;
width: 100%;
+ overflow-x: hidden;
+ height: fit-content;
+
+ @media (min-width: $tablet-breakpoint) {
+ height: 100vh;
+ }
+
+ @media (min-width: $tablet-breakpoint) {
+ display: flex;
+ flex-direction: column;
+ overflow-y: hidden;
+ }
+
+ h2 {
+ margin-bottom: 0;
+ }
+
+ h3 {
+ text-transform: uppercase;
+ }
+
+ hr {
+ border: 1px solid lightgray;
+ display: none;
+ margin-block: 1rem;
+
+ @media (min-width: $tablet-breakpoint) {
+ display: block;
+ }
+
+ @media (min-width: $desktop-breakpoint) and (min-height: $testimonial-height-breakpoint) {
+ margin-block: 2rem;
+ }
+ }
+
+ .grid {
+ list-style-type: none;
+ padding-left: 0;
+ display: grid;
+ gap: 1.5rem;
+ padding-block: 0;
+ margin-block: 1.5rem;
+
+ @media (min-width: 766px) {
+ grid-template-columns: repeat(2, 1fr);
+ // gap: 2.5rem;
+ gap: clamp(1.5rem, calc(10px + 1vw), 2.5rem);
+ }
+
+ li {
+ h3 {
+ margin-bottom: 0.5rem;
+ }
+ }
+ }
+
+ .top-section {
+ position: relative;
+ }
+
+ .bottom-section {
+ height: 100%;
+ overflow-y: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
}
diff --git a/src/app/pages/Apply/Apply.tsx b/src/app/pages/Apply/Apply.tsx
index fed31f5..4d7b643 100644
--- a/src/app/pages/Apply/Apply.tsx
+++ b/src/app/pages/Apply/Apply.tsx
@@ -1,12 +1,86 @@
+'use client';
+
import Footer from '@/components/Footer/Footer';
+import 'keen-slider/keen-slider.min.css';
import './Apply.scss';
+import { applyInfo } from './apply-info';
+import Testimonial from '@/components/Testimonial/Testimonial';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import TestimonialModal from '@/components/TestimonialModal/TestimonialModal';
+import Grape from '@/assets/stickers/grape.svg';
+import Yuzu from '@/assets/stickers/yuzu.svg';
+import Sticker from '@/components/Sticker/Sticker';
+import { PageRef } from '@/page';
+
+type ApplyProps = {
+ applyRef: PageRef;
+};
+
+export default function Apply({ applyRef }: ApplyProps) {
+ const [openModal, setOpenModal] = useState(false);
+ const topOffsetRef = useRef.05 / Apply
-Why Apply?
- +
+
+
+
+
+
+ .05 / Apply
+Why Apply?
++
-
+ {applyInfo.map(item => (
+
-
+
{item.header}
+{item.content}
+
+ ))}
+
+
+
+ .04 / FAQ
-Commonly Asked Questions
+Frequently Asked Questions
+
+
-
+ up-grade 2024
-UCSD Design Co
-San Diego, CA
-june 1st to august 13th
-.01 / Home
.02 / OVERVIEW
What is UP-Grade?
-- UP-Grade is a 10-week online summer program where students will get the - opportunity to work closely alongside a local, nonprofit organization to - amplify and boost their exposure. -
-{`CHECK OUT OUR PAST COHORT'S COMPLETED PROJECTS`}
+
+
+
+
+
+ + UP-Grade is a 10-week summer internship-style program where + students will get the opportunity to work alongside a local, + nonprofit organization to elevate their branding and boost their + exposure within the community. +
+
+
+
+
+
+
+ .03 / Themes
-{`What are this year's UP-Grade themes?`}
+{`Get a Taste Of Our Fresh Themes.`}
++
+