Skip to content

Commit

Permalink
Merge pull request #138 from HackDavis/feat/landing-page
Browse files Browse the repository at this point in the history 
Feat/landing page
  • Loading branch information
@winzamark123
winzamark123 authored Oct 4, 2024
2 parents d2f3bec + 9b025b0 commit 958f52b
Show file tree
Hide file tree
Showing 15 changed files with 397 additions and 349 deletions.
53 changes: 38 additions & 15 deletions app/(pages)/(index-page)/_components/JudgingHub/HubHero.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,93 @@
.container {
width: 100%;
overflow: hidden;
background-color: var(--background-secondary);
background-color: #f2f2f7;
// background-color: var(--background-secondary);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--small-spacer);
position: relative;

.top_blurb {
position: absolute;
//position: absolute;
right: 0;
top: 0;
}

.top_left_blurb {
position: absolute;
//position: absolute;
left: 0;
top: 0;
}

.bottom_blurb {
position: absolute;
//position: absolute;
right: 0;
bottom: 0;
}

.welcome_text {
padding: 68px 13px 0px 13px;
padding: 50px 5% 0px 5%;
display: flex;
flex-direction: column;
gap: var(--tiny-spacer);
z-index: 1;

>p {
color: var(--text-light);
font-size: 1.5rem;
font-size: .8rem;
font-weight: 700;
}

.name_container {
width: 100%;

>h1 {
background: var(--gradient-primary);
background: #000;
padding-left: 5px;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

>p {

font-size: 1.6rem;
padding-top: 15px;
padding-left: 10px;
// text-shadow: 4px 4px 4px rgba(0,0,0,0.31);
}
}
}

.judgecontainer{

.judgingheroes {
//display: block;
z-index: 1;
height: auto;
align-items: center;
text-align: center;

/* background-color: gray;
display: flex;
width: 100%;
z-index: 1;
padding: 25%; */
}
}

.gavel_cow {
position: relative;
/* position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
z-index: 1;
.cow_container {
position: relative;
display: flex;
flex-direction: column-reverse;
width: 50%;
margin-right: -5%;
.cow {
height: auto;
Expand All @@ -79,18 +102,18 @@
left: 0;
margin-left: -5%;
}
}
} */

.blurb {
width: 45%;
display: flex;
flex-direction: column;
gap: var(--small-spacer);
padding: 11px;
position: absolute;
//position: absolute;
right: var(--small-spacer);
top: var(--small-spacer);
background-color: var(--background-light);
// background-color: var(--background-light);
border-radius: var(--b-radius);

.intro_text {
Expand Down
62 changes: 15 additions & 47 deletions app/(pages)/(index-page)/_components/JudgingHub/HubHero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
import JudgeInt from '@typeDefs/judges';
import styles from './HubHero.module.scss';

import Image from 'next/image';

import judgeCow from '/public/judges/hub/judge-cow.svg';
import judgeWig from '/public/judges/hub/judge-wig.svg';
import bg_topleft from '/public/judges/hub/topleft.svg';
import bg_top from '/public/judges/hub/topright.svg';
import bg_bottom from '/public/judges/hub/bottom.svg';
import judgeHeroes from '/public/judges/hub/judgingheroes.svg';

export default function HubHero({
user,
loading,
members,
}: {
user: JudgeInt;
loading: boolean;
Expand All @@ -22,58 +14,34 @@ export default function HubHero({
return 'loading...';
}

const speechBubbleTail = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.0712 8.81143C5.90657 7.95843 5.82036 7.07751 5.82036 6.17644V-0.0078125H19.644V20.0001C16.2965 20.0001 13.2268 18.8102 10.835 16.8303C8.44879 18.4199 4.62262 19.9309 0 19.0904C1.27323 18.5448 6.18426 15.2707 6.00237 8.7227C6.02438 8.75296 6.04733 8.78253 6.0712 8.81143Z"
fill="white"
/>
</svg>
);

return (
<div className={styles.container}>
<div className={styles.welcome_text}>
<p>Welcome to HackDavis,</p>
<div className={styles.name_container}>
<h1>{user.name}</h1>
<h1>Welcome!</h1>
<p>
We appreciate you for helping us judge one of California's biggest
hackathons!
</p>
</div>
</div>
<div className={styles.gavel_cow}>
<div className={styles.cow_container}>
<Image src={judgeCow} alt="Judge Cow" className={styles.cow} />
<Image src={judgeWig} alt="Judge Wig" className={styles.wig} />
<div className={styles.judgecontainer}>
<div className={styles.judgingheroes}>
<Image
src={judgeHeroes}
alt="Judging Animals"
className={styles.bottom_blurb}
/>
</div>
<div className={styles.blurb}>
<div className={styles.bubble_tail}>{speechBubbleTail}</div>
<p className={styles.intro_text}>You're paired with...</p>
{/* <p className={styles.intro_text}>You're paired with...</p>
{members.map((member: string, index: number) => (
<p key={index} className={styles.name}>
{member}
</p>
))}
))} */}
</div>
</div>
<Image
src={bg_bottom}
alt="bottom blurb"
className={styles.bottom_blurb}
/>
<Image src={bg_top} alt="top blurb" className={styles.top_blurb} />
<Image
src={bg_topleft}
alt="top left blurb"
className={styles.top_left_blurb}
priority
/>
</div>
);
}
8 changes: 3 additions & 5 deletions app/(pages)/(index-page)/_components/JudgingHub/JudgingHub.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { useAuth } from '@hooks/useAuth';

import styles from './JudgingHub.module.scss';
import HubHero from './HubHero';
import JudgingList from './JudgingList';
import TableLocations from './TableLocations';
import { useSubmissions } from '@hooks/useSubmissions';
import ViewProjects from './ViewProjects';
import { useJudgeGroup } from '@hooks/useJudgeGroup';

export default function JudgingHub() {
const { user, loading } = useAuth();
const { members } = useJudgeGroup();
const { unjudgedTeams } = useSubmissions();
return (
<div className={styles.container}>
<ViewProjects />
<HubHero user={user} loading={loading} members={members} />
<JudgingList projects={unjudgedTeams} />
{/* <JudgingList projects={unjudgedTeams} /> */}
<TableLocations />
</div>
);
Expand Down
27 changes: 23 additions & 4 deletions app/(pages)/(index-page)/_components/JudgingHub/JudgingList.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.container {
width: 100%;
padding: 27px 0px;
padding: 40px 0px;
display: flex;
flex-direction: column;
gap: 25px;
background-color: var(--background-tertiary);
background-color: #f2f2f7;

.top_text {
display: flex;
Expand All @@ -14,8 +13,28 @@
display: flex;
flex-direction: column;

span {
> h3 {
font-weight: 700;
font-size: 1.7rem;
text-align: center;
}

span {
font-weight: 600;
}

.options {
background-color: #f2f2f7;
text-align: center;

.box {
border-radius: 20px;
background-color: white;
padding: 5%;
margin: 15px;
font-size: 1.5rem;
box-shadow: 0px 4px 8px 4px rgba(195, 194, 194, 0.08);
}
}
}

Expand Down
33 changes: 7 additions & 26 deletions app/(pages)/(index-page)/_components/JudgingHub/JudgingList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,16 @@
import Link from 'next/link';
import styles from './JudgingList.module.scss';
import ProjectCarousel from './ProjectCarousel';

export default function JudgingList({ projects }: { projects: object[] }) {
export default function JudgingList() {
return (
<div className={styles.container}>
<div className={styles.top_text}>
<h3>Judging has begun!</h3>
<p>
You have <span>{projects.length}</span> team&#40;s&#41; left to judge:
</p>
<h3>While you're waiting, feel free to...</h3>
<div className={styles.options}>
<div className={styles.box}>🔋 Charge your phone!</div>
<div className={styles.box}>👋 Say hi to other judges!</div>
<div className={styles.box}>🍿 Grab a snack and water!</div>
</div>
</div>
<ProjectCarousel projects={projects} />
<Link href="/judges/projects" className={styles.projects_button}>
View All Projects
<svg
xmlns="http://www.w3.org/2000/svg"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
>
<path
d="M5.25156 11.2527L17.2516 11.2527M17.2516 11.2527L12.3104 7.25269M17.2516 11.2527L12.3104 15.2527"
stroke="#173A52"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Link>
</div>
);
}
Loading

0 comments on commit 958f52b

Please sign in to comment.