Skip to content

Commit 1a872ac

Browse files
ChloeXiao0409sgumingCopilot
authored
Dis 27 landing page hero section chloe (#16)
* done the strucrure * Chloe-HeroSection-v1-structure-demo-image * Chloe_Update_Hero_Page_v2 * Update_pnpm * Update src/components/features/landing/HeroSection.tsx Co-authored-by: Copilot <[email protected]> * next-version-change-back * pnpm_update * hero-section-with-global-theme * Update-hero-styled-components * Update-h1-responsive * update-pnpm * landing-page-structure-updated * bugfix-merge-conflict --------- Co-authored-by: Depeng Sun <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent bc0e47a commit 1a872ac

File tree

5 files changed

+139
-12
lines changed

5 files changed

+139
-12
lines changed

‎public/demo-image.png‎

1.67 MB
Loading

‎src/app/landing/components/HeroSection.tsx‎

Lines changed: 131 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,134 @@
1+
"use client";
2+
3+
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
4+
import { styled } from '@mui/material/styles';
5+
import * as React from 'react';
6+
7+
import CommonButton from '@/components/ui/CommonButton';
8+
9+
const StyledContainer = styled('div')`
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
padding-top: ${({ theme }) => theme.spacing(12)};
14+
padding-bottom: ${({ theme }) => theme.spacing(12)};
15+
16+
@media (min-width: ${({ theme }) => theme.breakpoints.values.xs}px) {
17+
padding-top: ${({ theme }) => theme.spacing(10)};
18+
padding-bottom: ${({ theme }) => theme.spacing(10)};
19+
}
20+
`;
21+
22+
const StyledStack = styled('div')`
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
gap: ${({ theme }) => theme.spacing(1)};
27+
width: 70%;
28+
29+
@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
30+
width: 100%;
31+
}
32+
`;
33+
34+
const StyledHeader = styled('h1')`
35+
display: flex;
36+
align-items: center;
37+
color: ${({ theme }) => theme.palette.text.primary};
38+
font-size: ${({ theme }) => theme.typography.h1.fontSize};
39+
font-family: ${({ theme }) => theme.typography.h1.fontFamily};
40+
font-weight: ${({ theme }) => theme.typography.h1.fontWeight};
41+
margin: 0;
42+
43+
@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
44+
font-size: ${({ theme }) => theme.typography.h3.fontSize};
45+
}
46+
47+
@media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
48+
font-size: ${({ theme }) => theme.typography.h2.fontSize};
49+
}
50+
51+
@media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
52+
font-size: ${({ theme }) => theme.typography.h1.fontSize};
53+
}
54+
`;
55+
56+
const StyledTypographyBody = styled('p')`
57+
text-align: center;
58+
color: ${({ theme }) => theme.palette.text.primary};
59+
margin: 32px 0;
60+
font-size: ${({ theme }) => theme.typography.body1.fontSize};
61+
font-family: ${({ theme }) => theme.typography.fontFamily};
62+
63+
@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
64+
font-size: ${({ theme }) => theme.typography.body2.fontSize};
65+
min-width: 1000px;
66+
}
67+
`;
68+
69+
const ButtonStack = styled('div')`
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: center;
73+
align-items: center;
74+
gap: ${({ theme }) => theme.spacing(7)};
75+
padding-top: ${({ theme }) => theme.spacing(2)};
76+
77+
@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
78+
flex-direction: row;
79+
width: 100%;
80+
}
81+
`;
82+
83+
const StyledDemoBox = styled('div')`
84+
align-self: center;
85+
background-color: ${({ theme }) => theme.palette.background.default};
86+
border-radius: ${({ theme }) => theme.shape.borderRadius};
87+
border: 1px solid ${({ theme }) => theme.palette.grey[200]};
88+
box-shadow: 0 0 12px 8px hsla(220, 25%, 80%, 0.2);
89+
background-image: url('/demo-image.png');
90+
background-size: cover;
91+
background-position: center;
92+
93+
@media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
94+
width: 900px;
95+
height: 530px;
96+
margin-top: ${({ theme }) => theme.spacing(10)};
97+
}
98+
99+
@media (max-width: ${({ theme }) => theme.breakpoints.values.xs}px) {
100+
width: 700px;
101+
height: 530px;
102+
}
103+
`;
104+
1105
export default function HeroSection() {
2106
return (
3-
<>
4-
<p>hero section</p>
5-
</>
107+
<StyledContainer>
108+
<StyledStack>
109+
<StyledHeader>
110+
Let&nbsp;AI&nbsp;Handle&nbsp;Your&nbsp;Calls
111+
</StyledHeader>
112+
<StyledHeader>
113+
Focus&nbsp;on&nbsp;Growing&nbsp;Your&nbsp;Business
114+
</StyledHeader>
115+
<StyledTypographyBody>
116+
SmartAgent is your 24/7 virtual phone assistant for rental managers, plumbers, contractors,
117+
and small businesses.<br />
118+
Answer calls, schedule follow-ups, and automate workflows&nbsp;—&nbsp;no human effort needed.
119+
</StyledTypographyBody>
120+
<ButtonStack>
121+
<CommonButton buttonVariant="black" endIcon={<ArrowForwardIcon />}>
122+
Start Your Free Trial
123+
</CommonButton>
124+
<CommonButton buttonVariant="green" endIcon={<ArrowForwardIcon />}>
125+
Request a Demo
126+
</CommonButton>
127+
</ButtonStack>
128+
</StyledStack>
129+
<StyledDemoBox />
130+
</StyledContainer>
6131
);
7-
}
132+
}
133+
134+

‎src/components/providers/ThemeProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ export default function ThemeProvider({ children }: { children: React.ReactNode
1111
{children}
1212
</MuiThemeProvider>
1313
);
14-
}
14+
}

‎src/components/ui/CommonButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function CommonButton({
3939
buttonVariant = 'black',
4040
sx,
4141
...rest
42-
}: CommonButtonProps) {
42+
}: CommonButtonProps) {
4343
return (
4444
<StyledButton
4545
variant="contained"

‎src/theme/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
import { createTheme, responsiveFontSizes } from '@mui/material/styles';
33

44
let theme = createTheme({
5-
spacing: 8,
5+
spacing: 8,
66

77
shape: {
8-
borderRadius: 12,
8+
borderRadius: 12,
99
},
1010

1111
palette: {
1212
background: {
13-
default: '#ffffff',
14-
paper: '#fafafa',
13+
default: '#ffffff', // white
14+
paper: '#fafafa', // light grey
1515
},
1616
text: {
17-
primary: '#060606',
18-
secondary: '#6d6d6d',
17+
primary: '#060606', // black
18+
secondary: '#6d6d6d', // grey
1919
},
2020
},
2121

0 commit comments

Comments
 (0)