Skip to content

Commit 69f989f

Browse files
rozwaderrozwader
authored
Merge pull request #10 from Craftserve/rozwader/form-implementation
form review
2 parents 997fc5d + 221f8f9 commit 69f989f

File tree

14 files changed

+534
-98
lines changed

14 files changed

+534
-98
lines changed

‎src/assets/starsIconGroupWhite.svg‎

Lines changed: 110 additions & 0 deletions
Loading

‎src/components/Button.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const buttonClass = variantClassMap[variant] ?? "outlined";
2323
.dark {
2424
color: var(--light);
2525
background-color: var(--dark);
26-
box-shadow: 0px 5px 5px var(--dark);
26+
box-shadow: 0px 5px 5px rgba(12, 12, 12, 0.33);
2727
}
2828

2929
.light {
@@ -43,6 +43,9 @@ const buttonClass = variantClassMap[variant] ?? "outlined";
4343
padding: 15px 30px;
4444
cursor: pointer;
4545
font-weight: 700;
46+
width: 100%;
47+
4648
font-size: var(--fontSize);
49+
font-family: var(--font-ubuntu);
4750
}
4851
</style>

‎src/components/Input.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const props = Astro.props as InputProps;
2020
font-size: 16px;
2121
padding: 8px;
2222
font-family: var(--ubuntu);
23+
width: 100%;
2324
}
2425

2526
.input-container {
@@ -32,6 +33,7 @@ const props = Astro.props as InputProps;
3233
border-bottom: 2px var(--placeholder) solid;
3334
caret-color: var(--placeholder);
3435
transition: all 0.3s ease-in-out;
36+
width: 100%;
3537
}
3638

