Organized stuff into componentns

Co-authored-by: BRUHisbackbois <[email protected]>
Scott170c · Dec 4, 2024 · 1bdf903 · 1bdf903
1 parent fe7fa61
commit 1bdf903
Show file tree

Hide file tree

Showing 8 changed files with 468 additions and 254 deletions.
diff --git a/app/components/3box.tsx b/app/components/3box.tsx
@@ -0,0 +1,107 @@
+import {
+    Box,
+    Button,
+    Image,
+    Grid,
+    Heading,
+    Text,
+  } from 'theme-ui';
+
+const Threebox = () => {
+    return(
+        <Grid columns= {[1,1,1,3]}gap = {[50,5,20,0]} sx={{
+            mt: '5vh',
+            width: 'fit-content',
+            px: '3vw',
+            textAlign: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.31)',
+            borderRadius: '20px',
+            mx: '32px',
+            mb: '5vh',
+            paddingBottom: '2vh',
+            paddingTop: '2vh',
+          }}>
+              <Box sx={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                mx: '1vw',
+                paddingTop: '2rem',
+                borderRadius: '20px',
+              }}>
+                <Heading as="h4"   sx={{
+                  fontFamily: 'var(--font-inter)',
+                  fontWeight: 900,
+                  fontSize: '1.5vw',
+                  paddingBottom: '1.2rem',
+                  color: 'white',
+                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
+                } }>Build</Heading>
+                <Image sx={{
+                  width:'27vw',
+                  height: '28vw',
+                  borderRadius: '20px',
+                  paddingBottom: '2rem',
+                }}
+                src = "https://cloud-qonvrpxwd-hack-club-bot.vercel.app/0image.png"
+                ></Image>
+
+              </Box>
+              <Box sx={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                paddingTop: '2rem',
+                mx: '1vw',
+
+                textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
+              }}>
+                     <Heading as="h4"   sx={{
+                  fontFamily: 'var(--font-inter)',
+                  fontWeight: 900,
+                  fontSize: '1.5vw',
+                  color: 'white',
+                  paddingBottom: '1.2rem'
+                } }>Design</Heading>
+                   <Image sx={{
+                  width:'27vw',
+                  height:'28vw',
+                  borderRadius: '16px',
+                  paddingBottom: '2rem'
+                }} src="https://cloud-go1uacpkk-hack-club-bot.vercel.app/0image.png"></Image>
+              </Box>
+              <Box sx={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                display: 'flex',
+                mx: '1vw',
+
+                flexDirection: 'column',
+                paddingTop: '2rem'
+              }}>
+              <Heading as="h4"   sx={{
+                  fontFamily: 'var(--font-inter)',
+                  fontWeight: 900,
+                  fontSize: '1.5vw',
+                  paddingBottom: '1.2rem',
+                  color: 'white',
+                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
+                } }>Code</Heading>
+                   <Image sx={{
+                  width:'27vw',
+                  height:'28vw',
+                  borderRadius: '16px',
+                  paddingBottom: '2rem'
+                }}
+                src = "https://cloud-ix9a26xw1-hack-club-bot.vercel.app/0image.png"
+                ></Image>
+              </Box>
+          </Grid>
+    )
+}
+export default Threebox;
diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+// Define the type for the props
+interface CardProps {
+  question: string;
+  answer: string;
+}
+
+// Create the component
+const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
+  return (
+    <div style={styles.card}>
+      <h3 style={styles.question}>{question}</h3>
+      <p style={styles.answer}>{answer}</p>
+    </div>
+  );
+};
+
+// Inline styles for the component
+const styles = {
+  card: {
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    padding: '16px',
+    margin: '16px',
+    backgroundColor: '#fefefe',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+  },
+  question: {
+    fontSize: '18px',
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  answer: {
+    fontSize: '16px',
+    color: '#666',
+    marginTop: '8px',
+  },
+};
+
+export default FAQcard;
diff --git a/app/components/middle.tsx b/app/components/middle.tsx
diff --git a/app/components/top.tsx b/app/components/top.tsx
@@ -0,0 +1,104 @@
+import {
+    Box,
+    Button,
+    Image,
+    Grid,
+    Heading,
+    Text,
+  } from 'theme-ui';
+  import dynamic from 'next/dynamic';
+
+  const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
+
+ const tipitytopity = ()=> {
+    return (
+        <Box
+        sx={{
+          display: 'flex',
+          flexDirection:['column','column', 'row'],
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '1rem',
+          padding: '1rem',
+          paddingRight: '3rem',
+          width: '100%',
+          margin: 'auto',
+
+          mt: '15vh',
+          textAlign: 'center',
+          // height: '65vh'
+        }}
+        >
+      {typeof window !== 'undefined' && <ModelViewer />}
+      {/* 
+          <Image 
+              src="https://cloud-1mi3pnd3v-hack-club-bot.vercel.app/0image.png" 
+              alt="Example PCB!" 
+              style={{ width: '35%', height: '34%' }}
+              sx={{
+                width: '300px',
+                height: '200px',
+                // borderRadius: '16px',
+                // boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
+                '&:hover': {
+                  transform: 'scale(1.1)',
+                  transition: 'transform 0.3s ease-in-out',
+                },
+              }}
+          /> */}
+          <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'left',
+            // justifyContent: 'left',
+            ml: ['0vw','2vw'],
+            // mt: ['1%','12%'],
+            maxWidth: '100%',
+            textAlign: 'center'
+          }}
+          >
+          <Heading as="h1" variant="styles.h1" 
+                sx={{ 
+                  fontFamily: 'var(--font-inter)', 
+                  fontSize: '7rem', 
+                  fontWeight:900,
+                  textAlign: ['center','center','left'],
+                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
+                }}>
+            Hacky Holidays
+          </Heading>
+          <Heading as="h2" variant="styles.h1" 
+                sx={{ 
+                  fontFamily: 'var(--font-inter)', 
+                  fontSize: '2rem', 
+                  fontWeight:900,
+                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
+                }}>
+            Design a PCB holiday decoration <u><a style={{color:"#5297FF"}} href="https://google.com">this winter</a></u>, get a PCB grant!
+          </Heading>
+          <Button
+          sx={{
+            mx: ['auto',0],
+            fontFamily: 'var(--font-inter)',
+            fontSize: '1.5rem',
+            fontWeight: 900,
+            color: 'white',
+            bg: '#f90b0b',
+            width: 'fit-content',
+            borderRadius: '2rem',
+            padding: '1rem 2rem',
+            mt: '1rem'
+          }}>
+              <b>Register Now!</b>
+          </Button>
+
+
+          </Box>
+
+        </Box>
+
+
+    )
+}
+export default tipitytopity;
diff --git a/app/globals.css b/app/globals.css
@@ -3,14 +3,12 @@
 @tailwind utilities;
 
 :root {
-  --background: hsl(204, 100%, 87%);
-  --foreground: #ffffff;
+  --background: '#0099FF';
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #BEE5FF;
-    --foreground: #ededed;
+    --background: '#74C8FF';
   }
 }
 @font-face {
@@ -23,7 +21,11 @@
 
 }
 body {
-  color: var(--foreground);
+  color: #FFFFFF;
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  height: 100%;
+  margin: 0;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }