From c60ecde0d2b75407113e9dc643ae2f391337487e Mon Sep 17 00:00:00 2001
From: BrightTheBackpack <100brightli@gmail.com>
Date: Wed, 18 Dec 2024 01:05:41 -0800
Subject: [PATCH] 12-17 changes

Co-authored-by: BRUHisbackbois <Scott170c@users.noreply.github.com>
Co-authored-by: Ryan <talk@limeskey.com>
---
 app/components/3box.tsx    |  4 ++--
 app/components/FAQcard.tsx | 47 ++++++++++++++++++++++++++++++--------
 app/components/top.tsx     |  4 ++--
 app/guide/page.tsx         |  5 ++--
 app/layout.tsx             |  4 ++--
 app/page.tsx               | 12 ++++++----
 tailwind.config.ts         |  8 ++++++-
 7 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/app/components/3box.tsx b/app/components/3box.tsx
index 10d67c4..9df934c 100644
--- a/app/components/3box.tsx
+++ b/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'
diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx
index 8679ca3..02a4ec7 100644
--- a/app/components/FAQcard.tsx
+++ b/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;
\ No newline at end of file
diff --git a/app/components/top.tsx b/app/components/top.tsx
index a760baf..c04a365 100644
--- a/app/components/top.tsx
+++ b/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!
diff --git a/app/guide/page.tsx b/app/guide/page.tsx
index 4be9fd0..2b015f2 100644
--- a/app/guide/page.tsx
+++ b/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',
           }}
diff --git a/app/layout.tsx b/app/layout.tsx
index 872bccd..40e8f63 100644
--- a/app/layout.tsx
+++ b/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({
diff --git a/app/page.tsx b/app/page.tsx
index 99180dc..ebdcfd4 100644
--- a/app/page.tsx
+++ b/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{" "}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1362b88..4a14734 100644
--- a/tailwind.config.ts
+++ b/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;