diff --git a/app/ModelViewer.js b/app/ModelViewer.js index 7453dc3..eccd272 100644 --- a/app/ModelViewer.js +++ b/app/ModelViewer.js @@ -1,15 +1,36 @@ +import { useState, useEffect } from 'react'; + const ModelViewer = () => { - return ( - - ); - }; - - export default ModelViewer; \ No newline at end of file + const [dimensions, setDimensions] = useState({ width: '100%', height: '30vh' }); + + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 832) { + setDimensions({ width: '50%', height: '40vh' }); + } else if (window.innerWidth >= 640) { + setDimensions({ width: '75%', height: '40vh' }); + } else { + setDimensions({ width: '100%', height: '20vh' }); + } + }; + + window.addEventListener('resize', handleResize); + handleResize(); // Call the function initially to set the dimensions + + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( + + ); +}; + +export default ModelViewer; \ No newline at end of file diff --git a/app/components/3box.tsx b/app/components/3box.tsx index 562ed8f..575faed 100644 --- a/app/components/3box.tsx +++ b/app/components/3box.tsx @@ -1,127 +1,108 @@ -import { Box, Image, Grid, Heading, Text } from 'theme-ui'; +import { + Box, + Button, + Image, + Grid, + Heading, + Text, + } from 'theme-ui'; const Threebox = () => { - return ( - - - Design a PCB - - Create your own PCB design and bring it to life! - - - Design Art - - Create stunning art for your PCB design! - - - Create Firmware - - Develop firmware to control your PCB! - - - ) + return( + + + Design a PCB + + + + Design Art + + + + Create Firmware + + + + ) } export default Threebox; \ No newline at end of file diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx index b839521..159ea5e 100644 --- a/app/components/FAQcard.tsx +++ b/app/components/FAQcard.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Box, Heading, Text } from 'theme-ui'; interface CardProps { question: string; @@ -8,35 +7,17 @@ interface CardProps { const FAQcard: React.FC = ({ question, answer }) => { return ( -
+

{question}

-

{answer}

+

{answer}

); }; 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)', - width: ['90vw', '60vw', '26vw'], - border: '5px solid rgba(39, 114, 193, 0.42)', - overflow: 'hidden', - }, - question: { - "insert tailwind" - }, - answer: { - fontSize: ['1rem', 'calc(0.6vw + 0.6vh)'], - color: '#003180', - marginTop: '15px', - textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', - fontWeight: 600, - paddingLeft: '2%', - }, + card: "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", + question: "text-[1.2rem] md:text-[calc(1.2vw+1.2vh)] font-[790] text-white pl-[2%] [text-shadow:_0_4px_4px_rgb(0_0_0_/_25%)] text-left", + answer: "text-[1rem] md:text-[calc(0.6vw+0.6vh)] text-[#003180] mt-[15px] font-[700] pl-[2%] text-left" }; export default FAQcard; \ No newline at end of file diff --git a/app/components/footer.tsx b/app/components/footer.tsx index baa4679..39d899e 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -6,4 +6,4 @@ const footer = ()=> { ) } -export default Footer; \ No newline at end of file +export default footer; \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index ed2c633..88859d5 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -1,12 +1,10 @@ import dynamic from 'next/dynamic'; -const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); const tipitytopity = ()=> { return ( -
+
{typeof window !== 'undefined' && } {/* import('../ModelViewer'), { ssr: false }); }} /> */}
-

+

Hacky Holidays!

-

- Design a PCB holiday decoration this winter, get one shipped +

+ Design a PCB holiday decoration this winter, get one shipped!

- -
diff --git a/app/guide/General-Info/Getting-Started/gettingStarted.mdx b/app/guide/General-Info/Getting-Started/gettingStarted.mdx new file mode 100644 index 0000000..e69de29 diff --git a/app/guide/General-Info/Getting-Started/page.tsx b/app/guide/General-Info/Getting-Started/page.tsx new file mode 100644 index 0000000..a1530b3 --- /dev/null +++ b/app/guide/General-Info/Getting-Started/page.tsx @@ -0,0 +1,151 @@ +"use client"; +import { keyframes } from '@emotion/react'; +import GuideMD from './gettingStarted.mdx'; +import { MDXProvider } from '@mdx-js/react'; +import components from '../../../components/mdx'; +import { Box } from 'theme-ui'; +import Image from 'next/image'; +import SideBar from "../../../components/SideBar"; +import Link from 'next/link'; + +const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }); + +export default function guide() { + return ( + + {/* Header */} + + + + + + HACKY HOLIDAYS + + + + + + Orpheus Flag + + + + + + + + + + + + + + + + + {/* Sidebar */} + + + + + {/* Main Content */} + + + + + + + + ); +} \ No newline at end of file diff --git a/app/guide/General-Info/generalInfo.mdx b/app/guide/General-Info/generalInfo.mdx new file mode 100644 index 0000000..e69de29 diff --git a/app/guide/General-Info/page.tsx b/app/guide/General-Info/page.tsx new file mode 100644 index 0000000..64cc002 --- /dev/null +++ b/app/guide/General-Info/page.tsx @@ -0,0 +1,151 @@ +"use client"; +import { keyframes } from '@emotion/react'; +import GuideMD from './generalInfo.mdx'; +import { MDXProvider } from '@mdx-js/react'; +import components from '../../components/mdx'; +import { Box } from 'theme-ui'; +import Image from 'next/image'; +import SideBar from "../../components/SideBar"; +import Link from 'next/link'; + +const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }); + +export default function guide() { + return ( + + {/* Header */} + + + + + + HACKY HOLIDAYS + + + + + + Orpheus Flag + + + + + + + + + + + + + + + + + {/* Sidebar */} + + + + + {/* Main Content */} + + + + + + + + ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index c3c4a7d..9e4afa0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -26,11 +26,11 @@ export default function Home() { radius={[2.0, 4.0]} snowflakeCount={100} wind={[-0.1, 0.1]} - style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", zIndex: 1 }} + style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", zIndex: 1}} /> {/* Main Content */} -
+
{/* Header Section */}