Skip to content

Commit a8d26e2

Browse files
webstackdevwebstackdev
committed
Scaffold support page props
1 parent 42a93fb commit a8d26e2

11 files changed

Lines changed: 253 additions & 202 deletions

File tree

‎src/components/Forms/Contact/index.astro‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ import './uppy-core.css'
66
import './uppy-dashboard.css'
77
import './uppy-webcam.css'
88
import './validation.css'
9+
10+
export type Props = {
11+
content: {
12+
title: string
13+
message: string
14+
}
15+
}
16+
17+
const { content } = Astro.props
918
---
1019

1120
<contact-form>

src/components/Pages/Preferences/client/__tests__/index.spec.ts renamed to src/components/Pages/Consent/client/__tests__/index.spec.ts

File renamed without changes.

src/components/Pages/Preferences/client/__tests__/selectors.spec.ts renamed to src/components/Pages/Consent/client/__tests__/selectors.spec.ts

File renamed without changes.

src/components/Pages/Preferences/client/index.ts renamed to src/components/Pages/Consent/client/index.ts

File renamed without changes.

src/components/Pages/Preferences/client/selectors.ts renamed to src/components/Pages/Consent/client/selectors.ts

File renamed without changes.

src/components/Pages/Preferences/index.astro renamed to src/components/Pages/Consent/index.astro

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
---
22
import { Image } from 'astro:assets'
33
import logoSvg from '@assets/images/site/logo.svg'
4+
5+
export type Props = {
6+
content: {
7+
title: string
8+
message: string
9+
}
10+
}
11+
12+
const { content } = Astro.props
413
---
514

615
<consent-preferences class="block w-full">