3739
.input-container:focus-within {

‎src/global.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
:root {
2+
--primaryText: #0c0c0c;
3+
--secondaryText: #ffffff;
24
--dark: #0c0c0cff;
35
--darkDimmed: #0c0c0c2b;
46
--primary: #6809EE;
@@ -7,6 +9,7 @@
79
--secondaryLight: #E1E6F1;
810
--light: #ffffffff;
911
--lightDimmed: #e1e6f14d;
12+
--lightTransparent: #ffffff1a;
1013
--placeholder: #AEB4C2;
1114
--success: #73FF8D;
1215
--warning: #F9FF3C;
@@ -19,5 +22,5 @@ body {
1922
margin: 0;
2023
width: 100%;
2124
height: 100%;
22-
overflow-x: hidden;
25+
scroll-behavior: smooth;
2326
}

‎src/i18n/ui.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@ export const ui = {
1111
"header": "Today is your| day to grow| in ideas.",
1212

1313
"aboutUrl": "about",
14-
"contactUrl": "contact",
14+
"contactUrl": "#formSection",
15+
16+
"name": "Name",
17+
"surname": "Surname",
18+
"phone": "123 456 789",
19+
"subject": "Subject",
20+
"email": "E-mail",
21+
"company": "Company",
22+
"content": "Content",
23+
"send": "Send",
24+
25+
"formTitle": "Achieve Your Business Goals with Vitresoft",
26+
"formDesc": "You will receive a response at the provided email address within 24 hours. We will answer all your questions and propose solutions tailored to your budget."
1527
},
1628
"pl-PL": {
1729
"example": "test po polsku",
@@ -23,6 +35,17 @@ export const ui = {
2335
"header": "Dziś jest Twój| dzień, aby urosnąć| w ideach.",
2436

2537
"aboutUrl": "o-nas",
26-
"contactUrl": "kontakt",
38+
"contactUrl": "#formSection",
39+
40+
"name": "Imię",
41+
"surname": "Nazwisko",
42+
"phone": "123 456 789",
43+
"subject": "Temat",
44+
"email": "E-mail",
45+
"company": "Firma",
46+
"content": "Treść",
47+
"send": "Wyślij",
48+
"formTitle": "Ukończ cele swojej firmy z Vitresoft",
49+
"formDesc": "Otrzymasz odpowiedź na podany adres email w przeciągu 24 godzin. Odpowiemy na wszystkie nurtujące pytania i zaproponujemy rozwiązania do przedstawionego budżetu"
2750
}
2851
} as const;

‎src/pages/en/index.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import Offers from '../../sections/Offers.astro';
77
import Carousel from '../../sections/Carousel.astro';
88
import Icons from '../../sections/Icons.astro';
99
import Table from '../../sections/Table.astro';
10+
import ContactForm from '../../sections/ContactForm.astro';
11+
1012
1113
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
1214
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -20,6 +22,7 @@ import Table from '../../sections/Table.astro';
2022
<Icons />
2123
<Table />
2224
<Carousel />
25+
<ContactForm />
2326
</Layout>
2427

2528
<style>

‎src/pages/index.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Offers from '../sections/Offers.astro';
77
import Icons from '../sections/Icons.astro';
88
import Carousel from '../sections/Carousel.astro';
99
import Table from '../sections/Table.astro';
10+
import ContactForm from '../sections/ContactForm.astro';
1011
1112
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
1213
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -20,6 +21,7 @@ import Table from '../sections/Table.astro';
2021
<Icons />
2122
<Table />
2223
<Carousel />
24+
<ContactForm />
2325
</Layout>
2426

2527
<style>

‎src/sections/ContactForm.astro‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
---
2+
import { Icon } from "astro-icon/components"
3+
import { Image } from "astro:assets"
4+
import LogoDark from "../../src/assets/LogoDark.svg";
5+
import starsIconGroupWhite from "../../src/assets/starsIconGroupWhite.svg";
6+
import Input from "../components/Input.astro";
7+
import Button from "../components/Button.astro";
8+
import { getLangFromUrl, useTranslations } from "../i18n/utils";
9+
10+
const lang = getLangFromUrl(Astro.url);
11+
const t = useTranslations(lang);
12+
13+
---
14+
15+
<div class="wrapper" id="formSection">
16+
<div class="infoWrapper">
17+
<h2 class="infoTitle">{t("formTitle")}</h2>
18+
<p class="infoDesc">{t("formDesc")}</p>
19+
<Image class="infoImage" src={starsIconGroupWhite} alt="stars" width={500} />
20+
</div>
21+
<div class="formWrapper">
22+
<div class="formTopBar">
23+
<Image src={LogoDark} alt="logo" width={30} height={30} />
24+
</div>
25+
<form class="formContainer">
26+
<div class="formSections">
27+
<div class="formTopSection">
28+
<div class="formTopSectionInput">
29+
<Input type="text" placeholder={t("name")} name="name" />
30+
</div>
31+
<div class="formTopSectionInput">
32+
<Input type="text" placeholder={t("surname")} name="surname" />
33+
</div>
34+
<div class="formTopSectionInput">
35+
<Input type="tel" placeholder={t("phone")} name="tel" />
36+
</div>
37+
<div class="formTopSectionInput">
38+
<Input type="text" placeholder={t("subject")} name="subject" />
39+
</div>
40+
</div>
41+
<div class="formBottomSection">
42+
<Input type="email" placeholder={t("email")} name="email" />
43+
<Input type="text" placeholder={t("company")} name="company" />
44+
<Input type="text" placeholder={t("content")} name="content" />
45+
</div>
46+
</div>
47+
<div class="formButtonContainer">
48+
<Button variant="primary" id="formSubmitButton">{t("send")}</Button>
49+
</div>
50+
</form>
51+
</div>
52+
<ul class="contactWrapper">
53+
<li class="contactRow">
54+
<Icon name="uil:phone" />
55+
+123 456 789
56+
</li>
57+
<li class="contactRow borderRow">
58+
<Icon name="uil:envelope-alt" />
59+
[email protected]
60+
</li>
61+
<li class="contactRow">
62+
<Icon name="uil:map-marker" />
63+
ul. Pana Balcera 6/88 20-631 Lublin
64+
</li>
65+
</ul>
66+
</div>
67+
68+
<style>
69+
.wrapper{
70+
width: 900px;
71+
height: 470px;
72+
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: space-between;
76+
77+
position: relative;
78+
79+
border-radius: 30px;
80+
81+
background-image: linear-gradient(45deg, rgba(123, 17, 249, 1), rgba(121, 34, 216, 1) 60%, rgb(64, 64, 217));
82+
color: var(--secondaryText);
83+
padding: 30px;
84+
85+
margin-top: 70px;
86+
}
87+
88+
.infoWrapper{
89+
display: flex;
90+
flex-direction: column;
91+
justify-content: end;
92+
gap: 20px;
93+
94+
width: 50%;
95+
height: 55%;
96+
position: relative;
97+
}
98+
99+
.infoTitle{
100+
font-weight: 500;
101+
font-size: 36px;
102+
text-align: center;
103+
margin: 0;
104+
}
105+
106+
.infoDesc{
107+
font-weight: 400;
108+
font-size: 18px;
109+
color: var(--secondaryText);
110+
opacity: 0.7;
111+
text-align: center;
112+
margin: 0;
113+
}
114+
115+
.infoImage{
116+
position: absolute;
117+
right: -2%;
118+
top: 10%;
119+
opacity: 0.25;
120+
filter: blur(2px);
121+
}
122+
123+
.formWrapper{
124+
width: 45%;
125+
height: 90%;
126+
127+
display: flex;
128+
flex-direction: column;
129+
130+
border-radius: 20px;
131+
132+
position: absolute;
133+
top: 50%;
134+
right: 2.5%;
135+
136+
transform: translateY(-50%);
137+
138+
background-color: var(--light);
139+
}
140+
141+
.formTopBar{
142+
height: 10%;
143+
padding: 20px 20px 0px;
144+
}
145+
146+
.formContainer{
147+
width: 100%;
148+
height: 90%;
149+
display: flex;
150+
flex-direction: column;
151+
justify-content: space-between;
152+
}
153+
154+
.formSections{
155+
display: flex;
156+
flex-direction: column;
157+
}
158+
159+
.formTopSection{
160+
padding: 20px 20px 0px;
161+
162+
display: flex;
163+
flex-direction: row;
164+
flex-wrap: wrap;
165+
justify-content: space-between;
166+
gap: 15px;
167+
}
168+
169+
.formTopSectionInput{
170+
width: 47%;
171+
}
172+
173+
.formBottomSection{
174+
margin-top: 15px;
175+
padding: 0px 20px 20px;
176+
177+
display: flex;
178+
flex-direction: column;
179+
gap: 15px;
180+
}
181+
182+
.formButtonContainer{
183+
padding: 20px;
184+
185+
display: flex;
186+
justify-content: center;
187+
align-items: center;
188+
}
189+
190+
.contactWrapper{
191+
width: 50%;
192+
height: 40%;
193+
194+
display: flex;
195+
flex-direction: column;
196+
gap: 5px;
197+
justify-content: start;
198+
align-items: center;
199+
padding: 0;
200+
margin: 0;
201+
margin-top: 2%;
202+
}
203+
204+
.contactRow{
205+
width: max-content;
206+
padding: 10px;
207+
208+
display: flex;
209+
flex-direction: row;
210+
gap: 5px;
211+
}
212+
213+
.borderRow{
214+
border: 1px solid var(--light);
215+
background-color: var(--lightTransparent);
216+
border-radius: 8px;
217+
}
218+
219+
@media only screen and (max-width: 1115px){
220+
.wrapper{
221+
width: 80%;
222+
height:unset;
223+
padding: 30px;
224+
gap: 30px;
225+
}
226+
227+
.formWrapper{
228+
position: unset;
229+
transform: unset;
230+
}
231+
232+
.infoWrapper, .contactWrapper, .formWrapper{
233+
width: 100%;
234+
}
235+
}
236+
</style>

0 commit comments

Comments
 (0)