Skip to content

Commit

Permalink
Merge pull request #3 from Scott170c/dev
Browse files Browse the repository at this point in the history 
12/16 website changes
  • Loading branch information
@Scott170c
Scott170c authored Dec 17, 2024
2 parents fd30499 + 5c9bff8 commit b49264d
Show file tree
Hide file tree
Showing 17 changed files with 889 additions and 509 deletions.
49 changes: 35 additions & 14 deletions app/ModelViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,36 @@
import { useState, useEffect } from 'react';

const ModelViewer = () => {
return (
<model-viewer
src="https://cloud-4ij979j8m-hack-club-bot.vercel.app/0imagetostl.com_3d-hacky-holidays.glb" // Replace with your 3D model file
alt="A 3D model"
camera-controls
disable-zoom
camera-orbit="0deg 0deg 105%"
disable-pan
style={{ width: '25' ,height: '40vh'}}
></model-viewer>
);
};

export default ModelViewer;
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 (
<model-viewer
src="https://cloud-if969vfbm-hack-club-bot.vercel.app/0imagetostl.com_hacky_holidays__3_.glb" // Replace with your 3D model file
alt="A 3D model"
camera-controls
disable-zoom
camera-orbit="0deg 0deg 105%"
disable-pan
style={{ width: '25', height: dimensions.height }}
></model-viewer>
);
};

export default ModelViewer;
227 changes: 104 additions & 123 deletions app/components/3box.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Grid columns={[1, 1, 1, 3]} gap={[20, 20, 20]} sx={{
mt: '3vh',
maxwidth: '20rem',
px: ['0.5rem', '1rem', '1.5rem'],
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.31)',
borderRadius: '1rem',
mx: 'auto',
mb: '5vh',
padding: '2.5vh',
}}>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
mx: '1vw',
paddingTop: ['1rem', '2rem'],
borderRadius: '20px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
padding: '1rem',
overflow: 'hidden',
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
paddingBottom: '1rem',
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Design a PCB</Heading>
<Image sx={{
width: '100%',
height: '300px',
borderRadius: '10px',
paddingBottom: '1rem',
objectFit: 'contain',
}}
src="https://cloud-qonvrpxwd-hack-club-bot.vercel.app/0image.png"
/>
<Text sx={{
fontFamily: 'var(--font-inter)',
fontSize: ['0.8rem', '1rem'],
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Create your own PCB design and bring it to life!</Text>
</Box>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
mx: '1vw',
paddingTop: ['1rem', '2rem'],
borderRadius: '20px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
padding: '1rem',
overflow: 'hidden',
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
paddingBottom: '1rem',
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Design Art</Heading>
<Image sx={{
width: '100%',
height: '300px',
borderRadius: '10px',
paddingBottom: '1rem',
objectFit: 'contain',
}} src="https://cloud-go1uacpkk-hack-club-bot.vercel.app/0image.png" />
<Text sx={{
fontFamily: 'var(--font-inter)',
fontSize: ['0.8rem', '1rem'],
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Create stunning art for your PCB design!</Text>
</Box>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
mx: '1vw',
paddingTop: ['1rem', '2rem'],
borderRadius: '20px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
padding: '1rem',
overflow: 'hidden',
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
paddingBottom: '1rem',
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Create Firmware</Heading>
<Image sx={{
width: '100%',
height: '300px',
borderRadius: '10px',
paddingBottom: '1rem',
objectFit: 'contain',
}}
src="https://cloud-ix9a26xw1-hack-club-bot.vercel.app/0image.png"
/>
<Text sx={{
fontFamily: 'var(--font-inter)',
fontSize: ['0.8rem', '1rem'],
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>Develop firmware to control your PCB!</Text>
</Box>
</Grid>
)
return(
<Grid columns= {[1,1,1,3]}gap = {[50,5,20,0]} sx={{
mt: '5vh',
width: 'fit-content',
minheight: '40vh',
resize: 'both',
px: '3vw',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.31)',
borderRadius: '1rem',
mx: '32px',
mb: '5vh',
padding: '2vh',
}}>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
mx: '1vw',
paddingTop: ['0rem', '2rem'],
borderRadius: '20px',
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
paddingBottom: '1.2rem',
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
} }>Design a PCB</Heading>
<Image sx={{
width:['28vh', '26vw'],
height:['32vh', '28vw'],
borderRadius: '10px',
paddingBottom: '2rem',
fill: 'true'
}}
src = "https://cloud-qonvrpxwd-hack-club-bot.vercel.app/0image.png"
></Image>
</Box>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
flexDirection: 'column',
paddingTop: ['1rem', '2rem'],
mx: '1vw',

textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
color: 'white',
paddingBottom: '1.2rem'
} }>Design Art</Heading>
<Image sx={{
width:['28vh', '26vw'],
height:['32vh', '28vw'],
borderRadius: '10px',
paddingBottom: '2rem'
}} src="https://cloud-go1uacpkk-hack-club-bot.vercel.app/0image.png"></Image>
</Box>
<Box sx={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
mx: '1vw',

flexDirection: 'column',
paddingTop: ['0rem', '2rem'],
}}>
<Heading as="h4" sx={{
fontFamily: 'var(--font-inter)',
fontWeight: 900,
fontSize: ['1rem', '1.5vw'],
paddingBottom: '1.2rem',
color: 'white',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
} }>Create Firmware</Heading>
<Image sx={{
width:['28vh', '26vw'],
height:['32vh', '28vw'],
borderRadius: '10px',
paddingBottom: ['1rem', '2rem']
}}
src = "https://cloud-ix9a26xw1-hack-club-bot.vercel.app/0image.png"
></Image>
</Box>
</Grid>
)
}
export default Threebox;
37 changes: 7 additions & 30 deletions app/components/FAQcard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { Box, Heading, Text } from 'theme-ui';

interface CardProps {
question: string;
Expand All @@ -8,39 +7,17 @@ interface CardProps {

const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
return (
<Box sx={styles.card}>
<Heading as="h3" sx={styles.question}>{question}</Heading>
<Text sx={styles.answer}>{answer}</Text>
</Box>
<div className={styles.card}>
<h3 className={styles.question}>{question}</h3>
<p className={styles.answer}>{answer}</p>
</div>
);
};

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: {
fontSize: ['1.2rem', 'calc(1.2vw + 1.2vh)'],
fontWeight: 790,
color: '#FFFFFF',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
paddingLeft: '2%',
},
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;
32 changes: 7 additions & 25 deletions app/components/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,9 @@
import { Box, Text } from 'theme-ui';

const Footer = () => {
return (
<Box
as="footer"
sx={{
backgroundColor: '#100056',
height: '8vh',
width: '100%',
position: 'absolute',
bottom: '0px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '120%',
fontWeight: 700,
color: '#90C4FF',
py: '10px',
}}
>
<Text>Made with ❤️ by @bright li & @Scott</Text>
</Box>
);
const footer = ()=> {
return (
<footer className="bg-[#100056] h-[8vh] w-full relative flex items-center justify-center text-[120%] font-bold text-[#90C4FF]">
Made with ❤️ by Bright, Scott & Ryan
</footer>
)
}

export default Footer;
export default footer;
Loading

0 comments on commit b49264d

Please sign in to comment.