Skip to content

Commit d2827ab

Browse files
samholmessamholmes
authored
Merge pull request #33 from DEVxNetwork/sam/design
Sam/design
2 parents d13b06e + 717ca60 commit d2827ab

30 files changed

+2008
-389
lines changed

‎.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["next/babel"],
3+
"plugins": [["styled-components", { "ssr": true, "displayName": true }]]
4+
}

‎app/StyledComponentsRegistry.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// lib/registry.tsx
2+
"use client"
3+
4+
import React, { useState } from "react"
5+
import { useServerInsertedHTML } from "next/navigation"
6+
import { ServerStyleSheet, StyleSheetManager } from "styled-components"
7+
8+
export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
9+
// Only create stylesheet once with lazy initial state
10+
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
11+
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
12+
13+
useServerInsertedHTML(() => {
14+
const styles = styledComponentsStyleSheet.getStyleElement()
15+
// Reset stylesheet for next server render
16+
styledComponentsStyleSheet.instance.clearTag()
17+
return <>{styles}</>
18+
})
19+
20+
if (typeof window !== "undefined") {
21+
// Client-side only
22+
return <>{children}</>
23+
}
24+
25+
return (
26+
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>
27+
)
28+
}

‎app/about/OrganizerCard.tsx

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎app/about/page.tsx

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎app/components/Footer.tsx

Lines changed: 136 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,142 @@
1+
"use client"
12
import { links } from "../siteConfig"
3+
import styled from "styled-components"
4+
import { GiveATalkCTA } from "./GiveATalkCTA"
25

