Skip to content

Commit

Permalink
Merge pull request #2 from LimesKey/main
Browse files Browse the repository at this point in the history 
Better support for mobile & self-hosted markdown guide
  • Loading branch information
@LimesKey
LimesKey authored Dec 17, 2024
2 parents b61c96d + 3601add commit 80b35b8
Show file tree
Hide file tree
Showing 13 changed files with 6,028 additions and 515 deletions.
228 changes: 123 additions & 105 deletions app/components/3box.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,127 @@
import {
Box,
Button,
Image,
Grid,
Heading,
Text,
} from 'theme-ui';
import { Box, Image, Grid, Heading, Text } from 'theme-ui';

const Threebox = () => {
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>
)
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>
)
}
export default Threebox;
22 changes: 9 additions & 13 deletions app/components/FAQcard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,45 @@
import { kMaxLength } from 'buffer';
import React from 'react';
import { Box } from 'theme-ui';
// Define the type for the props
import { Box, Heading, Text } from 'theme-ui';

interface CardProps {
question: string;
answer: string;
}

// Create the component
const FAQcard: React.FC<CardProps> = ({ question, answer }) => {
return (
<Box sx={styles.card}>
<h3 style={styles.question}>{question}</h3>
<p style={styles.answer}>{answer}</p>
<Heading as="h3" sx={styles.question}>{question}</Heading>
<Text sx={styles.answer}>{answer}</Text>
</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'],
width: ['90vw', '60vw', '26vw'],
border: '5px solid rgba(39, 114, 193, 0.42)',
overflow: 'hidden',
},
question: {
fontSize: 'calc(1.2vw + 1.2vh)',
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: 'calc(0.6vw + 0.6vh)',
fontSize: ['1rem', 'calc(0.6vw + 0.6vh)'],
color: '#003180',
marginTop: '8px',
marginTop: '15px',
textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
fontWeight: 600,
paddingLeft: '2%'
paddingLeft: '2%',
},
};

Expand Down
Loading

0 comments on commit 80b35b8

Please sign in to comment.