12-17 changes

Co-authored-by: BRUHisbackbois <[email protected]>
Co-authored-by: Ryan <[email protected]>

app/components/3box.tsx

@@ -43,8 +43,8 @@ const Threebox = () => {
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' 
                 } }>Design a PCB</Heading>
                 <Image sx={{
-                  width:['28vh', '26vw'],
-                  height:['30vh', '25vw'],
+                  width:['28vh', '25vw'],
+                  height:['30vh', '23vw'],
                   borderRadius: '10px',
                   paddingBottom: '2rem',
                   fill: 'true'

app/components/FAQcard.tsx

@@ -1,21 +1,50 @@
+import { kMaxLength } from 'buffer';
 import React from 'react';
-
+import { Box } from 'theme-ui';
+// Define the type for the props
 interface CardProps {
   question: string;
   answer: string;
 }
 
+// Create the component
 const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
   return (
-    <div className="rounded-[20px] p-[16px] my-[16px] bg-[rgba(201,227,255,0.73)] shadow-[0_2px_4px_rgba(0,0,0,0.1)] w-[90vw] sm:w-auto md:w-auto lg:w-[26vw] sm:h-[auto] lg:h-[26vh] border-[5px] border-[rgba(39,114,193,0.42)] overflow-hidden">
-      <h3 className="text-[1rem] md:text-[calc(1vw+1vh)] font-[790] text-white pl-[2%] [text-shadow:_0_4px_4px_rgb(0_0_0_/_25%)] text-left break-words">
-        {question}
-      </h3>
-      <p className="text-[0.9rem] md:text-[calc(0.6vw+0.6vh)] text-[#003180] mt-[15px] font-[700] pl-[2%] text-left">
-        {answer}
-      </p>
-    </div>
+    <Box sx={styles.card}>
+      <h3 style={styles.question}>{question}</h3>
+      <p style={styles.answer}>{answer}</p>
+    </Box>
   );
 };
 
+// Inline styles for the component
+const styles = {
+  card: {
+    borderRadius: '20px',
+    padding: '16px',
+    margin: '16px',
+    backgroundColor: 'rgba(201, 227, 255, 0.73)',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    height: ['fill-content', '16vw'],
+    width: ['60vw', '26vw'],
+    border: '5px solid rgba(39, 114, 193, 0.42)',
+    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%',
+  },
+  answer: {
+    fontSize: 'calc(0.6vw + 0.6vh)',
+    color: '#003180',
+    marginTop: '8px',
+    textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+    fontWeight: 600,
+    paddingLeft: '2%'
+  },
+};
+
 export default FAQcard;

app/components/top.tsx

@@ -4,7 +4,7 @@ const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
 
  const tipitytopity = ()=> {
     return (
-        <div className="flex flex-col mb-8 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('https://cloud-dhj4yjv42-hack-club-bot.vercel.app/0backgroundhh.png')] bg-no-repeat bg-center bg-cover sm:h-[120vh] md:h-[95vh]">
+        <div className="flex flex-col mb-8 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('https://cloud-clj0ujnpv-hack-club-bot.vercel.app/0image.png')] border-b-4 bg-no-repeat bg-center bg-cover sm:h-[120vh] md:h-[95vh]">
       {typeof window !== 'undefined' && <ModelViewer />}
       {/* 
           <Image 
@@ -21,7 +21,7 @@ const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false });
                   transition: 'transform 0.3s ease-in-out',
                 },
               }}
-          /> */}
+          /> */}h
           <div className="flex flex-col items-start ml-0 md:ml-[2vw] max-w-full">
           <h1 className="text-[2.8rem] md:text-[7rem] font-bold text-center md:text-left text-white [text-shadow:_0_4px_4px_rgb(0_0_0_/_25%)]">
             Hacky Holidays!

app/guide/page.tsx

@@ -47,7 +47,7 @@ export default function guide() {
           <Box sx={{ position: 'relative' }}>
             <Image src="/OrpheusFlag.svg" alt="Orpheus Flag" width={48} height={48} />
             <Box sx={{ marginLeft: 'auto', marginRight: '1.5rem' }}>
-              <Link href="https://github.com/hackclub/hackpad" passHref legacyBehavior>
+              <Link href="https://github.com/hackclub/onboard" passHref legacyBehavior>
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
@@ -83,8 +83,9 @@ export default function guide() {
           sx={{
             display: ['none', 'block'],
             width: '12rem',
-            position: 'fixed',
+            // position: 'fixed',
             top: '4rem',
+            mr: '1rem',
             height: '100%',
             background: 'white',
           }}

app/layout.tsx

@@ -20,8 +20,8 @@ const inter = localFont({
 })
 
 export const metadata: Metadata = {
-  title: "Hacky Holidays",
-  description: "Limited-time Hack Club PCB Ornament YSWS 🎄",
+  title: "Hacky Holidays 🎄",
+  description: "Build a Holiday Decoration, get one Shipped!",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -4,7 +4,7 @@
 import { useEffect } from "react";
 import Snowfall from "react-snowfall";
 import dynamic from "next/dynamic";
-
+import { Grid } from "theme-ui";
 const Footer = dynamic(() => import("./components/footer"), { ssr: false });
 const Top = dynamic(() => import("./components/top"), { ssr: false });
 const FAQcard = dynamic(() => import("./components/FAQcard"), { ssr: false });
@@ -19,6 +19,8 @@ export default function Home() {
 
   return (
     <div>
+        <link rel="icon" href = "https://assets.hackclub.com/icon-rounded.svg"></link>
+
       {/* Snowfall effect */}
       <Snowfall
         speed={[0.5, 3]}
@@ -47,7 +49,7 @@ export default function Home() {
         <Top />
 
         {/* Main Section */}
-        <div className="flex flex-col items-center justify-center text-center text-white px-4 md:px-20 lg:px-52">
+        <div className="flex flex-col items-center justify-center text-white px-4 md:px-20">
           <h3 className="font-inter font-bold text-lg md:text-2xl drop-shadow-md pt-8 sm:px-8 md:px-16">
             Want a cool Christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th! Whether it's for Christmas, Hanukkah, New Year's, or any other holiday, once your PR gets approved, you will get your PCB decoration just in time for the celebrations!
           </h3>
@@ -57,10 +59,10 @@ export default function Home() {
           </h3>
 
           {/* FAQ Section */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+          <Grid columns = {[1, 1, 1, 3]}gap = {[0]} sx = {{paddingTop: '1.5vh'}}>
             <FAQcard
               question="What can I Make?"
-              answer="You can make a PCB that celebrates any holiday you would like! Including but not limited to: Christmas, New Years, Diwali, and Hanukkah!"
+              answer="You can make a PCB that celebrates any holiday you would like! Including but not limited to: Christmas, New Years, Diwali, and Hanukkah! It can also be something Festivus."
             />
             <FAQcard
               question="When are Submission deadlines?"
@@ -82,7 +84,7 @@ export default function Home() {
               question="How do I submit my design?"
               answer="Submit your design via a pull request (PR) to the OnBoard repository before the deadline."
             />
-          </div>
+          </Grid>
 
           <h2 className="font-inter font-bold text-lg md:text-3xl mt-6 pb-8">
             Any more questions? Ask in{" "}

tailwind.config.ts

@@ -14,5 +14,11 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/line-clamp'),
+    require('tailwindcss-filters'), // Make sure this is included
+  ],
 } satisfies Config;