diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d2702b8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": true +} diff --git a/app/components/3box.tsx b/app/components/3box.tsx deleted file mode 100644 index 9cba980..0000000 --- a/app/components/3box.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; - -const Threebox = () => { - return( - - - Design a PCB - - - - Design Art - - - - Create Firmware - - - - ) -} -export default Threebox; diff --git a/app/components/FAQCard.tsx b/app/components/FAQCard.tsx new file mode 100644 index 0000000..e119134 --- /dev/null +++ b/app/components/FAQCard.tsx @@ -0,0 +1,23 @@ +import React, { ReactNode } from "react"; + +// Define the type for the props +interface CardProps { + question: string; + answer: string | ReactNode; +} + +// Create the component +const FAQCard: React.FC = ({ question, answer }) => { + return ( +
+

+ {question} +

+

+ {answer} +

+
+ ); +}; + +export default FAQCard; diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx deleted file mode 100644 index 02a4ec7..0000000 --- a/app/components/FAQcard.tsx +++ /dev/null @@ -1,50 +0,0 @@ -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 = ({ question, answer }) => { - return ( - -

{question}

-

{answer}

- - ); -}; - -// 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/Steps.tsx b/app/components/Steps.tsx new file mode 100644 index 0000000..87f1798 --- /dev/null +++ b/app/components/Steps.tsx @@ -0,0 +1,60 @@ +import Image from 'next/image'; + +const Steps = () => { + return ( +
+
+
+

+ Design a PCB +

+
+ Design a PCB +
+

+ Create your own custom PCB design. +

+
+
+

+ Design Art +

+
+ Design Art +
+

+ Add artistic elements to your PCB. +

+
+
+

+ Create Firmware +

+
+ Create Firmware +
+

+ Develop the firmware for your PCB. +

+
+
+
+ ); +}; + +export default Steps; \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/Top.tsx similarity index 100% rename from app/components/top.tsx rename to app/components/Top.tsx diff --git a/app/components/footer.tsx b/app/components/common/Footer.tsx similarity index 100% rename from app/components/footer.tsx rename to app/components/common/Footer.tsx diff --git a/app/components/middle.tsx b/app/components/middle.tsx deleted file mode 100644 index 0320d8e..0000000 --- a/app/components/middle.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - Box, - Heading, - Text, - } from 'theme-ui'; - - const Middle = () => { - return ( - - - At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts! - - - Frequently Asked Questions - - - ); - } - - export default Middle; \ No newline at end of file diff --git a/app/components/mdx.tsx b/app/components/shared/MDXComponents.tsx similarity index 100% rename from app/components/mdx.tsx rename to app/components/shared/MDXComponents.tsx diff --git a/app/components/SideBar.tsx b/app/guide/SideBar.tsx similarity index 100% rename from app/components/SideBar.tsx rename to app/guide/SideBar.tsx diff --git a/app/guide/page.tsx b/app/guide/page.tsx index 2b015f2..486e38c 100644 --- a/app/guide/page.tsx +++ b/app/guide/page.tsx @@ -2,10 +2,10 @@ import { keyframes } from '@emotion/react'; import GuideMD from './guideMD.mdx'; import { MDXProvider } from '@mdx-js/react'; -import components from '../components/mdx'; +import components from '../components/shared/MDXComponents'; import { Box } from 'theme-ui'; import Image from 'next/image'; -import SideBar from "../components/SideBar"; +import SideBar from "./SideBar"; import Link from 'next/link'; const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }); diff --git a/app/page.tsx b/app/page.tsx index 275abc3..07987ac 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,110 +1,175 @@ "use client"; -/* eslint-disable @typescript-eslint/no-unused-vars */ 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 }); -const ThreeGrid = dynamic(() => import("./components/3box"), { ssr: false }); +import Footer from "./components/common/Footer"; +import Top from "./components/Top"; +import FAQCard from "./components/FAQCard"; +import Steps from "./components/Steps"; export default function Home() { - useEffect(() => { - if (typeof window !== "undefined") { - import("@google/model-viewer"); - } - }, []); + useEffect(() => { + if (typeof window !== "undefined") { + import("@google/model-viewer"); + } + }, []); - return ( -
- + return ( +
+ - {/* Snowfall effect */} - + {/* Snowfall effect */} + - {/* Main Content */} -
- {/* Header Section */} - + {/* Main Content */} +
+ {/* Header Section */} + - {/* Top Component */} - + +
+
+

+ This holiday season make a festive themed PCB design of one of the + many holidays taking place, Christmas, New Years, Diwali, + Hanukkah, or others! Design a PCB that commemorates and showcases + your interest in electronics using LEDs, sensors and more. The PCB + can be a decoration, a gift, or anything else you can think of! +

+

+ Your PCB can be as simple or as complex as you want, to help you + get started we have some example designs and reference schematics + location in our{" "} + + guide + + .{" "} +

+
- {/* Main Section */} -
-

- This holiday season, until Jan 20th, make a festive themed PCB design of one of the many holidays, Christmas, New Years, Diwali, Hanukkah, or any others! You can design a PCB that celebrates any holiday you would like! The PCB can be a decoration, a gift, or anything else you can think of! -



- The PCB can be as simple or as complex as you want, we have some example designs and reference schematics location in our guide. You can also use any software you want to design the PCB, but we recommend using Figma, KiCad, or EasyEDA. -

- -

- At the end, submissions will be peer-reviewed and voted for the top 3. The top 3 designs will be re-made and can be given out as gifts! Winners will also receive special recognition and a feature on our website. Don't miss this chance to showcase your creativity and spread holiday cheer with your unique PCB decorations! -

-

- FAQ: -

- {/* FAQ Section */} - - - - - - - - + -

- Any more questions? Ask in{" "} - - #hacky-holidays - - ! -

-
-
+
+

+ Want something a little simplier to learn the basics, or just in + need of some inspiration?

+ Check out Hack Club Jams which you'll find amazing guides made by + the community.{" "} +

+ + Hack Club Jams + {" "} +
- {/* Footer */} -
-
- ); + {/* FAQ Section */} +
+

+ Frequently Asked Questions +

+
+ + + + + We allow both KiCad and EasyEDA projects, however we + strongly recommend people submit with KiCad. As a bonus, + check out the{" "} + + KiCad-Wakatime + {" "} + plugin to earn doubloons for High Seas. + + } + /> + + A limited handful of people will be eligible to have their + PCB hand soldered by a Hack Club staff member. You can apply + for it on a form. Apply{" "} + + here + {" "} + for the service. + + } + /> + +
{" "} +

+ Any more questions? Ask in{" "} + + #hacky-holidays + + ! +

+
+
+
+ + {/* Footer */} +
+ ); } diff --git a/public/images/code.png b/public/images/code.png new file mode 100644 index 0000000..0212b65 Binary files /dev/null and b/public/images/code.png differ diff --git a/public/images/pcb-view.png b/public/images/pcb-view.png new file mode 100644 index 0000000..bf6de72 Binary files /dev/null and b/public/images/pcb-view.png differ diff --git a/public/images/schematic.png b/public/images/schematic.png new file mode 100644 index 0000000..bc0db70 Binary files /dev/null and b/public/images/schematic.png differ