Skip to content

Commit 5854fab

Browse files
jymarkbjymarkb
authored
Merge pull request #43 from jymarkb/feat-contact-page
Feat contact page
2 parents 6713b1c + 0f45047 commit 5854fab

File tree

6 files changed

+318
-80
lines changed

6 files changed

+318
-80
lines changed

‎app/Resources/css/contact/contact.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import '/assets/styles/app.css';
2+
@import '../home/header.css';
3+
4+
body {
5+
background-color: hsl(var(--background) / 0.6);
6+
}
7+
8+
.border-grid {
9+
border-style: dashed;
10+
border-color: hsl(var(--border-theme) / 0.3);
11+
}
12+
13+
14+
.bg-contact {
15+
background: linear-gradient(
16+
135deg,
17+
hsl(176, 43%, 45%) 0%,
18+
hsl(176, 43%, 47%) 40%,
19+
hsl(176, 43%, 53%) 60%,
20+
hsl(176, 43%, 55%) 100%
21+
);
22+
color: #F5F5F5;
23+
border-bottom: 8px solid transparent;
24+
border-image: repeating-linear-gradient(
25+
to right,
26+
#fafafa 0 10px,
27+
transparent 10px 20px
28+
);
29+
border-image-slice: 1;
30+
}
31+
32+
.banner{
33+
background: linear-gradient(
34+
135deg,
35+
hsl(176, 43%, 45%) 0%,
36+
hsl(176, 43%, 47%) 40%,
37+
hsl(176, 43%, 53%) 60%,
38+
hsl(176, 43%, 55%) 100%
39+
);
40+
}
41+
42+
@media (min-width: 768px) {
43+
.bg-contact{
44+
border-bottom: 0px;
45+
border-right: 8px solid transparent;
46+
border-image: repeating-linear-gradient(
47+
to bottom,
48+
#fafafa 0 10px,
49+
transparent 10px 20px
50+
);
51+
border-image-slice: 1;
52+
}
53+
}
54+
55+
.faq-text{
56+
height: 0;
57+
opacity: 0;
58+
border-top-width: 1px;
59+
}
60+
61+
.faq-text.show{
62+
height: auto;
63+
margin-top: 0.5rem;
64+
padding-top: 0.5rem;
65+
opacity: 1;
66+
}
67+
68+
@media (min-width: 1536px) {
69+
70+
.faq-container{
71+
padding-right: 52rem;
72+
}
73+
}

‎app/Resources/js/contact/contact.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import { Popup } from '../dashboard/components/Popup';
3+
import { MobileHeader } from '../home/component/MobileHeader';
4+
import ToastMessage from '../dashboard/components/ToastMessage';
5+
import { toast } from 'sonner';
6+
class Contact {
7+
constructor() {
8+
this.init();
9+
}
10+
11+
init() {
12+
Popup({
13+
btnTrigger: 'headerBtn',
14+
isFilter: false,
15+
popUpdata: <MobileHeader />,
16+
});
17+
ToastMessage();
18+
19+
this.initSubmitForm();
20+
this.initFAQbutton();
21+
}
22+
23+
initSubmitForm() {
24+
const form = document.getElementById('google-form') as HTMLFormElement;
25+
form.addEventListener('submit', (e) => {
26+
e.preventDefault();
27+
28+
const formData = new FormData(form);
29+
30+
try {
31+
fetch(form.action, {
32+
method: 'POST',
33+
mode: 'no-cors',
34+
body: formData,
35+
});
36+
37+
toast.success('Success: Form Submit', {
38+
description: (
39+
<p className="text-sm font-semibold text-green-900">
40+
Thank you! We&apos;ll be in touch soon.
41+
</p>
42+
),
43+
});
44+
45+
form.reset();
46+
} catch (error) {
47+
toast.error('Error: Form Submit', {
48+
description: (
49+
<div>
50+
<p className="text-red-900">Cannot submit form at the moment.</p>
51+
<p>{`${error}`}</p>
52+
</div>
53+
),
54+
});
55+
}
56+
});
57+
}
58+
59+
initFAQbutton() {
60+
const faqWrapper = document.getElementById(
61+
'faq-row-wrapper',
62+
) as HTMLElement;
63+
64+
faqWrapper.addEventListener('click', (e: MouseEvent) => {
65+
const target = e.target as HTMLElement;
66+
const btnTarget = target.closest('button');
67+
68+
if (!btnTarget) {
69+
return;
70+
}
71+
72+
const targetP = btnTarget.parentElement
73+
?.nextElementSibling as HTMLElement;
74+
75+
if (!targetP) {
76+
return;
77+
}
78+
79+
target.classList.toggle('icon-chevron-down');
80+
target.classList.toggle('icon-chevron-up');
81+
targetP.classList.toggle('show');
82+
});
83+
}
84+
}
85+
86+
new Contact();

‎assets/styles/custom-lucide.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,6 @@
6767
.icon-facebook:before { content: "\e0c0"; }
6868
.icon-github:before { content: "\e0e9"; }
6969
.icon-linkedin:before { content: "\e10a"; }
70+
.icon-send:before { content: "\e155"; }
71+
.icon-chevron-down:before { content: "\e071"; }
72+
.icon-chevron-up:before { content: "\e074"; }

‎templates/base.html.twig

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="apple-mobile-web-app-status-bar-style" content="default">
68
<title>
79
{% block title %}Welcome!
810
{% endblock %}
@@ -16,10 +18,10 @@
1618
{% endblock %}
1719

1820
</head>
19-
<body id="mainBody">
21+
<body id="mainBody" >
2022

2123

22-
<div id="bodyWrapper" class="transition-transform duration-500 transform">
24+
<div id="bodyWrapper" class="transition-transform duration-500 transform bg-white">
2325
{% block header %}{% endblock %}
2426
{% block body %}{% endblock %}
2527
{% block footer %}{% endblock %}

0 commit comments

Comments
 (0)