573 lines
18 KiB
TypeScript
573 lines
18 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
const ArchitecturalShowcase: React.FC = () => {
|
||
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
||
|
|
const [heroVisible, setHeroVisible] = useState(false);
|
||
|
|
const [imageVisible, setImageVisible] = useState(false);
|
||
|
|
const [purposeVisible, setPurposeVisible] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
document.body.style.margin = '0';
|
||
|
|
document.body.style.padding = '0';
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
|
||
|
|
const timer1 = setTimeout(() => setIsLoaded(true), 200);
|
||
|
|
const timer2 = setTimeout(() => setHeroVisible(true), 600);
|
||
|
|
const timer3 = setTimeout(() => setImageVisible(true), 1200);
|
||
|
|
const timer4 = setTimeout(() => setPurposeVisible(true), 1800);
|
||
|
|
const timer5 = setTimeout(() => {
|
||
|
|
document.body.style.overflow = 'auto';
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
clearTimeout(timer1);
|
||
|
|
clearTimeout(timer2);
|
||
|
|
clearTimeout(timer3);
|
||
|
|
clearTimeout(timer4);
|
||
|
|
clearTimeout(timer5);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const globalStyles = `
|
||
|
|
body, html, #root {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const styles = {
|
||
|
|
showcase: {
|
||
|
|
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||
|
|
minHeight: '100vh',
|
||
|
|
backgroundColor: '#fafafa',
|
||
|
|
margin: 0,
|
||
|
|
padding: 0,
|
||
|
|
border: 'none',
|
||
|
|
outline: 'none',
|
||
|
|
opacity: isLoaded ? 1 : 0,
|
||
|
|
transform: isLoaded ? 'translateY(0) scale(1)' : 'translateY(50px) scale(0.95)',
|
||
|
|
transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
},
|
||
|
|
|
||
|
|
header: {
|
||
|
|
position: 'fixed' as const,
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
zIndex: 1000,
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
borderBottom: '1px solid rgba(0, 0, 0, 0.08)',
|
||
|
|
transform: isLoaded ? 'translateY(0)' : 'translateY(-100px)',
|
||
|
|
transition: 'all 0.8s cubic-bezier(0.34, 1.26, 0.64, 1)',
|
||
|
|
transitionDelay: '0.3s',
|
||
|
|
},
|
||
|
|
|
||
|
|
nav: {
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
padding: '1rem 2rem',
|
||
|
|
maxWidth: '1400px',
|
||
|
|
margin: '0 auto',
|
||
|
|
},
|
||
|
|
|
||
|
|
logo: {
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '0.5rem',
|
||
|
|
fontSize: '1.5rem',
|
||
|
|
fontWeight: 600,
|
||
|
|
color: '#1a1a1a',
|
||
|
|
opacity: isLoaded ? 1 : 0,
|
||
|
|
transform: isLoaded ? 'translateX(0) rotate(0deg)' : 'translateX(-30px) rotate(-10deg)',
|
||
|
|
transition: 'all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||
|
|
transitionDelay: '0.5s',
|
||
|
|
},
|
||
|
|
|
||
|
|
logoIcon: {
|
||
|
|
fontSize: '1.2rem',
|
||
|
|
animation: isLoaded ? 'pulse 2s infinite' : 'none',
|
||
|
|
},
|
||
|
|
|
||
|
|
navLinks: {
|
||
|
|
display: 'flex',
|
||
|
|
listStyle: 'none',
|
||
|
|
margin: 0,
|
||
|
|
padding: 0,
|
||
|
|
gap: '2rem',
|
||
|
|
},
|
||
|
|
|
||
|
|
navLink: {
|
||
|
|
color: '#4a4a4a',
|
||
|
|
textDecoration: 'none',
|
||
|
|
fontSize: '0.95rem',
|
||
|
|
fontWeight: 400,
|
||
|
|
transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
cursor: 'pointer',
|
||
|
|
opacity: isLoaded ? 1 : 0,
|
||
|
|
transform: isLoaded ? 'translateY(0)' : 'translateY(-20px)',
|
||
|
|
transitionDelay: '0.7s',
|
||
|
|
},
|
||
|
|
|
||
|
|
contactBtn: {
|
||
|
|
backgroundColor: '#1a1a1a',
|
||
|
|
color: 'white',
|
||
|
|
border: 'none',
|
||
|
|
padding: '0.75rem 1.5rem',
|
||
|
|
borderRadius: '50px',
|
||
|
|
fontSize: '0.9rem',
|
||
|
|
fontWeight: 500,
|
||
|
|
cursor: 'pointer',
|
||
|
|
transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
fontFamily: 'inherit',
|
||
|
|
opacity: isLoaded ? 1 : 0,
|
||
|
|
transform: isLoaded ? 'translateX(0) scale(1)' : 'translateX(30px) scale(0.8)',
|
||
|
|
transitionDelay: '0.8s',
|
||
|
|
},
|
||
|
|
|
||
|
|
hero: {
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column' as const,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
minHeight: '100vh',
|
||
|
|
textAlign: 'center' as const,
|
||
|
|
padding: '0 2rem',
|
||
|
|
paddingTop: '80px',
|
||
|
|
},
|
||
|
|
|
||
|
|
heroContent: {
|
||
|
|
maxWidth: '800px',
|
||
|
|
margin: '0 auto',
|
||
|
|
},
|
||
|
|
|
||
|
|
heroTitle: {
|
||
|
|
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||
|
|
fontWeight: 300,
|
||
|
|
lineHeight: 1.2,
|
||
|
|
color: '#1a1a1a',
|
||
|
|
margin: '0 0 1.5rem 0',
|
||
|
|
letterSpacing: '-0.02em',
|
||
|
|
},
|
||
|
|
|
||
|
|
heroSubtitle: {
|
||
|
|
fontSize: 'clamp(1.1rem, 2vw, 1.3rem)',
|
||
|
|
color: '#6a6a6a',
|
||
|
|
lineHeight: 1.6,
|
||
|
|
margin: '0 0 2.5rem 0',
|
||
|
|
fontWeight: 400,
|
||
|
|
maxWidth: '600px',
|
||
|
|
},
|
||
|
|
|
||
|
|
ctaBtn: {
|
||
|
|
display: 'inline-flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '0.75rem',
|
||
|
|
backgroundColor: '#1a1a1a',
|
||
|
|
color: 'white',
|
||
|
|
border: 'none',
|
||
|
|
padding: '1rem 2rem',
|
||
|
|
borderRadius: '50px',
|
||
|
|
fontSize: '1rem',
|
||
|
|
fontWeight: 500,
|
||
|
|
cursor: 'pointer',
|
||
|
|
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||
|
|
fontFamily: 'inherit',
|
||
|
|
boxShadow: '0 4px 20px rgba(26, 26, 26, 0.15)',
|
||
|
|
},
|
||
|
|
|
||
|
|
ctaArrow: {
|
||
|
|
fontSize: '1.2rem',
|
||
|
|
transition: 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
},
|
||
|
|
|
||
|
|
imageSection: {
|
||
|
|
padding: '4rem 2rem',
|
||
|
|
backgroundColor: '#ffffff',
|
||
|
|
opacity: imageVisible ? 1 : 0,
|
||
|
|
transform: imageVisible ? 'translateY(0)' : 'translateY(80px)',
|
||
|
|
transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
},
|
||
|
|
|
||
|
|
imageContainer: {
|
||
|
|
maxWidth: '1200px',
|
||
|
|
margin: '0 auto',
|
||
|
|
borderRadius: '20px',
|
||
|
|
overflow: 'hidden',
|
||
|
|
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1)',
|
||
|
|
transform: imageVisible ? 'scale(1) rotateX(0deg)' : 'scale(0.9) rotateX(10deg)',
|
||
|
|
transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
transitionDelay: '0.2s',
|
||
|
|
},
|
||
|
|
|
||
|
|
heroImage: {
|
||
|
|
width: '100%',
|
||
|
|
height: 'auto',
|
||
|
|
display: 'block',
|
||
|
|
transition: 'transform 0.6s ease',
|
||
|
|
},
|
||
|
|
|
||
|
|
purpose: {
|
||
|
|
padding: '6rem 2rem',
|
||
|
|
backgroundColor: '#fafafa',
|
||
|
|
opacity: purposeVisible ? 1 : 0,
|
||
|
|
transform: purposeVisible ? 'translateY(0)' : 'translateY(60px)',
|
||
|
|
transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||
|
|
textAlign: 'center' as const,
|
||
|
|
},
|
||
|
|
|
||
|
|
purposeContent: {
|
||
|
|
maxWidth: '1200px',
|
||
|
|
margin: '0 auto',
|
||
|
|
},
|
||
|
|
|
||
|
|
purposeTitle: {
|
||
|
|
fontSize: 'clamp(2rem, 4vw, 2.5rem)',
|
||
|
|
fontWeight: 300,
|
||
|
|
color: '#1a1a1a',
|
||
|
|
margin: '0 0 1.5rem 0',
|
||
|
|
letterSpacing: '-0.01em',
|
||
|
|
},
|
||
|
|
|
||
|
|
purposeDescription: {
|
||
|
|
fontSize: '1.1rem',
|
||
|
|
color: '#6a6a6a',
|
||
|
|
lineHeight: 1.6,
|
||
|
|
margin: '0',
|
||
|
|
maxWidth: '800px',
|
||
|
|
},
|
||
|
|
|
||
|
|
servicesSection: {
|
||
|
|
padding: '8rem 2rem',
|
||
|
|
backgroundColor: '#fffff',
|
||
|
|
position: 'relative' as const,
|
||
|
|
},
|
||
|
|
|
||
|
|
servicesContainer: {
|
||
|
|
maxWidth: '1400px',
|
||
|
|
margin: '0 auto',
|
||
|
|
position: 'relative' as const,
|
||
|
|
},
|
||
|
|
|
||
|
|
servicesHeader: {
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
marginBottom: '4rem',
|
||
|
|
position: 'relative' as const,
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
servicesTitle: {
|
||
|
|
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||
|
|
fontWeight: 400,
|
||
|
|
color: '#666',
|
||
|
|
lineHeight: 1.2,
|
||
|
|
margin: 0,
|
||
|
|
textAlign: 'center' as const,
|
||
|
|
flex: 1,
|
||
|
|
letterSpacing: '-0.01em',
|
||
|
|
},
|
||
|
|
|
||
|
|
viewAllBtn: {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
border: 'none',
|
||
|
|
fontSize: '0.9rem',
|
||
|
|
color: '#666',
|
||
|
|
fontWeight: 500,
|
||
|
|
cursor: 'pointer',
|
||
|
|
textDecoration: 'underline',
|
||
|
|
fontFamily: 'inherit',
|
||
|
|
position: 'absolute' as const,
|
||
|
|
top: 0,
|
||
|
|
right: 0,
|
||
|
|
},
|
||
|
|
|
||
|
|
servicesGrid: {
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
||
|
|
gap: '2rem',
|
||
|
|
marginTop: '2rem',
|
||
|
|
},
|
||
|
|
|
||
|
|
serviceCard: {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
padding: 60,
|
||
|
|
position: 'relative' as const,
|
||
|
|
},
|
||
|
|
|
||
|
|
serviceTitle: {
|
||
|
|
fontSize: 'clamp(1.8rem, 3vw, 2.5rem)',
|
||
|
|
fontWeight: 400,
|
||
|
|
color: '#666',
|
||
|
|
lineHeight: 1.2,
|
||
|
|
margin: 0,
|
||
|
|
letterSpacing: '-0.01em',
|
||
|
|
minHeight: '120px',
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
serviceDescription: {
|
||
|
|
fontSize: '1rem',
|
||
|
|
color: '#666',
|
||
|
|
lineHeight: 1.6,
|
||
|
|
margin: '0 0 2rem 0',
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleNavLinkHover = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||
|
|
e.currentTarget.style.color = '#1a1a1a';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleNavLinkLeave = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||
|
|
e.currentTarget.style.color = '#4a4a4a';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleContactBtnHover = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||
|
|
e.currentTarget.style.backgroundColor = '#333333';
|
||
|
|
e.currentTarget.style.transform = 'translateY(-2px)';
|
||
|
|
e.currentTarget.style.boxShadow = '0 8px 25px rgba(26, 26, 26, 0.25)';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleContactBtnLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||
|
|
e.currentTarget.style.backgroundColor = '#1a1a1a';
|
||
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
||
|
|
e.currentTarget.style.boxShadow = 'none';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCtaBtnHover = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||
|
|
e.currentTarget.style.backgroundColor = '#333333';
|
||
|
|
e.currentTarget.style.transform = 'translateY(-3px)';
|
||
|
|
e.currentTarget.style.boxShadow = '0 8px 30px rgba(26, 26, 26, 0.25)';
|
||
|
|
const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement;
|
||
|
|
if (arrow) arrow.style.transform = 'translateX(5px)';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCtaBtnLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||
|
|
e.currentTarget.style.backgroundColor = '#1a1a1a';
|
||
|
|
e.currentTarget.style.transform = 'translateY(0)';
|
||
|
|
e.currentTarget.style.boxShadow = '0 4px 20px rgba(26, 26, 26, 0.15)';
|
||
|
|
const arrow = e.currentTarget.querySelector('.cta-arrow') as HTMLElement;
|
||
|
|
if (arrow) arrow.style.transform = 'translateX(0)';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleImageHover = (e: React.MouseEvent<HTMLImageElement>) => {
|
||
|
|
e.currentTarget.style.transform = 'scale(1.05)';
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleImageLeave = (e: React.MouseEvent<HTMLImageElement>) => {
|
||
|
|
e.currentTarget.style.transform = 'scale(1)';
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<style dangerouslySetInnerHTML={{ __html: globalStyles }} />
|
||
|
|
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<style dangerouslySetInnerHTML={{
|
||
|
|
__html: `
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { transform: scale(1); }
|
||
|
|
50% { transform: scale(1.1); }
|
||
|
|
}
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% { transform: translateY(0px); }
|
||
|
|
50% { transform: translateY(-10px); }
|
||
|
|
}
|
||
|
|
@keyframes slideInLeft {
|
||
|
|
from { transform: translateX(-100px); opacity: 0; }
|
||
|
|
to { transform: translateX(0); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes slideInRight {
|
||
|
|
from { transform: translateX(100px); opacity: 0; }
|
||
|
|
to { transform: translateX(0); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from { transform: translateY(30px); opacity: 0; }
|
||
|
|
to { transform: translateY(0); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes scaleIn {
|
||
|
|
from { transform: scale(0.8); opacity: 0; }
|
||
|
|
to { transform: scale(1); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes rotateIn {
|
||
|
|
from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
|
||
|
|
to { transform: rotate(0deg) scale(1); opacity: 1; }
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}} />
|
||
|
|
|
||
|
|
<div style={styles.showcase}>
|
||
|
|
<header style={styles.header}>
|
||
|
|
<nav style={styles.nav}>
|
||
|
|
<div style={styles.logo}>
|
||
|
|
<span style={styles.logoIcon}>⬛</span>
|
||
|
|
Alius
|
||
|
|
</div>
|
||
|
|
<ul style={styles.navLinks}>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
href="#home"
|
||
|
|
style={styles.navLink}
|
||
|
|
onMouseEnter={handleNavLinkHover}
|
||
|
|
onMouseLeave={handleNavLinkLeave}
|
||
|
|
>
|
||
|
|
Home
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
href="#projects"
|
||
|
|
style={styles.navLink}
|
||
|
|
onMouseEnter={handleNavLinkHover}
|
||
|
|
onMouseLeave={handleNavLinkLeave}
|
||
|
|
>
|
||
|
|
Projects
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
href="#services"
|
||
|
|
style={styles.navLink}
|
||
|
|
onMouseEnter={handleNavLinkHover}
|
||
|
|
onMouseLeave={handleNavLinkLeave}
|
||
|
|
>
|
||
|
|
Services
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
href="#about"
|
||
|
|
style={styles.navLink}
|
||
|
|
onMouseEnter={handleNavLinkHover}
|
||
|
|
onMouseLeave={handleNavLinkLeave}
|
||
|
|
>
|
||
|
|
About Us
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
href="#faq"
|
||
|
|
style={styles.navLink}
|
||
|
|
onMouseEnter={handleNavLinkHover}
|
||
|
|
onMouseLeave={handleNavLinkLeave}
|
||
|
|
>
|
||
|
|
FAQ
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<button
|
||
|
|
style={styles.contactBtn}
|
||
|
|
onMouseEnter={handleContactBtnHover}
|
||
|
|
onMouseLeave={handleContactBtnLeave}
|
||
|
|
aria-label="Contact us"
|
||
|
|
>
|
||
|
|
Contact us
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section style={styles.hero} aria-label="Main content">
|
||
|
|
<div style={styles.heroContent}>
|
||
|
|
<h1 style={styles.heroTitle}>
|
||
|
|
Mapping properties<br />
|
||
|
|
empowering decisions
|
||
|
|
</h1>
|
||
|
|
<p style={styles.heroSubtitle}>
|
||
|
|
A modern GIS platform visualizing sewer lines, water mains, parcels, and 14+ urban infrastructure layers — built for precision, clarity, and actionable insights.
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
style={styles.ctaBtn}
|
||
|
|
onMouseEnter={handleCtaBtnHover}
|
||
|
|
onMouseLeave={handleCtaBtnLeave}
|
||
|
|
>
|
||
|
|
<span>Get Started</span>
|
||
|
|
<div className="cta-arrow" style={styles.ctaArrow}>→</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style={styles.imageSection} aria-label="Featured architecture">
|
||
|
|
<div style={styles.imageContainer}>
|
||
|
|
<img
|
||
|
|
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2387CEEB'/%3E%3Cstop offset='100%25' stop-color='%23E0F6FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='500' fill='url(%23sky)'/%3E%3C!-- Modern House --%3E%3Crect x='100' y='200' width='300' height='150' fill='%23F5F5F5'/%3E%3Crect x='400' y='150' width='250' height='200' fill='%23E8E8E8'/%3E%3Crect x='420' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='480' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='540' y='170' width='50' height='80' fill='%23333' opacity='0.8'/%3E%3Crect x='600' y='170' width='30' height='80' fill='%23333' opacity='0.8'/%3E%3C!-- Landscaping --%3E%3Cellipse cx='680' cy='350' rx='40' ry='60' fill='%2366BB6A'/%3E%3Cellipse cx='50' cy='380' rx='30' ry='40' fill='%2366BB6A'/%3E%3Cellipse cx='750' cy='320' rx='25' ry='35' fill='%2366BB6A'/%3E%3C/svg%3E"
|
||
|
|
alt="Modern architectural home with large glass windows, clean lines, and landscaped surroundings"
|
||
|
|
style={styles.heroImage}
|
||
|
|
onMouseEnter={handleImageHover}
|
||
|
|
onMouseLeave={handleImageLeave}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style={styles.purpose} aria-labelledby="replacement-heading">
|
||
|
|
<div style={styles.purposeContent}>
|
||
|
|
<h2 id="replacement-heading" style={styles.purposeTitle}>Your Text Here</h2>
|
||
|
|
<p style={styles.purposeDescription}>
|
||
|
|
At MapLayer SD, we are committed to visualizing San Diego's infrastructure through precision mapping—bringing transparency to parcels, sewer lines, water mains, and more.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style={styles.servicesSection}>
|
||
|
|
<div style={styles.servicesContainer}>
|
||
|
|
<div style={styles.servicesHeader}>
|
||
|
|
<h2 style={styles.servicesTitle}>
|
||
|
|
Crafting Sustainable<br />
|
||
|
|
Solutions for Every Space
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={styles.servicesGrid}>
|
||
|
|
<div style={styles.serviceCard}>
|
||
|
|
<h3 style={styles.serviceTitle}>
|
||
|
|
Sustainable<br />
|
||
|
|
Architecture<br />
|
||
|
|
Design
|
||
|
|
</h3>
|
||
|
|
<p style={styles.serviceDescription}>
|
||
|
|
We design innovative and eco-friendly spaces that balance beauty, functionality, and environmental responsibility.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={styles.serviceCard}>
|
||
|
|
<h3 style={styles.serviceTitle}>
|
||
|
|
Green<br />
|
||
|
|
Building<br />
|
||
|
|
Consultation
|
||
|
|
</h3>
|
||
|
|
<p style={styles.serviceDescription}>
|
||
|
|
Our experts guide you through the process of creating environmentally friendly structures that align with your goals.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={styles.serviceCard}>
|
||
|
|
<h3 style={styles.serviceTitle}>
|
||
|
|
Project<br />
|
||
|
|
Planning<br />
|
||
|
|
& Development
|
||
|
|
</h3>
|
||
|
|
<p style={styles.serviceDescription}>
|
||
|
|
From concept to completion, we provide comprehensive planning services tailored to sustainable living and building principles.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ArchitecturalShowcase;
|