extendify / src / Assist / tasks / images / LaunchDemoSitesMarkup.jsx

LaunchDemoSitesMarkup.jsx in Extendify 3.1.2, at src/Assist/tasks/images/LaunchDemoSitesMarkup.jsx

376 lines 15.0 KB

Raw Download Zip

1	import { pageNames } from '@shared/lib/pages';
2	import { __ } from '@wordpress/i18n';
3	import { Icon, siteLogo } from '@wordpress/icons';
4
5	export const LaunchDemoSitesMarkup = (props) => (
6	<div {...props}>
7	<style>
8	{`
9	.extendify-assist .deme-real-estate * {
10	font-family: Verdana, Geneva, Tahoma, sans-serif !important;
11	}
12	.extendify-assist .deme-site-education * {
13	font-family: Georgia, "Times New Roman", Times, serif !important;
14	}
15	.extendify-assist .deme-site-construction * {
16	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
17	}
18	.extendify-assist .deme-site-restaurant * {
19	font-family: "Times New Roman", Times, serif !important;
20	}
21	.extendify-assist .deme-site-cafe * {
22	font-family: "Courier New", Courier, monospace !important;
23	}
24	`}
25	</style>
26	<div className="relative flex justify-center text-left text-lg">
27	<div className="deme-real-estate absolute z-50 w-fit origin-top scale-[0.13] transform">
28	<div className="w-[1440px] overflow-hidden rounded-xl bg-white text-gray-800 shadow-xl">
29	<div className="flex items-center justify-between px-20 py-6">
30	<div className="flex items-center gap-2">
31	<Icon icon={siteLogo} />
32	<span>{__('Prime Estates', 'extendify-local')}</span>
33	</div>
34	<div className="flex gap-8">
35	<span>{pageNames.about.title}</span>
36	<span>{pageNames.blog.title}</span>
37	<span>{pageNames.contact.title}</span>
38	</div>
39	</div>
40	<div className="relative flex flex-col bg-black bg-[url('https://images.extendify-cdn.com/assist-tasks/demo-sites/real-estate-hero.webp')] bg-cover bg-center px-20 py-48 text-white">
41	<div className="relative z-40 max-w-2xl">
42	<h1 className="text-6xl font-medium text-white">
43	{__(
44	'Elevate Your Real Estate Experience with Pinnacle Properties',
45	'extendify-local',
46	)}
47	</h1>
48	<div className="mb-12 mt-4">
49	{__(
50	"Discover the key to Austin's vibrant real estate scene with Pinnacle Properties. Our seasoned agents leverage over two decades of industry know-how to guide you in finding your ideal home.",
51	'extendify-local',
52	)}
53	</div>
54	<div className="flex gap-4">
55	<div className="w-fit rounded-full border bg-gray-900 px-6 py-3">
56	{__('Contact Us', 'extendify-local')}
57	</div>
58	<div className="w-fit rounded-full border px-6 py-3">
59	{__('Learn More', 'extendify-local')}
60	</div>
61	</div>
62	</div>
63	<div className="absolute inset-0 bg-black opacity-50"></div>
64	</div>
65	<div className="flex flex-col gap-16 px-20 py-24">
66	<div className="flex max-w-full justify-center text-center">
67	<div className="max-w-2xl">
68	<h2 className="mb-4 text-4xl font-medium text-gray-900">
69	{__(
70	'Expert Real Estate Services in Austin',
71	'extendify-local',
72	)}
73	</h2>
74	<div>
75	{__(
76	'Find your dream home or make profitable investments with Pinnacle Properties, Austin premier real estate agency. Trust our experienced agents for personalized services.',
77	'extendify-local',
78	)}
79	</div>
80	</div>
81	</div>
82	<div className="grid grid-cols-3 gap-8">
83	<div className="flex flex-col">
84	<img
85	alt={__('Real Estate Property', 'extendify-local')}
86	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/real-estate-1.webp"
87	className="aspect-video object-cover object-center"
88	/>
89	<h3 className="mb-2 mt-6 text-xl font-semibold">
90	{__('Buy Your Dream Home', 'extendify-local')}
91	</h3>
92	<div className="m-0">
93	{__(
94	'Find your dream home with our expert agents. We make homeownership a reality.',
95	'extendify-local',
96	)}
97	</div>
98	</div>
99	<div className="flex flex-col">
100	<img
101	alt={__('Real Estate Property', 'extendify-local')}
102	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/real-estate-2.webp"
103	className="aspect-video object-cover object-center"
104	/>
105	<h3 className="mb-2 mt-6 text-xl font-semibold">
106	{__('Buy Your Dream Home', 'extendify-local')}
107	</h3>
108	<div className="m-0">
109	{__(
110	'Find your dream home with our expert agents. We make homeownership a reality.',
111	'extendify-local',
112	)}
113	</div>
114	</div>
115	<div className="flex flex-col">
116	<img
117	alt={__('Real Estate Property', 'extendify-local')}
118	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/real-estate-3.webp"
119	className="aspect-video object-cover object-center"
120	/>
121	<h3 className="mb-2 mt-6 text-xl font-semibold">
122	{__('Buy Your Dream Home', 'extendify-local')}
123	</h3>
124	<div className="m-0">
125	{__(
126	'Find your dream home with our expert agents. We make homeownership a reality.',
127	'extendify-local',
128	)}
129	</div>
130	</div>
131	</div>
132	</div>
133	</div>
134	</div>
135
136	<div className="deme-site-education absolute right-44 top-10 z-40 w-40 origin-top scale-[0.1125] transform">
137	<div className="w-[1440px] overflow-hidden rounded-xl bg-white text-gray-800 shadow-xl">
138	<div className="flex items-center justify-between px-20 py-6">
139	<div className="flex items-center gap-2">
140	<Icon icon={siteLogo} />
141	<span>{__('BrightFuture', 'extendify-local')}</span>
142	</div>
143	<div className="flex gap-8">
144	<span>{pageNames.about.title}</span>
145	<span>{pageNames.blog.title}</span>
146	<span>{pageNames.contact.title}</span>
147	</div>
148	</div>
149
150	<div className="relative grid grid-cols-12 flex-col content-end gap-20 bg-black bg-[url('https://images.extendify-cdn.com/assist-tasks/demo-sites/education-hero.webp')] bg-cover bg-center px-20 pb-24 pt-72 text-white">
151	<h1 className="relative z-40 col-span-8 mt-0 text-6xl font-semibold text-white">
152	{__(
153	'Empowering Academic Excellence in Every Student for Tomorrow’s Leaders',
154	'extendify-local',
155	)}
156	</h1>
157	<div className="relative z-40 col-span-4">
158	<div className="mb-12 mt-4">
159	{__(
160	'Discover a transformative educational experience at American Academic Excellence High Schools, where students excel in STEM, arts, and humanities to become tomorrow’s leaders.',
161	'extendify-local',
162	)}
163	</div>
164	<div className="flex gap-4">
165	<div className="w-fit rounded-full border bg-[#CAFF58] px-6 py-3 text-gray-900">
166	{__('Apply Now', 'extendify-local')}
167	</div>
168	</div>
169	</div>
170	<div className="absolute inset-0 bg-black opacity-50"></div>
171	</div>
172
173	<div className="grid grid-cols-6 gap-16 px-20 py-24">
174	<div className="col-span-2">
175	<h2 className="mb-4 text-4xl font-semibold text-gray-900">
176	{__('Our Commitment to Academic Excellence', 'extendify-local')}
177	</h2>
178	<div>
179	{__(
180	'American Academic Excellence High Schools: Shaping tomorrow’s leaders through top-tier education in Houston, Texas. STEM, arts, humanities. Well-rounded curriculum, exceptional educators.',
181	'extendify-local',
182	)}
183	</div>
184	</div>
185	<div className="col-span-4 grid grid-cols-2 gap-8">
186	<img
187	alt={__('Education Website Image', 'extendify-local')}
188	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/education-1.webp"
189	className="aspect-[2/4] max-w-full object-cover object-center"
190	/>
191	<img
192	alt={__('Education Website Image', 'extendify-local')}
193	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/education-2.webp"
194	className="aspect-[2/4] max-w-full object-cover object-center"
195	/>
196	</div>
197	</div>
198	</div>
199	</div>
200
201	<div className="deme-site-cafe absolute right-28 top-28 z-10 w-40 origin-top scale-[0.1125] transform">
202	<div className="w-[1440px] overflow-hidden rounded-xl bg-[#FEEBEA] text-[#9E1129] shadow-xl">
203	<div className="flex items-center justify-between px-20 py-6">
204	<div className="flex items-center gap-2">
205	<Icon icon={siteLogo} />
206	<span>{__('Brewed Bliss', 'extendify-local')}</span>
207	</div>
208	<div className="flex gap-8">
209	<span>{pageNames.about.title}</span>
210	<span>{pageNames.blog.title}</span>
211	<span>{pageNames.contact.title}</span>
212	</div>
213	</div>
214	<div className="flex flex-col gap-16 px-20 py-24">
215	<div className="mx-auto max-w-4xl text-center">
216	<h1 className="mb-4 mt-0 text-6xl font-semibold text-[#9E1129]">
217	{__(
218	'Embark on a delightful coffee adventure around the world.',
219	'extendify-local',
220	)}
221	</h1>
222	</div>
223	<div className="grid grid-cols-2 gap-8">
224	<div>
225	<img
226	alt={__('Cafe Website Image', 'extendify-local')}
227	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/cafe-1.webp"
228	className="mb-8 aspect-video max-w-full object-cover object-center"
229	/>
230	<img
231	alt={__('Cafe Website Image', 'extendify-local')}
232	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/cafe-2.webp"
233	className="aspect-square max-w-full object-cover object-center"
234	/>
235	</div>
236	<div>
237	<img
238	alt={__('Cafe Website Image', 'extendify-local')}
239	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/cafe-3.webp"
240	className="mb-8 aspect-square max-w-full object-cover object-center"
241	/>
242	<img
243	alt={__('Cafe Website Hero Image', 'extendify-local')}
244	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/cafe-4.webp"
245	className="aspect-video max-w-full object-cover object-center"
246	/>
247	</div>
248	</div>
249	<div className="max-w-2xl">
250	{__(
251	'Find your dream home or make profitable investments with Pinnacle Properties, Austin’s premier real estate agency.',
252	'extendify-local',
253	)}
254	</div>
255	</div>
256	</div>
257	</div>
258
259	<div className="deme-site-construction absolute left-8 top-10 z-40 w-40 origin-top scale-[0.1125] transform">
260	<div className="w-[1440px] overflow-hidden rounded-xl bg-[#DBD3CF] text-gray-800 shadow-xl">
261	<div className="flex items-center justify-between px-20 py-6">
262	<div className="flex items-center gap-2">
263	<Icon icon={siteLogo} />
264	<span>{__('Skyline Builders', 'extendify-local')}</span>
265	</div>
266	<div className="flex gap-8">
267	<span>{pageNames.about.title}</span>
268	<span>{pageNames.blog.title}</span>
269	<span>{pageNames.contact.title}</span>
270	</div>
271	</div>
272	<div className="grid h-full grid-cols-2">
273	<div className="flex-1 px-20 py-28">
274	<h1 className="mt-0 text-6xl font-semibold">
275	{__(
276	'Building Tomorrow’s Miami: Your Premier Construction Partner Today',
277	'extendify-local',
278	)}
279	</h1>
280	<div className="mb-12 mt-4">
281	{__(
282	'We bring your dreams to life with groundbreaking construction techniques, turning your vision into reality with innovative and sustainable solutions.',
283	'extendify-local',
284	)}
285	</div>
286	<div className="flex gap-4">
287	<div className="w-fit border bg-gray-900 px-6 py-3 text-white">
288	{__('Get a Quote', 'extendify-local')}
289	</div>
290	</div>
291	</div>
292	<div className="h-full">
293	<img
294	src="https://images.extendify-cdn.com/assist-tasks/demo-sites/construction-hero.webp"
295	className="h-full w-full object-cover"
296	alt="Construction Hero"
297	/>
298	</div>
299	</div>
300	<div className="flex flex-col gap-16 bg-[#C5B6AD] px-20 py-24">
301	<div className="flex max-w-full justify-center text-center">
302	<div className="max-w-2xl">
303	<h2 className="mb-4 text-4xl font-semibold text-gray-900">
304	{__(
305	'About Superior Build Construction: Building Dreams, Delivering Excellence in Miami.',
306	'extendify-local',
307	)}
308	</h2>
309	<div>
310	{__(
311	"Superior Build Construction is a premier construction company based in Miami, Florida. With over 30 years of experience, we specialize in residential and commercial construction projects, offering end-to-end solutions. Our mission is to provide high-quality, durable constructions while ensuring the utmost client satisfaction, making us a trusted name in Miami's real estate industry.",
312	'extendify-local',
313	)}
314	</div>
315	</div>
316	</div>
317	</div>
318	<div className="flex flex-col gap-16 px-20 py-24">
319	<div className="flex max-w-full justify-center text-center">
320	<div className="max-w-2xl">
321	<h2 className="mb-4 text-4xl font-semibold text-gray-900">
322	{__(
323	'About Superior Build Construction: Building Dreams, Delivering Excellence in Miami.',
324	'extendify-local',
325	)}
326	</h2>
327	</div>
328	</div>
329	</div>
330	</div>
331	</div>
332
333	<div className="deme-site-restaurant absolute -left-8 top-28 z-10 w-40 origin-top scale-[0.1125] transform">
334	<div className="w-[1440px] overflow-hidden rounded-xl bg-white text-gray-800 shadow-xl">
335	<div className="flex items-center justify-between px-20 py-6">
336	<div className="flex items-center gap-2">
337	<Icon icon={siteLogo} />
338	<span>{__('Urban Bistro', 'extendify-local')}</span>
339	</div>
340	<div className="flex gap-8">
341	<span>{pageNames.about.title}</span>
342	<span>{pageNames.blog.title}</span>
343	<span>{pageNames.contact.title}</span>
344	</div>
345	</div>
346	<div className="relative bg-black bg-[url('https://images.extendify-cdn.com/assist-tasks/demo-sites/restaurant-hero.webp')] bg-cover bg-center px-20 py-24 text-center text-white">
347	<div className="relative z-40 mx-auto flex w-full max-w-4xl flex-col items-center justify-between">
348	<h1 className="mt-0 text-center text-6xl font-semibold text-white">
349	{__('French-Inspired Californian Cuisine', 'extendify-local')}
350	</h1>
351	<div className="mb-12 mt-4">
352	{__(
353	'Indulge in classic French bistro cuisine with a Californian twist at The Bistro House in San Francisco. Quality, sustainability, and Bay Area culinary traditions.',
354	'extendify-local',
355	)}
356	</div>
357	<div className="w-fit border bg-[#2A0552] px-6 py-3">
358	{__('Contact Us', 'extendify-local')}
359	</div>
360	</div>
361	<div className="absolute inset-0 z-10 bg-black opacity-50"></div>
362	</div>
363	<div className="flex flex-col gap-16 bg-[#F0EDE5] px-20 py-24">
364	<div className="max-w-2xl">
365	{__(
366	"Find your dream home or make profitable investments with Pinnacle Properties, Austin's premier real estate agency. Trust our experienced agents for personalized services.",
367	'extendify-local',
368	)}
369	</div>
370	</div>
371	</div>
372	</div>
373	</div>
374	</div>
375	);
376