Switch to tailwind

Co-authored-by: BRUHisbackbois <[email protected]> Co-authored-by: Ryan <[email protected]>
Scott170c · Dec 17, 2024 · a1e0c7c · a1e0c7c
1 parent e14948b
commit a1e0c7c
Show file tree

Hide file tree

Showing 11 changed files with 459 additions and 394 deletions.
diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
@@ -10,10 +10,10 @@ interface CardProps {
 // Create the component
 const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
   return (
-    <Box sx={styles.card}>
-      <h3 style={styles.question}>{question}</h3>
+    <div className="">
+      <h3 className={styles.question}>{question}</h3>
       <p style={styles.answer}>{answer}</p>
-    </Box>
+    </div>
   );
 };
 
@@ -31,11 +31,7 @@ const styles = {
     overflow: 'hidden',
   },
   question: {
-    fontSize: 'calc(1.2vw + 1.2vh)',
-    fontWeight: 790,
-    color: '#FFFFFF',
-    textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-    paddingLeft: '2%',
+    "insert tailwind"
   },
   answer: {
     fontSize: 'calc(0.6vw + 0.6vh)',

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -1,30 +1,7 @@
-import {
-    Box,
-    Button,
-    Image,
-    Grid,
-    Heading,
-    Text,
-  } from 'theme-ui';
-
- const footer = ()=> {
+const footer = ()=> {
     return (
-        <footer style={{
-            backgroundColor: '#100056',
-            height: '8vh',
-            width: '100%',
-            position: 'relative',
-            //bottom: '0',
-            display: 'flex',
-            //flexDirection: 'column',
-            alignItems: 'center',
-            // py: '10px',
-            justifyContent: 'center',
-            fontSize: '120%',
-            fontWeight: 700,
-            color: '#90C4FF'
-          }}>
-            Made with ❤️ by @bright li & @Scott
+        <footer className="bg-[#100056] h-[8vh] w-full relative flex items-center justify-center text-[120%] font-bold text-[#90C4FF]">
+            Made with ❤️ by Bright, Scott & Ryan
         </footer>
     )
 }

diff --git a/app/components/top.tsx b/app/components/top.tsx
@@ -1,34 +1,11 @@
-import {
-    Box,
-    Button,
-    Image,
-    Grid,
-    Heading,
-    Text,
-  } from 'theme-ui';
-  import dynamic from 'next/dynamic';
+import dynamic from 'next/dynamic';
 
-  const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
+const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
 
  const tipitytopity = ()=> {
     return (
-        <Box
-        sx={{
-          display: 'flex',
-          flexDirection:['column','column', 'row'],
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '1rem',
-          paddingRight: ['0rem', '3rem'],
-          width: '100%',
-          margin: ['auto'],
-
-          mt: ['10vh', '0vh'],
-          backgroundImage: '../public/background2.png',
-
-          height: ['2vh', '90vh'],
-        }}
-        >
+        <div className="flex flex-col md:flex-row items-center justify-center gap-4 pr-0 md:pr-12 w-full mx-auto mt-[10vh] md:mt-0 bg-[url('../public/background2.png')] bg-no-repeat bg-cover h-[2vh] md:h-[95vh]"
+      >
       {typeof window !== 'undefined' && <ModelViewer />}
       {/* 
           <Image 
@@ -39,68 +16,29 @@ import {
                 width: '300px',
                 height: '200px',
                 // borderRadius: '16px',
-                // boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
+                // divShadow: '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: ['2rem', '6.5rem'], 
-                  fontWeight:800,
-                  textAlign: ['center','center','left'],
-                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
-                }}>
+          <div className="flex flex-col items-start ml-0 md:ml-[2vw] max-w-full">
+          <h1 className="font-[var(--font-inter)] text-[2rem] md:text-[7rem] font-extrabold text-center md:text-left text-white ">
             Hacky Holidays!
-          </Heading>
-          <Heading as="h2" variant="styles.h1" 
-                sx={{ 
-                  fontFamily: 'var(--font-inter)', 
-                  fontSize: ['0.5rem','1.9rem'], 
-                  fontWeight:800,
-                  textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
-                }}>
-            Design a PCB holiday decoration this winter, get one shipped!
-          </Heading>
+          </h1>
+          <h2 className="font-[var(--font-inter)] text-[0.5rem] md:text-[2.2rem] font-bold text-white">
+            Design a PCB holiday decoration this winter, get one shipped
+          </h2>
           <a href = "/guide">
-          <Button
-          sx={{
-            mx: ['auto',0],
-            fontFamily: 'var(--font-inter)',
-            fontSize: ['0.4rem', 'calc(0.6vw + 0.6vh)'],
-            fontWeight: 900,
-            color: 'white',
-            bg: '#f90b0b',
-            // width: 'fit-content',
-            borderRadius: '2rem',
-            padding: ['0.6rem 0.6rem', '1rem 2rem'],
-            mt: '1rem',
-
-          }}>
+          <button className="mx-auto md:mx-0 font-[var(--font-inter)] text-[0.4rem] md:text-[calc(0.6vw+0.6vh)] font-bold text-white bg-[#f90b0b] rounded-[2rem] px-[0.6rem] py-[0.6rem] md:px-[2rem] md:py-[1rem] mt-4">
               <b>&nbsp;Learn to Make a Decoration &nbsp; ➜</b>
-          </Button>
+          </button>
           </a>
 
 
-          </Box>
-
-        </Box>
-
+          </div>
+        </div>
 
     )
 }

diff --git a/app/globals.css b/app/globals.css
@@ -6,16 +6,14 @@
   font-family: 'Inter';
   src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf');
   font-optical-sizing: auto;
-
-
 
 
 }
-body {
+/* body {
   color: #FFFFFF;
   background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);';
   font-family: Arial, Helvetica, sans-serif;
   height: 100vh;
   margin: 0;
   min-width: none;
-}
+} */
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -29,7 +29,7 @@ const inter = localFont({
 
 export const metadata: Metadata = {
   title: "Hacky Holidays",
-  description: "Generated by create next app",
+  description: "Create a ",
 };
 
 export default function RootLayout({