diff --git a/app/components/3box.tsx b/app/components/3box.tsx new file mode 100644 index 0000000..0a524db --- /dev/null +++ b/app/components/3box.tsx @@ -0,0 +1,107 @@ +import { + Box, + Button, + Image, + Grid, + Heading, + Text, + } from 'theme-ui'; + +const Threebox = () => { + return( + + + Build + + + + + Design + + + + Code + + + + ) +} +export default Threebox; \ No newline at end of file diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx new file mode 100644 index 0000000..5d62192 --- /dev/null +++ b/app/components/FAQcard.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +// 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: { + border: '1px solid #ddd', + borderRadius: '20px', + padding: '16px', + margin: '16px', + backgroundColor: 'rgba(201, 227, 255, 0.73)', + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', + height: '16vw', + width: '25vw', + border: '5px solid rgba(39, 114, 193, 0.42)', + overflow: 'hidden', + }, + question: { + fontSize: '2.1rem', + fontWeight: 600, + color: '#FFFFFF', + textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', + }, + answer: { + fontSize: '1.1rem', + color: '#003180', + marginTop: '8px', + textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', + fontWeight: 600, + }, +}; + +export default FAQcard; \ No newline at end of file diff --git a/app/components/footer.tsx b/app/components/footer.tsx new file mode 100644 index 0000000..1c464ba --- /dev/null +++ b/app/components/footer.tsx @@ -0,0 +1,32 @@ +import { + Box, + Button, + Image, + Grid, + Heading, + Text, + } from 'theme-ui'; + + const footer = ()=> { + return ( + + ) +} +export default footer; \ No newline at end of file diff --git a/app/components/middle.tsx b/app/components/middle.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/components/top.tsx b/app/components/top.tsx new file mode 100644 index 0000000..5118003 --- /dev/null +++ b/app/components/top.tsx @@ -0,0 +1,104 @@ +import { + Box, + Button, + Image, + Grid, + Heading, + Text, + } from 'theme-ui'; + import dynamic from 'next/dynamic'; + + const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); + + const tipitytopity = ()=> { + return ( + + {typeof window !== 'undefined' && } + {/* + Example PCB! */} + + + Hacky Holidays + + + Design a PCB holiday decoration this winter, get a PCB grant! + + + + + + + + + + ) +} +export default tipitytopity; \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 103bf69..f2b01ed 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,17 +2,6 @@ @tailwind components; @tailwind utilities; -:root { - --background: hsl(204, 100%, 87%); - --foreground: #ffffff; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #BEE5FF; - --foreground: #ededed; - } -} @font-face { font-family: 'Inter'; src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('ttf'); @@ -23,7 +12,11 @@ } body { - color: var(--foreground); - background: var(--background); + color: #FFFFFF; + background: var(linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))); font-family: Arial, Helvetica, sans-serif; + height: 100vh; + margin: 0; + background-repeat: no-repeat; + background-attachment: fixed; } diff --git a/app/layout.tsx b/app/layout.tsx index 34923c3..2d58199 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,15 @@ import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; +import { + Box, + Button, + Container, + Image, + Grid, + Heading, + Text, +} from 'theme-ui'; const geistSans = localFont({ src: "./fonts/GeistVF.woff", @@ -19,7 +28,7 @@ const inter = localFont({ }) export const metadata: Metadata = { - title: "Create Next App", + title: "Hacky Holidays", description: "Generated by create next app", }; diff --git a/app/page.tsx b/app/page.tsx index 2f65fc8..fee0156 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,18 +6,23 @@ import { keyframes } from '@emotion/react'; // import '@google/model-viewer'; // import Script from 'next/script'; import { useEffect } from 'react'; - +// import { tipitytopity } from './components/top' // import Image from "next/image"; import { Box, Button, + Container, Image, Grid, Heading, Text, } from 'theme-ui'; -import dynamic from 'next/dynamic'; +import Footer from './components/footer'; +import dynamic from 'next/dynamic'; +const Top = dynamic(() => import('./components/top'), { ssr: false }); +import FAQcard from './components/FAQcard'; +const ThreeGrid = dynamic(() => import('./components/3box'), { ssr: false }); // const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); @@ -39,9 +44,40 @@ export default function Home() { } }, []); return ( + + background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))', + // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))', + // // height: 'auto', + // display: 'block', + // display: 'flex', + // flexDirection: 'column', + // height:"100%", + // alignItems: 'center', + minHeight: '280vh', + // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))', + // display: 'grid', + // gridTemplateRows: 'auto auto 1fr auto', // Allows more explicit control + // minHeight: '100vh', + + + // display: 'flex', + // minHeight: '100vh', // Ensure it covers at least the viewport height + // padding: '20px', + // display: 'flex', + // flexDirection: 'column', + // alignItems: 'center', + // justifyContent: 'flex-start', // Ensure content starts from the top + + // flexDirection: 'column', + // alignItems: 'center', + // justifyContent: 'flex-start', // Ensure content starts from the top + + // flexDirection: 'column', + + // overflow: 'auto', + // padding:'20px', + }}> ( - - ❄ - - ))} */} + {Array.from({ length: 50 }).map((_, index) => { const randomRotationDirection = Math.random() > 0.5 ? 1 : -1; const randomSpeed = Math.random() * 10 + 5; @@ -103,106 +127,15 @@ export default function Home() { ) })} - - - {typeof window !== 'undefined' && } - {/* - Example PCB! */} - - - Hacky Holidays! - - - Design a PCB holiday decoration this winter, get a PCB grant! - - - - - + - - Design a unique PCB decoration from scratch and submit it to the project gallery via a pull request in the GitHub repository before [set date]!

+ }}>Design a unique PCB decoration (all art made by you!) from scratch and submit it to the project gallery via a pull request in the GitHub repository before [set date]!

Once your PR gets approved, you can get your PCB decoration shipped just in time for the holidays!🎄 - - - Design - - - - - Code - - - - Submit - - - - - - - - - FAQ: - - Hello World - - - Made with ❤️ and ❄️ by Bright Li (@bright li) & Scott Chiang (@Scott) - - + + + + Submissions will be peer-reviewed in the categories of Best Creative Design, Most Technically Impressive, and Spookiest Halloween Theme — no extensive experience required. The top voted 10% of entries per catagory will receive a $100 grant to manufacture their PCB and purchase additional hardware or electronics. Get inspired by Halloween themes such as costumes and animatronic props, and incorporate them into your design. + + + + + + + + + + ); } diff --git a/package-lock.json b/package-lock.json index eea8396..8d26f8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5478,6 +5478,7 @@ "version": "15.0.3", "resolved": "https://registry.npmjs.org/next/-/next-15.0.3.tgz", "integrity": "sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw==", + "license": "MIT", "dependencies": { "@next/env": "15.0.3", "@swc/counter": "0.1.3", diff --git a/public/design.png b/public/design.png new file mode 100644 index 0000000..2291f91 Binary files /dev/null and b/public/design.png differ