3-
const Footer = () => {
6+
export const Footer = () => {
47
return (
5-
<footer className="footer flex items-center p-4 justify-between text-neutral-content p-4">
6-
<aside className="flex items-center devx-logo-copyright">
7-
<p className="flex items-center">
8-
© Copyright {new Date().getFullYear()}. All rights reserved
9-
</p>
10-
</aside>
11-
<nav className="flex grid-flow-col gap-4 md:place-self-center md:justify-self-end">
12-
<a href={links.linkedInUrl} aria-label="LinkedIn" className="mr-4" target="_blank">
13-
<svg
14-
xmlns="http://www.w3.org/2000/svg"
15-
width="24"
16-
height="24"
17-
viewBox="0 0 50 50"
18-
className="fill-current"
19-
>
20-
<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z" />
21-
</svg>
22-
</a>
23-
24-
<a href={links.youtube} aria-label="Youtube" className="mr-4" target="_blank">
25-
<svg
26-
xmlns="http://www.w3.org/2000/svg"
27-
width="24"
28-
height="24"
29-
viewBox="0 0 24 24"
30-
className="fill-current"
31-
>
32-
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
33-
</svg>
34-
</a>
35-
36-
<a href={links.lumaUrl} aria-label="Luma" className="mr-4" target="_blank">
37-
<svg
38-
xmlns="http://www.w3.org/2000/svg"
39-
fill="none"
40-
width="24"
41-
height="24"
42-
viewBox="0 0 133 134"
43-
className="fill-current"
44-
>
45-
<path
46-
fill="currentColor"
47-
d="M133 67C96.282 67 66.5 36.994 66.5 0c0 36.994-29.782 67-66.5 67 36.718 0 66.5 30.006 66.5 67 0-36.994 29.782-67 66.5-67"
48-
></path>
49-
</svg>
50-
</a>
51-
52-
<a href={links.meetupUrl} aria-label="Meetup" className="mr-4" target="_blank">
53-
<svg
54-
xmlns="http://www.w3.org/2000/svg"
55-
width="24"
56-
height="24"
57-
viewBox="0 0 32 32"
58-
className="fill-current"
59-
>
60-
<path
61-
fill="currentColor"
62-
d="M31.969 26.984c-.401-2.572-5.163-.593-5.459-3.411c-.417-4 5.531-12.615 5.063-15.964c-.417-3.005-2.453-3.64-4.219-3.677c-1.715-.025-2.167.245-2.745.584c-.339.192-.817.577-1.484-.057c-.443-.423-.745-.713-1.208-1.089c-.24-.192-.62-.432-1.261-.525c-.629-.099-1.463 0-1.984.219c-.532.229-.937.625-1.369 1c-.433.375-1.532 1.599-2.548 1.145c-.448-.192-1.948-.943-3.031-1.405c-2.084-.901-5.093.557-6.183 2.489C3.926 9.157.745 20.428.254 21.913c-1.077 3.333 1.381 6.052 4.683 5.895c1.401-.067 2.333-.572 3.213-2.181c.511-.928 5.308-13.448 5.667-14.057c.261-.432 1.125-1.005 1.855-.636c.735.38.88 1.161.771 1.896c-.183 1.193-3.557 8.839-3.693 9.699c-.219 1.473.48 2.285 2.011 2.369c1.043.052 2.089-.317 2.912-1.88c.464-.871 5.797-11.557 6.265-12.271c.521-.781.937-1.043 1.475-1.011c.411.02 1.061.125.9 1.353c-.161 1.209-4.452 9.043-4.9 10.959c-.605 2.573.801 5.167 3.124 6.308c1.48.728 7.959 1.968 7.433-1.371z"
63-
/>
64-
</svg>
65-
</a>
66-
67-
<a href={links.discord} aria-label="Discord" className="mr-4" target="_blank">
68-
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
69-
<path
70-
fill="currentColor"
71-
d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
72-
></path>
73-
</svg>
74-
</a>
75-
76-
<a href={links.github} aria-label="Github" target="_blank">
77-
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
78-
<path
79-
fill="currentColor"
80-
d="M5.315 2.1c.791-.113 1.9.145 3.333.966l.272.161l.16.1l.397-.083a13.3 13.3 0 0 1 4.59-.08l.456.08l.396.083l.161-.1c1.385-.84 2.487-1.17 3.322-1.148l.164.008l.147.017l.076.014l.05.011l.144.047a1 1 0 0 1 .53.514a5.2 5.2 0 0 1 .397 2.91l-.047.267l-.046.196l.123.163c.574.795.93 1.728 1.03 2.707l.023.295L21 9.5c0 3.855-1.659 5.883-4.644 6.68l-.245.061l-.132.029l.014.161l.008.157l.004.365l-.002.213L16 21a1 1 0 0 1-.883.993L15 22H9a1 1 0 0 1-.993-.883L8 21v-.734c-1.818.26-3.03-.424-4.11-1.878l-.535-.766c-.28-.396-.455-.579-.589-.644l-.048-.019a1 1 0 0 1 .564-1.918c.642.188 1.074.568 1.57 1.239l.538.769c.76 1.079 1.36 1.459 2.609 1.191L8 17.562l-.018-.168a5 5 0 0 1-.021-.824l.017-.185l.019-.12l-.108-.024c-2.976-.71-4.703-2.573-4.875-6.139l-.01-.31L3 9.5a5.6 5.6 0 0 1 .908-3.051l.152-.222l.122-.163l-.045-.196a5.2 5.2 0 0 1 .145-2.642l.1-.282l.106-.253a1 1 0 0 1 .529-.514l.144-.047z"
81-
/>
82-
</svg>
83-
</a>
84-
</nav>
85-
</footer>
8+
<FooterContainer>
9+
<GiveATalkCTA />
10+
<FooterContent>
11+
<Copyright>
12+
<CopyrightText>
13+
© Copyright {new Date().getFullYear()}. All rights reserved
14+
</CopyrightText>
15+
</Copyright>
16+
<SocialNav>
17+
<SocialLink href={links.linkedInUrl} aria-label="LinkedIn" target="_blank">
18+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 50 50">
19+
<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z" />
20+
</svg>
21+
</SocialLink>
22+
23+
<SocialLink href={links.youtube} aria-label="Youtube" target="_blank">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
25+
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
26+
</svg>
27+
</SocialLink>
28+
29+
<SocialLink href={links.lumaUrl} aria-label="Luma" target="_blank">
30+
<svg
31+
xmlns="http://www.w3.org/2000/svg"
32+
fill="none"
33+
width="24"
34+
height="24"
35+
viewBox="0 0 133 134"
36+
>
37+
<path
38+
fill="currentColor"
39+
d="M133 67C96.282 67 66.5 36.994 66.5 0c0 36.994-29.782 67-66.5 67 36.718 0 66.5 30.006 66.5 67 0-36.994 29.782-67 66.5-67"
40+
></path>
41+
</svg>
42+
</SocialLink>
43+
44+
<SocialLink href={links.meetupUrl} aria-label="Meetup" target="_blank">
45+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
46+
<path
47+
fill="currentColor"
48+
d="M31.969 26.984c-.401-2.572-5.163-.593-5.459-3.411c-.417-4 5.531-12.615 5.063-15.964c-.417-3.005-2.453-3.64-4.219-3.677c-1.715-.025-2.167.245-2.745.584c-.339.192-.817.577-1.484-.057c-.443-.423-.745-.713-1.208-1.089c-.24-.192-.62-.432-1.261-.525c-.629-.099-1.463 0-1.984.219c-.532.229-.937.625-1.369 1c-.433.375-1.532 1.599-2.548 1.145c-.448-.192-1.948-.943-3.031-1.405c-2.084-.901-5.093.557-6.183 2.489C3.926 9.157.745 20.428.254 21.913c-1.077 3.333 1.381 6.052 4.683 5.895c1.401-.067 2.333-.572 3.213-2.181c.511-.928 5.308-13.448 5.667-14.057c.261-.432 1.125-1.005 1.855-.636c.735.38.88 1.161.771 1.896c-.183 1.193-3.557 8.839-3.693 9.699c-.219 1.473.48 2.285 2.011 2.369c1.043.052 2.089-.317 2.912-1.88c.464-.871 5.797-11.557 6.265-12.271c.521-.781.937-1.043 1.475-1.011c.411.02 1.061.125.9 1.353c-.161 1.209-4.452 9.043-4.9 10.959c-.605 2.573.801 5.167 3.124 6.308c1.48.728 7.959 1.968 7.433-1.371z"
49+
/>
50+
</svg>
51+
</SocialLink>
52+
53+
<SocialLink href={links.discord} aria-label="Discord" target="_blank">
54+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
55+
<path
56+
fill="currentColor"
57+
d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
58+
></path>
59+
</svg>
60+
</SocialLink>
61+
62+
<SocialLink href={links.github} aria-label="Github" target="_blank">
63+
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24">
64+
<path
65+
fill="currentColor"
66+
d="M5.315 2.1c.791-.113 1.9.145 3.333.966l.272.161l.16.1l.397-.083a13.3 13.3 0 0 1 4.59-.08l.456.08l.396.083l.161-.1c1.385-.84 2.487-1.17 3.322-1.148l.164.008l.147.017l.076.014l.05.011l.144.047a1 1 0 0 1 .53.514a5.2 5.2 0 0 1 .397 2.91l-.047.267l-.046.196l.123.163c.574.795.93 1.728 1.03 2.707l.023.295L21 9.5c0 3.855-1.659 5.883-4.644 6.68l-.245.061l-.132.029l.014.161l.008.157l.004.365l-.002.213L16 21a1 1 0 0 1-.883.993L15 22H9a1 1 0 0 1-.993-.883L8 21v-.734c-1.818.26-3.03-.424-4.11-1.878l-.535-.766c-.28-.396-.455-.579-.589-.644l-.048-.019a1 1 0 0 1 .564-1.918c.642.188 1.074.568 1.57 1.239l.538.769c.76 1.079 1.36 1.459 2.609 1.191L8 17.562l-.018-.168a5 5 0 0 1-.021-.824l.017-.185l.019-.12l-.108-.024c-2.976-.71-4.703-2.573-4.875-6.139l-.01-.31L3 9.5a5.6 5.6 0 0 1 .908-3.051l.152-.222l.122-.163l-.045-.196a5.2 5.2 0 0 1 .145-2.642l.1-.282l.106-.253a1 1 0 0 1 .529-.514l.144-.047z"
67+
/>
68+
</svg>
69+
</SocialLink>
70+
</SocialNav>
71+
</FooterContent>
72+
</FooterContainer>
8673
)
8774
}
8875

89-
export default Footer
76+
const FooterContainer = styled.footer`
77+
position: relative;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
width: 100%;
82+
position: fixed;
83+
bottom: 0;
84+
background-color: rgba(0, 0, 0, 0.05);
85+
backdrop-filter: blur(38px);
86+
border-top: 1px solid rgba(255, 255, 255, 0.1);
87+
z-index: 100;
88+
`
89+
90+
const FooterContent = styled.div`
91+
display: flex;
92+
flex-direction: column;
93+
align-items: center;
94+
justify-content: space-between;
95+
padding: 1rem;
96+
color: #a3a3a3;
97+
max-width: 1200px;
98+
width: 100%;
99+
100+
@media (min-width: 768px) {
101+
flex-direction: row;
102+
}
103+
`
104+
const Copyright = styled.aside`
105+
display: flex;
106+
align-items: center;
107+
padding-bottom: 1rem;
108+
109+
@media (min-width: 768px) {
110+
padding-bottom: 0;
111+
}
112+
`
113+
114+
const CopyrightText = styled.p`
115+
display: flex;
116+
align-items: center;
117+
`
118+
119+
const SocialNav = styled.nav`
120+
display: flex;
121+
gap: 1rem;
122+
123+
@media (min-width: 768px) {
124+
place-self: center;
125+
justify-self: flex-end;
126+
}
127+
`
128+
129+
const SocialLink = styled.a`
130+
margin-right: 1rem;
131+
&:last-child {
132+
margin-right: 0;
133+
}
134+
135+
svg {
136+
fill: currentColor;
137+
}
138+
139+
&:hover {
140+
opacity: 0.8;
141+
}
142+
`

0 commit comments

Comments
 (0)