Skip to content

Commit 9a0d492

Browse files
TheDThompsonDevTheDThompsonDev
committed
feat: designed a speak page for speakers to apply to speak
1 parent df1effc commit 9a0d492

File tree

6 files changed

+851
-1
lines changed

6 files changed

+851
-1
lines changed

‎src/app/_constants.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export const internalLinks = {
1616
link: '/cohorts',
1717
label: 'Cohorts',
1818
},
19+
speak: {
20+
link: '/speak',
21+
label: 'Speak',
22+
},
1923
about: {
2024
link: '/about',
2125
label: 'About',

‎src/app/labels.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export const LABELS = {
9191
home: 'Home',
9292
community: 'Community',
9393
cohorts: 'Cohorts',
94+
speak: 'Speak',
9495
about: 'About',
9596
contact: 'Contact',
9697
email: 'dallassoftwaredevelopersdsd@gmail.com',
@@ -259,6 +260,78 @@ export const LABELS = {
259260
title: 'Our Speakers',
260261
},
261262
},
263+
speak: {
264+
hero: {
265+
tagline: 'Dallas Software Developers',
266+
title: 'Share Your Knowledge',
267+
subtitle:
268+
"Inspire our community of 500+ developers by sharing your expertise at one of our monthly meetups. We're always looking for passionate speakers.",
269+
stats: {
270+
audience: '50+',
271+
audienceLabel: 'Attendees',
272+
meetups: '24',
273+
meetupsLabel: 'Events/Year',
274+
speakers: '100+',
275+
speakersLabel: 'Past Speakers',
276+
},
277+
cta: 'Submit Your Talk',
278+
},
279+
guidelines: {
280+
title: 'Talk Format & Guidelines',
281+
subtitle: "Here's what to expect when you speak at a DSD meetup",
282+
duration: {
283+
title: 'Talk Duration',
284+
description:
285+
'We do two types of talks, either lightning talks in our "A Night Of" Theme (10-15 minutes MAX) or full-length talks (45-60 minutes MAX).',
286+
},
287+
format: {
288+
title: 'In-Person Only',
289+
description:
290+
'All speaking engagements are in-person at our meetup venues in the Dallas-Fort Worth area. We cannot accommodate remote presentations.',
291+
},
292+
equipment: {
293+
title: 'A/V Equipment',
294+
description:
295+
'We provide projector, HDMI connection, speaker system, and a clicker. Bring your laptop with your presentation ready to go.',
296+
},
297+
topics: {
298+
title: 'Topic Ideas',
299+
description:
300+
'We welcome talks on web development, mobile, DevOps, AI/ML, career growth, soft skills, and emerging technologies. All experience levels welcome!',
301+
},
302+
},
303+
benefits: {
304+
title: 'Why Speak at DSD?',
305+
items: [
306+
{
307+
title: 'Grow Your Network',
308+
description:
309+
'Connect with hundreds of developers, potential employers, and collaborators in the Dallas tech community.',
310+
},
311+
{
312+
title: 'Build Your Brand',
313+
description:
314+
"Establish yourself as an expert in your field. We'll promote your talk on our social channels and feature you on our speakers page.",
315+
},
316+
{
317+
title: 'Practice Public Speaking',
318+
description:
319+
'Our supportive community is a great place to practice presenting. We welcome first-time speakers and provide feedback.',
320+
},
321+
{
322+
title: 'Give Back',
323+
description:
324+
'Help uplift the Dallas developer community by sharing what you know. Your experience could help someone land their dream job.',
325+
},
326+
],
327+
},
328+
cta: {
329+
title: 'Ready to Share Your Story?',
330+
description:
331+
"We'd love to hear what you want to talk about. Submit your proposal and we'll get back to you soon.",
332+
button: 'Submit Your Talk Proposal',
333+
},
334+
},
262335
speakerForm: {
263336
labels: {
264337
full_name: 'Full Name',

‎src/app/speak/page.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import styles from './speak.module.css';
5+
import Modal from '@/components/modal/modal';
6+
import SpeakerForm from '@/components/speakerForm/speakerForm';
7+
import BackgroundPattern from '@/components/decorative/backgroundPattern';
8+
import FloatingShapes from '@/components/decorative/floatingShapes';
9+
import Button from '@/components/button/button';
10+
import { LABELS } from '@/app/labels';
11+
12+
export default function SpeakPage() {
13+
const [isModalOpen, setIsModalOpen] = useState(false);
14+
15+
const handleOpenModal = () => setIsModalOpen(true);
16+
const handleCloseModal = () => setIsModalOpen(false);
17+
18+
return (
19+
<div className={styles.pageContainer}>
20+
<section className={styles.hero}>
21+
<div className={styles.heroBackground} aria-hidden='true'>
22+
<div className={styles.gradientOverlay}></div>
23+
<div className={styles.shapesContainer}>
24+
<div className={styles.shape + ' ' + styles.shape1}></div>
25+
<div className={styles.shape + ' ' + styles.shape2}></div>
26+
<div className={styles.shape + ' ' + styles.shape3}></div>
27+
</div>
28+
<div className={styles.gridPattern}></div>
29+
<BackgroundPattern variant='dots' opacity={0.19} />
30+
<FloatingShapes />
31+
</div>
32+
33+
<div className={styles.heroContent}>
34+
<div className={styles.heroTextContent}>
35+
<h1 className={styles.heroHeading}>
36+
{LABELS.speak.hero.tagline}{' '}
37+
<span className={styles.highlight}>{LABELS.speak.hero.title}</span>
38+
</h1>
39+
40+
<div className={styles.heroDescription}>
41+
<p>{LABELS.speak.hero.subtitle}</p>
42+
</div>
43+
44+
<div className={styles.heroStats}>
45+
<div className={styles.stat}>
46+
<span className={styles.statNumber}>{LABELS.speak.hero.stats.audience}</span>
47+
<span className={styles.statLabel}>{LABELS.speak.hero.stats.audienceLabel}</span>
48+
</div>
49+
<div className={styles.stat}>
50+
<span className={styles.statNumber}>{LABELS.speak.hero.stats.meetups}</span>
51+
<span className={styles.statLabel}>{LABELS.speak.hero.stats.meetupsLabel}</span>
52+
</div>
53+
<div className={styles.stat}>
54+
<span className={styles.statNumber}>{LABELS.speak.hero.stats.speakers}</span>
55+
<span className={styles.statLabel}>{LABELS.speak.hero.stats.speakersLabel}</span>
56+
</div>
57+
</div>
58+
59+
<div className={styles.heroHighlights}>
60+
<div className={styles.highlightItem}>
61+
<div className={styles.highlightIcon} aria-hidden='true'>
62+
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'>
63+
<path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z' />
64+
</svg>
65+
</div>
66+
<div className={styles.highlightText}>
67+
<h3>{LABELS.speak.guidelines.duration.title}</h3>
68+
<p>{LABELS.speak.guidelines.duration.description}</p>
69+
</div>
70+
</div>
71+
72+
<div className={styles.highlightItem}>
73+
<div className={styles.highlightIcon} aria-hidden='true'>
74+
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'>
75+
<path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z' />
76+
</svg>
77+
</div>
78+
<div className={styles.highlightText}>
79+
<h3>{LABELS.speak.guidelines.format.title}</h3>
80+
<p>{LABELS.speak.guidelines.format.description}</p>
81+
</div>
82+
</div>
83+
</div>
84+
85+
<div className={styles.heroCTA}>
86+
<Button
87+
buttonText={LABELS.speak.hero.cta}
88+
onClick={handleOpenModal}
89+
/>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<div className={styles.scrollIndicator} aria-hidden='true'>
95+
<div className={styles.mouse}>
96+
<div className={styles.mouseWheel}></div>
97+
</div>
98+
</div>
99+
</section>
100+
101+
<section className={styles.benefitsSection}>
102+
<div className={styles.sectionHeader}>
103+
<h2 className={styles.sectionTitle}>
104+
{LABELS.speak.benefits.title.split('DSD')[0]}
105+
<span className={styles.highlight}>DSD</span>
106+
{LABELS.speak.benefits.title.split('DSD')[1]}
107+
</h2>
108+
</div>
109+
110+
<div className={styles.benefitsGrid}>
111+
{LABELS.speak.benefits.items.map((benefit, index) => (
112+
<div key={index} className={styles.benefitCard}>
113+
<div className={styles.benefitIcon} aria-hidden='true'>
114+
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'>
115+
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' />
116+
</svg>
117+
</div>
118+
<h3 className={styles.benefitTitle}>{benefit.title}</h3>
119+
<p className={styles.benefitDescription}>{benefit.description}</p>
120+
</div>
121+
))}
122+
</div>
123+
</section>
124+
125+
<section className={styles.ctaSection}>
126+
<div className={styles.ctaCard}>
127+
<div className={styles.ctaIcon} aria-hidden='true'>
128+
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='currentColor'>
129+
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' />
130+
</svg>
131+
</div>
132+
<h3 className={styles.ctaTitle}>{LABELS.speak.cta.title}</h3>
133+
<p className={styles.ctaDescription}>{LABELS.speak.cta.description}</p>
134+
<Button
135+
buttonText={LABELS.speak.cta.button}
136+
onClick={handleOpenModal}
137+
/>
138+
</div>
139+
</section>
140+
141+
<Modal isOpen={isModalOpen} onClose={handleCloseModal}>
142+
<SpeakerForm onSubmit={handleCloseModal} onCancel={handleCloseModal} />
143+
</Modal>
144+
</div>
145+
);
146+
}

0 commit comments

Comments
 (0)