Skip to content

Commit fc45ffc

Browse files
cd-bashcd-bash
committed
feat: [#85] Home page first integration
1 parent ecc1e0a commit fc45ffc

File tree

7 files changed

+269
-108
lines changed

7 files changed

+269
-108
lines changed

‎src/views/utils/call-to-action.ts‎ renamed to ‎src/views/common/call-to-action/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { createPixelGridBackground } from "./backgrounds-utils";
2-
import { writeTitle, writeParagraph, createMainButton, MainButtonOptions, createWrapper } from "./";
1+
import "./styles.css";
2+
import { createPixelGridBackground } from "../../utils/backgrounds-utils";
3+
import { writeTitle, writeParagraph, createMainButton, MainButtonOptions, createWrapper } from "../../utils";
34

45
export type CallToActionOptions = {
56
header: string;

‎src/views/common/call-to-action/styles.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.cta-banner.pixel-banner {
2+
position: relative;
3+
width: 100%;
4+
text-align: left;
5+
overflow: hidden;
6+
}
7+
8+
.cta-banner.pixel-banner .cta-background {
9+
position: absolute;
10+
top: 50%;
11+
left: 50%;
12+
transform: translate(-50%, -50%);
13+
z-index: -5;
14+
width: 100%;
15+
height: 100%;
16+
opacity: 0.6;
17+
}
18+
19+
.cta-banner.pixel-banner article {
20+
z-index: 2;
21+
padding: clamp(30px, 8vw, 50px);
22+
background-color: white;
23+
width: fit-content;
24+
25+
display: grid;
26+
grid-template-columns: auto auto;
27+
gap: clamp(50px, 15vw, 150px);
28+
align-items: center;
29+
30+
p {
31+
color: black;
32+
}
33+
34+
.text-container {
35+
display: flex;
36+
flex-direction: column;
37+
gap: clamp(15px, 4vw, 20px);
38+
max-width: clamp(400px, 80vw, 600px);
39+
}
40+
41+
ul {
42+
list-style: none;
43+
padding: 0;
44+
margin: 0;
45+
display: flex;
46+
flex-direction: row;
47+
gap: clamp(15px, 4vw, 20px);
48+
flex-wrap: wrap;
49+
}
50+
}
51+
52+
.cta-banner.pixel-banner article.right {
53+
margin-left: auto;
54+
justify-content: end;
55+
56+
&::before {
57+
content: '';
58+
position: absolute;
59+
top: 0;
60+
right: 0;
61+
width: clamp(15vw, 20vw, 25vw);
62+
height: 100%;
63+
background-color: white;
64+
z-index: -1;
65+
}
66+
}
67+
68+
.cta-banner.pixel-banner article.left {
69+
margin-right: auto;
70+
justify-content: start;
71+
72+
&::before {
73+
content: '';
74+
position: absolute;
75+
top: 0;
76+
left: 0;
77+
width: clamp(15vw, 20vw, 25vw);
78+
height: 100%;
79+
background-color: white;
80+
z-index: -1;
81+
}
82+
}
83+
84+
/* Media Queries for enhanced mobile experience */
85+
@media (max-width: 1500px) {
86+
.cta-banner.pixel-banner {
87+
background-color: white;
88+
}
89+
.cta-banner.pixel-banner .cta-background{
90+
display: none;
91+
}
92+
}
93+
94+
@media (max-width: 768px) {
95+
.cta-banner.pixel-banner article {
96+
grid-template-columns: 1fr;
97+
gap: clamp(30px, 8vw, 40px);
98+
padding: clamp(25px, 6vw, 40px);
99+
width: 90%;
100+
margin: 0 auto;
101+
text-align: center;
102+
103+
.text-container {
104+
max-width: 100%;
105+
}
106+
107+
ul {
108+
justify-content: center;
109+
flex-direction: column;
110+
align-items: center;
111+
gap: clamp(12px, 3vw, 15px);
112+
}
113+
}
114+
115+
.cta-banner.pixel-banner article.right,
116+
.cta-banner.pixel-banner article.left {
117+
margin: 0 auto;
118+
justify-content: center;
119+
120+
&::before {
121+
width: 100%;
122+
left: 0;
123+
right: 0;
124+
}
125+
}
126+
}
127+
128+
@media (max-width: 480px) {
129+
.cta-banner.pixel-banner article {
130+
width: 95%;
131+
padding: clamp(20px, 5vw, 30px);
132+
gap: clamp(20px, 6vw, 30px);
133+
134+
ul {
135+
width: 100%;
136+
137+
li {
138+
width: 100%;
139+
}
140+
}
141+
}
142+
}

‎src/views/home/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './styles.css';
2-
import {arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle, CallToActionOptions, createPixelBannerCTA} from "../utils";
2+
import { arrowButton, createVideoBackground, createWrapper, writeParagraph, writeTitle } from "../utils";
3+
import { CallToActionOptions, createPixelBannerCTA } from '../common/call-to-action';
34
import {SectionContent, createContentSection} from "./contentSection";
45
import {homePageContent} from "../../content/home";
56

‎src/views/home/styles.css‎

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
}
66

77
h2 {
8-
margin-bottom: 50px;
8+
margin-bottom: clamp(30px, 5vw, 50px);
99
}
1010

1111
section {
1212
width: 100%;
1313
min-height: 100vh;
1414
height: 100vh;
1515
margin: 0;
16-
padding: 0;
16+
padding: 0 clamp(1rem, 5vw, 2rem);
1717
box-sizing: border-box;
1818
background-size: cover;
1919
background-position: center;
@@ -22,29 +22,30 @@
2222
.highlight {
2323
text-decoration: underline;
2424
text-decoration-color: #3BFFC5;
25-
text-underline-offset: 20px;
25+
text-underline-offset: clamp(5px, 3vw, 20px);
2626
}
2727

2828
.hook {
2929
h1, p {
3030
text-shadow: 0 4px 55px rgba(0, 0, 0, 0.65);
31-
max-width: 1160px;
31+
max-width: min(1160px, 90vw);
3232
}
3333

3434
article {
35-
margin: 0 15%;
35+
margin: 0 clamp(5%, 15vw, 15%);
3636
display: flex;
3737
text-align: center;
3838
flex-direction: column; /* Stack children vertically */
3939
justify-content: center;
4040
align-items: center;
4141
height: 100vh;
42+
padding: clamp(1rem, 5vw, 2rem);
4243

4344
p {
44-
font-size: 1.5em;
45-
margin-top: 75px;
46-
margin-bottom: 20px;
47-
max-width: 630px;
45+
font-size: clamp(1.1em, 3vw, 1.5em);
46+
margin-top: clamp(30px, 8vw, 75px);
47+
margin-bottom: clamp(15px, 3vw, 20px);
48+
max-width: min(630px, 80vw);
4849
}
4950
}
5051
}
@@ -67,29 +68,87 @@
6768
position: relative;
6869
z-index: 2; /* Above the pixel grid */
6970
display: flex;
70-
width: 40%;
71+
width: clamp(600px, 50%, 900px);
7172
flex-direction: column;
7273
justify-content: center;
7374
align-items: flex-start;
7475
height: 100vh;
76+
padding: clamp(1rem, 5vw, 2rem);
7577
}
7678

7779
&.right article {
7880
margin-left: auto;
7981
}
8082

8183
p {
82-
max-width: 60%;
83-
margin-bottom: 30px;
84+
max-width: clamp(500px, 90%, 750px);
85+
margin-bottom: clamp(20px, 4vw, 30px);
8486
text-align: left;
87+
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
8588
}
8689

8790
.buttons-container {
8891
display: flex;
89-
gap: 20px;
92+
flex-wrap: wrap;
93+
gap: clamp(10px, 3vw, 20px);
9094
list-style: none;
9195
padding: 0;
9296
margin: 0;
9397
}
9498
}
99+
100+
/* Media Queries for better mobile experience */
101+
@media (max-width: 768px) {
102+
section {
103+
height: auto;
104+
min-height: 100vh;
105+
padding: 0;
106+
}
107+
108+
.hook article {
109+
margin: 0 5%;
110+
padding: 0;
111+
}
112+
113+
.content-section {
114+
article {
115+
width: 90%;
116+
padding: 0;
117+
text-align: center;
118+
align-items: center;
119+
}
120+
121+
&.right article {
122+
margin-left: auto;
123+
margin-right: auto;
124+
}
125+
126+
p {
127+
max-width: 100%;
128+
text-align: center;
129+
}
130+
131+
.buttons-container {
132+
justify-content: center;
133+
width: 100%;
134+
}
135+
}
136+
}
137+
138+
@media (max-width: 480px) {
139+
.hook article {
140+
margin: 0;
141+
padding: 0;
142+
}
143+
144+
.content-section article {
145+
width: 100%;
146+
padding: 0;
147+
}
148+
149+
.buttons-container {
150+
flex-direction: column;
151+
align-items: center;
152+
}
153+
}
95154
}

‎src/views/utils/buttons.ts‎ renamed to ‎src/views/utils/buttons-utils.ts‎

File renamed without changes.

‎src/views/utils/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
export * from "./text-utils.ts";
44
export * from "./visual-utils.ts";
55
export * from "./backgrounds-utils.ts";
6-
export * from "./buttons.ts";
7-
export * from "./call-to-action.ts";
6+
export * from "./buttons-utils.ts";
87

98
// ------------------------------------------------------------------------
109

0 commit comments

Comments
 (0)