‎src/components/Pages/Contact/index.astro‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
import ContactForm from '@components/Forms/Contact/index.astro'
3+
import Map from '@components/Map/index.astro'
4+
5+
export type Props = {
6+
content: {
7+
title: string
8+
message: string
9+
}
10+
}
11+
12+
const { content } = Astro.props
13+
---
14+
15+
<div class="min-h-screen">
16+
<!-- Contact Hero Section -->
17+
<section
18+
class="py-16 md:py-20 bg-linear-to-br from-blue-600 to-purple-600 text-white text-center"
19+
aria-labelledby="contact-hero-title"
20+
>
21+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
22+
<div class="space-y-6">
23+
<h1
24+
id="contact-hero-title"
25+
class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight"
26+
>
27+
Let's Build Something Amazing
28+
</h1>
29+
<p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto leading-relaxed">
30+
Ready to transform your digital presence? Share your project details and let's create
31+
something extraordinary together.
32+
</p>
33+
</div>
34+
</div>
35+
</section>
36+
37+
<!-- Google Maps embed -->
38+
<Map />
39+
40+
<!-- Contact Form Section -->
41+
<section class="py-16 bg-page-offset" aria-label="Contact form">
42+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43+
<ContactForm>
44+
<!-- Contact FormHeader -->
45+
<div slot="contact-form-header" class="mb-8">
46+
<h2 class="text-2xl md:text-3xl font-semibold mb-3">
47+
Tell us about your project
48+
</h2>
49+
<p class="text-content-active text-lg">
50+
We'll get back to you within 24 hours with a detailed proposal.
51+
</p>
52+
</div>
53+
54+
<!-- Contact Information -->
55+
<div slot="contact-information" class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg h-fit sticky top-8">
56+
<div class="space-y-8">
57+
<div>
58+
<h3 class="text-xl font-semibold mb-6">Get In Touch</h3>
59+
60+
<div class="space-y-6">
61+
<div class="flex items-start gap-4">
62+
<div
63+
class="shrink-0 w-11 h-11 bg-linear-to-br from-primary to-accent text-white rounded-xl flex items-center justify-center"
64+
>
65+
<svg
66+
width="20"
67+
height="20"
68+
viewBox="0 0 24 24"
69+
fill="none"
70+
stroke="currentColor"
71+
stroke-width="2"
72+
aria-hidden="true"
73+
focusable="false"
74+
>
75+
<path
76+
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
77+
></path>
78+
<polyline points="22,6 12,13 2,6"></polyline>
79+
</svg>
80+
</div>
81+
<div>
82+
<h4 class="font-semibold mb-1">Email</h4>
83+
<p class="text-content-active">kevin@webstackbuilders.com</p>
84+
</div>
85+
</div>
86+
87+
<div class="flex items-start gap-4">
88+
<div
89+
class="shrink-0 w-11 h-11 bg-linear-to-br from-primary to-accent text-white rounded-xl flex items-center justify-center"
90+
>
91+
<svg
92+
width="20"
93+
height="20"
94+
viewBox="0 0 24 24"
95+
fill="none"
96+
stroke="currentColor"
97+
stroke-width="2"
98+
aria-hidden="true"
99+
focusable="false"
100+
>
101+
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
102+
<circle cx="12" cy="10" r="3"></circle>
103+
</svg>
104+
</div>
105+
<div>
106+
<h4 class="font-semibold mb-1">Location</h4>
107+
<p class="text-content-active">Remote • Worldwide</p>
108+
</div>
109+
</div>
110+
111+
<div class="flex items-start gap-4">
112+
<div
113+
class="shrink-0 w-11 h-11 bg-linear-to-br from-primary to-accent text-white rounded-xl flex items-center justify-center"
114+
>
115+
<svg
116+
width="20"
117+
height="20"
118+
viewBox="0 0 24 24"
119+
fill="none"
120+
stroke="currentColor"
121+
stroke-width="2"
122+
aria-hidden="true"
123+
focusable="false"
124+
>
125+
<circle cx="12" cy="12" r="10"></circle>
126+
<polyline points="12,6 12,12 16,14"></polyline>
127+
</svg>
128+
</div>
129+
<div>
130+
<h4 class="font-semibold mb-1">Response Time</h4>
131+
<p class="text-content-active">Within 24 hours</p>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
137+
<div>
138+
<h3 class="text-xl font-semibold mb-6">Our Expertise</h3>
139+
<ul class="space-y-3">
140+
<li class="flex items-center text-content-active pl-4 relative">
141+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
142+
Custom Web Development
143+
</li>
144+
<li class="flex items-center text-content-active pl-4 relative">
145+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
146+
E-commerce Solutions
147+
</li>
148+
<li class="flex items-center text-content-active pl-4 relative">
149+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
150+
Progressive Web Apps
151+
</li>
152+
<li class="flex items-center text-content-active pl-4 relative">
153+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
154+
API Development & Integration
155+
</li>
156+
<li class="flex items-center text-content-active pl-4 relative">
157+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
158+
Database Design & Optimization
159+
</li>
160+
<li class="flex items-center text-content-active pl-4 relative">
161+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
162+
Performance & SEO Optimization
163+
</li>
164+
<li class="flex items-center text-content-active pl-4 relative">
165+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
166+
Maintenance & Support
167+
</li>
168+
<li class="flex items-center text-content-active pl-4 relative">
169+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
170+
Technical Consulting
171+
</li>
172+
</ul>
173+
</div>
174+
175+
<div>
176+
<h3 class="text-xl font-semibold mb-6">Why Choose Us?</h3>
177+
<ul class="space-y-3">
178+
<li class="flex items-center text-content-active pl-4 relative">
179+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
180+
15+ years of experience
181+
</li>
182+
<li class="flex items-center text-content-active pl-4 relative">
183+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
184+
Modern tech stack
185+
</li>
186+
<li class="flex items-center text-content-active pl-4 relative">
187+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
188+
Performance-focused
189+
</li>
190+
<li class="flex items-center text-content-active pl-4 relative">
191+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
192+
SEO optimized
193+
</li>
194+
<li class="flex items-center text-content-active pl-4 relative">
195+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
196+
Mobile-first approach
197+
</li>
198+
<li class="flex items-center text-content-active pl-4 relative">
199+
<span class="absolute left-0 w-2 h-2 bg-spotlight rounded-full"></span>
200+
Ongoing support
201+
</li>
202+
</ul>
203+
</div>
204+
</div>
205+
</div>
206+
</ContactForm>
207+
</div>
208+
</section>
209+
</div>

‎src/components/Pages/MyData/index.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
---
2+
export type Props = {
3+
content: {
4+
title: string
5+
message: string
6+
}
7+
}
8+
9+
const { content } = Astro.props
210
---
311

412
<privacy-form class="block">

‎src/pages/consent/index.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import BaseLayout from '@layouts/BaseLayout.astro'
3-
import ConsentPreferences from '@components/Pages/Preferences/index.astro'
3+
import ConsentPreferences from '@components/Pages/Consent/index.astro'
44
55
const pageTitle = 'Consent Policy'
66
const path = '/consent'
@@ -18,7 +18,11 @@ const description =
1818
</header>
1919

2020
<div class="mb-12">
21-
<ConsentPreferences />
21+
<ConsentPreferences content={{
22+
title: 'Privacy Preference Center',
23+
message: 'Manage your cookie preferences and learn how we use cookies to improve your experience.'
24+
}}
25+
/>
2226
</div>
2327

2428
<!-- Cookie Information -->

0 commit comments

Comments
 (0)