diff --git a/public/speaker-placeholder.png b/public/speaker-placeholder.png new file mode 100644 index 0000000..7dee458 Binary files /dev/null and b/public/speaker-placeholder.png differ diff --git a/src/App.tsx b/src/App.tsx index 1f3b62c..49c932d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { CFP } from '@/components/cfp.tsx'; import { Charity } from '@/components/charity.tsx'; import { InfoCards } from '@/components/info-cards.tsx'; import { Partners } from '@/components/partners.tsx'; +import { Speakers } from '@/components/speakers.tsx'; import { Venue } from '@/components/venue.tsx'; import { Hero } from './components/hero.tsx'; @@ -75,6 +76,7 @@ export const App = () => { + diff --git a/src/assets/speakers/jakub-mrugalski.png b/src/assets/speakers/jakub-mrugalski.png new file mode 100644 index 0000000..c127074 Binary files /dev/null and b/src/assets/speakers/jakub-mrugalski.png differ diff --git a/src/assets/speakers/mateusz-chrobok.png b/src/assets/speakers/mateusz-chrobok.png new file mode 100644 index 0000000..e480b19 Binary files /dev/null and b/src/assets/speakers/mateusz-chrobok.png differ diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 0cae95e..2ee4b52 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -40,6 +40,14 @@ export const Footer = () => { Sponsor +
  • + + Speakers + +
  • { > - + { aria-label="LinkedIn" > - - + { + + + + + + diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index 3531a01..fd6f9f6 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -20,6 +20,7 @@ export const Navigation = () => { const navItems = [ { label: 'CFP', id: 'cfp' }, { label: 'Sponsor', id: 'partners' }, + { label: 'Speakers', id: 'speakers' }, { label: 'Venue', id: 'venue' }, { label: 'Tickets', id: 'tickets' }, { label: 'Contact', id: 'contact' }, diff --git a/src/components/speaker-card.tsx b/src/components/speaker-card.tsx new file mode 100644 index 0000000..d397add --- /dev/null +++ b/src/components/speaker-card.tsx @@ -0,0 +1,106 @@ +import type { Speaker } from '@/types/speaker.ts'; + +export const SpeakerCard = ({ + name, + company, + social, + bio, + role, + talkTitle, + imageUrl, +}: Speaker) => { + return ( +
    +
    + {name} +
    + +
    +

    {name}

    +

    + {role} @ {company} +

    +

    {talkTitle}

    +

    {bio}

    + + {social && ( +
    + {social.twitter && ( + + + + + + )} + {social.linkedin && ( + + + + + + )} + {social.github && ( + + + + + + )} + {social.instagram && ( + + + + + + + )} +
    + )} +
    +
    + ); +}; diff --git a/src/components/speakers.tsx b/src/components/speakers.tsx new file mode 100644 index 0000000..e094d4a --- /dev/null +++ b/src/components/speakers.tsx @@ -0,0 +1,95 @@ +import JakubMrugalski from '@/assets/speakers/jakub-mrugalski.png'; +import MateuszChrobok from '@/assets/speakers/mateusz-chrobok.png'; +import { SpeakerCard } from '@/components/speaker-card.tsx'; +import { Wrapper } from '@/components/wrapper.tsx'; + +import type { Speaker } from '@/types/speaker.ts'; + +const speakers: Speaker[] = [ + { + name: 'Jakub Mrugalski', + role: 'Trainer', + company: 'AI_devs', + talkTitle: 'Talk title to be announced', + bio: 'BIO', + imageUrl: JakubMrugalski, + social: { + twitter: 'https://x.com/uwteam', + linkedin: 'https://www.linkedin.com/in/unknow/', + github: 'https://github.com/unkn0w', + instagram: 'https://www.instagram.com/uwteam_org/', + youtube: 'https://www.youtube.com/@uwteamorg', + }, + }, + { + name: 'Mateusz Chrobok', + role: 'Trainer / Co-Founder', + company: 'AI_devs', + talkTitle: 'Talk title to be announced', + bio: 'BIO', + imageUrl: MateuszChrobok, + social: { + twitter: 'https://x.com/MateuszChrobok', + linkedin: 'https://www.linkedin.com/in/mateuszchrobok/', + instagram: 'https://www.instagram.com/mateuszemsi/', + youtube: 'https://www.youtube.com/@MateuszChrobok', + }, + }, +]; + +export const Speakers = () => { + return ( +
    + +

    Speakers

    +

    + Learn from industry experts and thought leaders +

    + + {speakers.length === 0 ? ( +
    +
    + + + +
    +

    To Be Announced

    +

    + We're curating an incredible lineup of industry experts, thought + leaders, and innovators who will share their knowledge and + insights. +

    +

    + Stay tuned for speaker announcements! Follow us on social media to + be the first to know. 🎉 +

    +
    + ) : ( + <> +
    + {speakers.map(speaker => ( + + ))} +
    + +
    +

    + More amazing speakers will be announced soon! 🎉 +

    +
    + + )} +     +
    + ); +}; diff --git a/src/types/speaker.ts b/src/types/speaker.ts new file mode 100644 index 0000000..7bb2401 --- /dev/null +++ b/src/types/speaker.ts @@ -0,0 +1,15 @@ +export interface Speaker { + name: string; + role: string; + company: string; + talkTitle: string; + bio: string; + imageUrl?: string; + social?: { + twitter?: string; + linkedin?: string; + github?: string; + instagram?: string; + youtube?: string; + }; +}