Skip to content

Commit 3c8cd48

Browse files
DonatNathanDonatNathan
committed
fix: horizontal scroll on the project idea section
1 parent c441644 commit 3c8cd48

1 file changed

Lines changed: 122 additions & 13 deletions

File tree

‎src/components/ProjectIdea.js‎

Lines changed: 122 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,135 @@ import { Box, Button, Typography } from "@mui/material";
44
import { IoArrowForward } from "react-icons/io5";
55

66
const ProjectIdea = () => {
7+
const { theme } = useContext(ThemeContext);
78

8-
const {theme} = useContext(ThemeContext);
9+
return (
10+
<Box
11+
sx={{
12+
display: "flex",
13+
flexDirection: "column",
14+
justifyContent: "center",
15+
alignItems: "center",
16+
textAlign: "center",
17+
backgroundColor: theme.BackgroundColor,
18+
px: { xs: 2, md: 0 },
19+
py: { xs: 6, md: 10 },
20+
minHeight: "calc(100vh - 120px)",
21+
overflowX: "hidden"
22+
}}
23+
>
24+
<Box
25+
sx={{
26+
width: "100%",
27+
maxWidth: "840px",
28+
p: { xs: 3, sm: 4, md: 5 },
29+
borderRadius: "20px",
30+
backgroundColor: theme.SecondBackgroundColor,
31+
border: `1px solid ${theme.MainColor}`,
32+
boxShadow: `0 24px 60px rgba(0, 0, 0, 0.12)`,
33+
transition: "transform 0.4s ease, box-shadow 0.4s ease",
34+
"&:hover": {
35+
transform: "translateY(-6px)",
36+
boxShadow: `0 32px 80px rgba(0, 0, 0, 0.18)`
37+
}
38+
}}
39+
>
40+
<Typography
41+
sx={{
42+
fontSize: 14,
43+
sm: 16,
44+
fontWeight: "bold",
45+
color: theme.MainColor,
46+
letterSpacing: "2px",
47+
textTransform: "uppercase",
48+
mb: 2
49+
}}
50+
>
51+
Request accepted
52+
</Typography>
953

10-
return(
11-
<Box sx={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", backgroundColor: theme.BackgroundColor, paddingTop: "80px", paddingBottom: "80px", minHeight: "calc(100vh - 120px)"}}>
12-
<Box sx={{maxWidth: "840px", width: "100%", padding: "40px", borderRadius: "20px", backgroundColor: theme.SecondBackgroundColor, border: `1px solid ${theme.MainColor}`, boxShadow: `0 24px 60px rgba(0, 0, 0, 0.12)`, transition: "transform 0.4s ease, box-shadow 0.4s ease", '&:hover': {transform: 'translateY(-6px)', boxShadow: `0 32px 80px rgba(0, 0, 0, 0.18)`}}}>
13-
<Typography sx={{fontSize: 16, fontWeight: "bold", color: theme.MainColor, letterSpacing: "2px", textTransform: "uppercase", marginBottom: "18px"}}>Request accepted</Typography>
14-
<Typography sx={{fontSize: {xs: 32, md: 44}, fontWeight: "bold", color: theme.BoldTextColor, marginBottom: "20px", lineHeight: 1.05}}>
54+
<Typography
55+
sx={{
56+
fontSize: { xs: 26, sm: 34, md: 44 },
57+
fontWeight: "bold",
58+
color: theme.BoldTextColor,
59+
mb: 2,
60+
lineHeight: 1.1,
61+
px: { xs: 1, sm: 0 }
62+
}}
63+
>
1564
I can build whatever you want.
1665
</Typography>
17-
<Typography sx={{fontSize: 16, color: theme.ClassicTextColor, lineHeight: 1.8, marginBottom: "30px", maxWidth: "680px", marginX: "auto"}}>
18-
From Palantir Foundry platforms to websites, mobile apps and custom software, I create the tools that make decisions easier, faster and more reliable.
66+
67+
<Typography
68+
sx={{
69+
fontSize: { xs: 14, sm: 16 },
70+
color: theme.ClassicTextColor,
71+
lineHeight: 1.7,
72+
mb: 4,
73+
maxWidth: "680px",
74+
mx: "auto"
75+
}}
76+
>
77+
From Palantir Foundry platforms to websites, mobile apps and custom software,
78+
I create the tools that make decisions easier, faster and more reliable.
1979
</Typography>
20-
<Box sx={{display: "flex", justifyContent: "center", flexWrap: "wrap", gap: "10px", marginBottom: "35px"}}>
21-
{['Foundry', 'Web', 'Mobile', 'Software'].map((tag) => (
22-
<Box key={tag} sx={{padding: "10px 18px", borderRadius: "999px", backgroundColor: theme.BackgroundColor, color: theme.BoldTextColor, fontSize: 12, fontWeight: "bold", letterSpacing: "1px", textTransform: "uppercase", border: `1px solid ${theme.SecondBackgroundColor}`}}>{tag}</Box>
80+
81+
<Box
82+
sx={{
83+
display: "flex",
84+
justifyContent: "center",
85+
flexWrap: "wrap",
86+
gap: 1.2,
87+
mb: 4
88+
}}
89+
>
90+
{["Foundry", "Web", "Mobile", "Software"].map((tag) => (
91+
<Box
92+
key={tag}
93+
sx={{
94+
px: { xs: 1.5, sm: 2 },
95+
py: 1,
96+
borderRadius: "999px",
97+
backgroundColor: theme.BackgroundColor,
98+
color: theme.BoldTextColor,
99+
fontSize: 12,
100+
fontWeight: "bold",
101+
letterSpacing: "1px",
102+
textTransform: "uppercase",
103+
border: `1px solid ${theme.SecondBackgroundColor}`
104+
}}
105+
>
106+
{tag}
107+
</Box>
23108
))}
24109
</Box>
25-
<Button href="#contact" sx={{width: "fit-content", backgroundColor: theme.MainColor, color: theme.BackgroundColor, textTransform: "uppercase", fontSize: 14, padding: "14px 34px", fontWeight: "bold", letterSpacing: "1px", border: `1px solid ${theme.MainColor}`, transition: "background-color 0.3s ease, transform 0.3s ease", '&:hover': {backgroundColor: theme.BackgroundColor, color: theme.BoldTextColor, transform: 'translateY(-2px)', border: `1px solid ${theme.MainColor}`}}}>
26-
Start the build <IoArrowForward style={{marginLeft: "10px"}} size={20} />
110+
111+
<Button
112+
href="#contact"
113+
sx={{
114+
width: "fit-content",
115+
maxWidth: "100%",
116+
backgroundColor: theme.MainColor,
117+
color: theme.BackgroundColor,
118+
textTransform: "uppercase",
119+
fontSize: 14,
120+
px: { xs: 3, sm: 4 },
121+
py: 1.5,
122+
fontWeight: "bold",
123+
letterSpacing: "1px",
124+
border: `1px solid ${theme.MainColor}`,
125+
transition: "all 0.3s ease",
126+
"&:hover": {
127+
backgroundColor: theme.BackgroundColor,
128+
color: theme.BoldTextColor,
129+
transform: "translateY(-2px)",
130+
border: `1px solid ${theme.MainColor}`
131+
}
132+
}}
133+
>
134+
Start the build
135+
<IoArrowForward style={{ marginLeft: "10px" }} size={20} />
27136
</Button>
28137
</Box>
29138
</Box>

0 commit comments

Comments
 (0)