Merge pull request #5 from VandyHacks/speakers

speakerandsuch

src/speakers/Speakers.css

@@ -0,0 +1,93 @@
+.speakers-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 0;
+    width: 100%;
+}
+
+.billboard {
+    background-color: #FCF8F5;
+    border-radius: 20px;
+    padding: 60px 40px; 
+    position: relative;
+    width: 70%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; 
+    min-height: 600px;
+}
+
+.billboard::after,
+.billboard::before {
+  content: '';
+  position: absolute;
+  bottom: -40px;
+  width: 40px;
+  height: 40px;
+  background-color: #FCF8F5;
+}
+
+.billboard::after {
+  left: 25%;
+}
+
+.billboard::before {
+  right: 25%;
+}
+
+.sub_textspeaker {
+    font-family: "Verdana", monospace;
+    font-weight: 300;
+    font-size: 15px;
+    color: #FCF8F5;
+}
+
+.body_textspeaker {
+    margin: 0;
+    font-family: "Helvetica", monospace;
+    font-weight: 400;
+    font-size: 30px;
+    color: #FFFFFF;
+}
+
+.sub_textspeakercontent {
+    font-family: "Verdana", monospace;
+    font-weight: 100;
+    font-size: 15px;
+    color: #FCF8F5;
+}
+
+.header_text {
+    font-family: "Formula1", sans-serif;
+    font-size: 54px;
+    margin-bottom: 40px;
+    text-align: center;
+    color: #1F1F1F; 
+}
+
+.speaker-panes {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    flex-grow: 1; 
+}
+
+.speaker-image-placeholder {
+    width: calc(100% - 40px);
+    padding-bottom: calc(100% - 40px);
+    background-color: #FCF8F5;
+    border-radius: 20px;
+    margin: 0 auto 20px;
+    position: relative;
+}
+
+.speaker-pane {
+    background-color: #2A2A2A;
+    border-radius: 10px;
+    padding: 20px;
+    width: calc(25% - 15px);
+    display: flex;
+    flex-direction: column;
+}

src/speakers/Speakers.tsx

@@ -1,18 +1,66 @@
 import React from "react";
-import { Image, Flex, Text } from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
+import { Box, Flex, Image, Text } from "@mantine/core";
+import "./Speakers.css";
 
-function Speakers() {
-    const { height, width } = useViewportSize();
-
-    return (
-        <>
 
-            <div>
-                me when im the speaker:
-            </div>
-        </>
-    );
+const speakersData = [
+    {
+      name: "John Doe",
+      subheading: "CEO, Tech Innovations",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      name: "Jane Smith",
+      subheading: "AI Researcher, Future Labs",
+      content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    },
+    {
+      name: "Alex Johnson",
+      subheading: "Founder, StartUp Co.",
+      content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    },
+    {
+      name: "Sarah Brown",
+      subheading: "CTO, InnovateTech",
+      content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    },
+];
+
+function Speakers() {
+  return (
+    <Box className="speakers-container" style={{ backgroundColor: '#1F1F1F', padding: '40px 0' }}>
+      <Box className="billboard" style={{ 
+        backgroundColor: '#FCF8F5', 
+        borderRadius: '10px', 
+      }}>
+        <Text className="header_text">Speakers</Text>
+        <Box style={{ 
+          position: 'absolute', 
+          top: 0, 
+          left: 0, 
+          right: 0, 
+          height: '10px', 
+          background: 'repeating-linear-gradient(45deg, #1F1F1F, #1F1F1F 10px, #FCF8F5 10px, #FCF8F5 20px)'
+        }} />
+        <Flex className="speaker-panes" style={{ gap: '20px', padding: '20px' }}>
+          {speakersData.map((speaker, index) => (
+            <Box key={index} className="speaker-pane" style={{ 
+              backgroundColor: '#2A2A2A',
+              padding: '15px',
+              position: 'relative',
+              overflow: 'hidden',
+              borderRadius: '20px'
+            }}>
+              <Box className="speaker-image-placeholder"/>
+              <Text className="body_textspeaker">{speaker.name}</Text>
+              <Text className="sub_textspeaker">{speaker.subheading}</Text>
+              <Text className="sub_textspeakercontent">{speaker.content}</Text>
+            </Box>
+          ))}
+        </Flex>
+      </Box>
+    </Box>
+  );
 }
 
-export default Speakers;
+export default Speakers;