Added Homepage
This commit is contained in:
parent
57084cb429
commit
9b2c22f8fb
2 changed files with 319 additions and 238 deletions
|
|
@ -3,7 +3,6 @@ import './App.css'
|
|||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import OpenLayerMap from './components/UI/Map/OpenLayerMap';
|
||||
import ArchitecturalShowcase from './components/UI/Homepage/showcase';
|
||||
|
||||
function App() {
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
const [heroVisible, setHeroVisible] = useState(false);
|
||||
const [imageVisible, setImageVisible] = useState(false);
|
||||
const [purposeVisible, setPurposeVisible] = useState(false);
|
||||
const [servicesVisible, setServicesVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.margin = '0';
|
||||
|
|
@ -15,9 +16,10 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
const timer2 = setTimeout(() => setHeroVisible(true), 600);
|
||||
const timer3 = setTimeout(() => setImageVisible(true), 1200);
|
||||
const timer4 = setTimeout(() => setPurposeVisible(true), 1800);
|
||||
const timer5 = setTimeout(() => {
|
||||
const timer5 = setTimeout(() => setServicesVisible(true), 2400);
|
||||
const timer6 = setTimeout(() => {
|
||||
document.body.style.overflow = 'auto';
|
||||
}, 2000);
|
||||
}, 2600);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer1);
|
||||
|
|
@ -25,34 +27,81 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
clearTimeout(timer3);
|
||||
clearTimeout(timer4);
|
||||
clearTimeout(timer5);
|
||||
clearTimeout(timer6);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const globalStyles = `
|
||||
body, html, #root {
|
||||
html, body, #root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Responsive CSS */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Services grid single column */
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 2rem !important;
|
||||
}
|
||||
|
||||
/* Hide nav links (you can replace with hamburger menu) */
|
||||
.nav-links {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hero Section Padding */
|
||||
.hero-content {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Hero Title */
|
||||
.hero-title {
|
||||
font-size: 2.5rem !important;
|
||||
line-height: 1.1 !important;
|
||||
}
|
||||
|
||||
/* Hero Subtitle */
|
||||
.hero-subtitle {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
/* CTA Button full width and centered content */
|
||||
.cta-btn {
|
||||
width: 100% !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Image container adjustments */
|
||||
.image-container {
|
||||
padding: 0 1rem !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const styles = {
|
||||
showcase: {
|
||||
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||||
minHeight: '100vh',
|
||||
height: '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,
|
||||
|
|
@ -66,7 +115,6 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
transition: 'all 0.8s cubic-bezier(0.34, 1.26, 0.64, 1)',
|
||||
transitionDelay: '0.3s',
|
||||
},
|
||||
|
||||
nav: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -75,7 +123,6 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
maxWidth: '1400px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
|
||||
logo: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -88,12 +135,10 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
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',
|
||||
|
|
@ -101,7 +146,6 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
padding: 0,
|
||||
gap: '2rem',
|
||||
},
|
||||
|
||||
navLink: {
|
||||
color: '#4a4a4a',
|
||||
textDecoration: 'none',
|
||||
|
|
@ -113,23 +157,6 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
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,
|
||||
|
|
@ -139,31 +166,30 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
textAlign: 'center' as const,
|
||||
padding: '0 2rem',
|
||||
paddingTop: '80px',
|
||||
opacity: heroVisible ? 1 : 0,
|
||||
transform: heroVisible ? 'translateY(0)' : 'translateY(60px)',
|
||||
transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
},
|
||||
|
||||
heroContent: {
|
||||
maxWidth: '800px',
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
|
||||
heroTitle: {
|
||||
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||||
fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
|
||||
fontWeight: 300,
|
||||
lineHeight: 1.2,
|
||||
color: '#1a1a1a',
|
||||
margin: '0 0 1.5rem 0',
|
||||
letterSpacing: '-0.02em',
|
||||
},
|
||||
|
||||
heroSubtitle: {
|
||||
fontSize: 'clamp(1.1rem, 2vw, 1.3rem)',
|
||||
fontSize: 'clamp(1.1rem, 2vw, 1.4rem)',
|
||||
color: '#6a6a6a',
|
||||
lineHeight: 1.6,
|
||||
margin: '0 0 2.5rem 0',
|
||||
margin: '0 0 3rem 0',
|
||||
fontWeight: 400,
|
||||
maxWidth: '600px',
|
||||
maxWidth: '700px',
|
||||
},
|
||||
|
||||
ctaBtn: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -171,7 +197,7 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
backgroundColor: '#1a1a1a',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
padding: '1rem 2rem',
|
||||
padding: '1.2rem 2.5rem',
|
||||
borderRadius: '50px',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 500,
|
||||
|
|
@ -180,20 +206,17 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
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',
|
||||
padding: '5rem 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',
|
||||
|
|
@ -204,14 +227,12 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
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',
|
||||
|
|
@ -220,108 +241,116 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
transition: 'all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
|
||||
purposeContent: {
|
||||
maxWidth: '1200px',
|
||||
maxWidth: '1000px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
|
||||
purposeTitle: {
|
||||
fontSize: 'clamp(2rem, 4vw, 2.5rem)',
|
||||
fontSize: 'clamp(2rem, 4vw, 3rem)',
|
||||
fontWeight: 300,
|
||||
color: '#1a1a1a',
|
||||
margin: '0 0 1.5rem 0',
|
||||
margin: '0 0 2rem 0',
|
||||
letterSpacing: '-0.01em',
|
||||
},
|
||||
|
||||
purposeDescription: {
|
||||
fontSize: '1.1rem',
|
||||
fontSize: '1.2rem',
|
||||
color: '#6a6a6a',
|
||||
lineHeight: 1.6,
|
||||
lineHeight: 1.7,
|
||||
margin: '0',
|
||||
maxWidth: '800px',
|
||||
},
|
||||
|
||||
servicesSection: {
|
||||
padding: '8rem 2rem',
|
||||
backgroundColor: '#fffff',
|
||||
backgroundColor: '#ffffff',
|
||||
position: 'relative' as const,
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
opacity: servicesVisible ? 1 : 0,
|
||||
transform: servicesVisible ? 'translateY(0)' : 'translateY(80px)',
|
||||
transition: 'all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
},
|
||||
|
||||
servicesContainer: {
|
||||
maxWidth: '1400px',
|
||||
margin: '0 auto',
|
||||
position: 'relative' as const,
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
servicesHeader: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: '4rem',
|
||||
textAlign: 'center' as const,
|
||||
marginBottom: '5rem',
|
||||
position: 'relative' as const,
|
||||
},
|
||||
|
||||
|
||||
servicesTitle: {
|
||||
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||||
fontWeight: 400,
|
||||
color: '#666',
|
||||
fontWeight: 300,
|
||||
color: '#1a1a1a',
|
||||
lineHeight: 1.2,
|
||||
margin: 0,
|
||||
textAlign: 'center' as const,
|
||||
flex: 1,
|
||||
letterSpacing: '-0.01em',
|
||||
margin: '0 0 1.5rem 0',
|
||||
letterSpacing: '-0.02em',
|
||||
},
|
||||
|
||||
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,
|
||||
servicesSubtitle: {
|
||||
fontSize: '1.2rem',
|
||||
color: '#6a6a6a',
|
||||
lineHeight: 1.6,
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
|
||||
servicesGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '2rem',
|
||||
marginTop: '2rem',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
|
||||
gap: '3rem',
|
||||
marginTop: '3rem',
|
||||
},
|
||||
|
||||
serviceCard: {
|
||||
backgroundColor: 'transparent',
|
||||
padding: 60,
|
||||
padding: '2.5rem 2rem',
|
||||
borderRadius: '20px',
|
||||
position: 'relative' as const,
|
||||
transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.08)',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
},
|
||||
serviceIcon: {
|
||||
fontSize: '3rem',
|
||||
marginBottom: '1.5rem',
|
||||
color: '#1a1a1a',
|
||||
},
|
||||
|
||||
serviceTitle: {
|
||||
fontSize: 'clamp(1.8rem, 3vw, 2.5rem)',
|
||||
fontWeight: 400,
|
||||
color: '#666',
|
||||
lineHeight: 1.2,
|
||||
margin: 0,
|
||||
fontSize: 'clamp(1.5rem, 2.5vw, 1.8rem)',
|
||||
fontWeight: 500,
|
||||
color: '#1a1a1a',
|
||||
lineHeight: 1.3,
|
||||
margin: '0 0 1.5rem 0',
|
||||
letterSpacing: '-0.01em',
|
||||
minHeight: '120px',
|
||||
},
|
||||
|
||||
|
||||
serviceDescription: {
|
||||
fontSize: '1rem',
|
||||
color: '#666',
|
||||
color: '#6a6a6a',
|
||||
lineHeight: 1.6,
|
||||
margin: '0 0 2rem 0',
|
||||
margin: '0',
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
footer: {
|
||||
padding: '4rem 2rem 2rem',
|
||||
backgroundColor: '#1a1a1a',
|
||||
color: '#ffffff',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
footerContent: {
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
footerText: {
|
||||
fontSize: '0.9rem',
|
||||
color: '#9a9a9a',
|
||||
margin: 0,
|
||||
},
|
||||
};
|
||||
|
||||
// Event Handlers for hovers omitted for brevity — keep them from your original code
|
||||
|
||||
const handleNavLinkHover = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
e.currentTarget.style.color = '#1a1a1a';
|
||||
};
|
||||
|
|
@ -330,18 +359,6 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
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)';
|
||||
|
|
@ -366,6 +383,18 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
e.currentTarget.style.transform = 'scale(1)';
|
||||
};
|
||||
|
||||
const handleServiceCardHover = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.currentTarget.style.transform = 'translateY(-8px)';
|
||||
e.currentTarget.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)';
|
||||
e.currentTarget.style.backgroundColor = '#fafafa';
|
||||
};
|
||||
|
||||
const handleServiceCardLeave = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: globalStyles }} />
|
||||
|
|
@ -375,7 +404,8 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style dangerouslySetInnerHTML={{
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
|
|
@ -405,17 +435,19 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
|
||||
to { transform: rotate(0deg) scale(1); opacity: 1; }
|
||||
}
|
||||
`
|
||||
}} />
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={styles.showcase}>
|
||||
{/* Header */}
|
||||
<header style={styles.header}>
|
||||
<nav style={styles.nav}>
|
||||
<div style={styles.logo}>
|
||||
<span style={styles.logoIcon}>⬛</span>
|
||||
Alius
|
||||
<span style={styles.logoIcon}>🗺️</span>
|
||||
MapLayer SD
|
||||
</div>
|
||||
<ul style={styles.navLinks}>
|
||||
<ul style={styles.navLinks} className="nav-links">
|
||||
<li>
|
||||
<a
|
||||
href="#home"
|
||||
|
|
@ -428,22 +460,22 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#projects"
|
||||
href="#features"
|
||||
style={styles.navLink}
|
||||
onMouseEnter={handleNavLinkHover}
|
||||
onMouseLeave={handleNavLinkLeave}
|
||||
>
|
||||
Projects
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#services"
|
||||
href="#community"
|
||||
style={styles.navLink}
|
||||
onMouseEnter={handleNavLinkHover}
|
||||
onMouseLeave={handleNavLinkLeave}
|
||||
>
|
||||
Services
|
||||
Community
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -453,56 +485,44 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
onMouseEnter={handleNavLinkHover}
|
||||
onMouseLeave={handleNavLinkLeave}
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#faq"
|
||||
style={styles.navLink}
|
||||
onMouseEnter={handleNavLinkHover}
|
||||
onMouseLeave={handleNavLinkLeave}
|
||||
>
|
||||
FAQ
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
style={styles.contactBtn}
|
||||
onMouseEnter={handleContactBtnHover}
|
||||
onMouseLeave={handleContactBtnLeave}
|
||||
aria-label="Contact us"
|
||||
>
|
||||
Contact us
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section style={styles.hero} aria-label="Main content">
|
||||
<div style={styles.heroContent}>
|
||||
<h1 style={styles.heroTitle}>
|
||||
Mapping properties<br />
|
||||
empowering decisions
|
||||
<div style={styles.heroContent} className="hero-content">
|
||||
<h1 style={styles.heroTitle} className="hero-title">
|
||||
San Diego Infrastructure
|
||||
<br />
|
||||
Mapping & Community Hub
|
||||
</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 style={styles.heroSubtitle} className="hero-subtitle">
|
||||
Explore real-time infrastructure data, connect with your community, and make informed decisions about property development. From sewer mains to water lines—visualize San Diego's urban backbone and collaborate with builders, planners, and citizens.
|
||||
</p>
|
||||
<button
|
||||
style={styles.ctaBtn}
|
||||
className="cta-btn"
|
||||
onMouseEnter={handleCtaBtnHover}
|
||||
onMouseLeave={handleCtaBtnLeave}
|
||||
onClick={() => (window.location.href = '/open')}
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<div className="cta-arrow" style={styles.ctaArrow}>→</div>
|
||||
<span>Explore the Map</span>
|
||||
<div className="cta-arrow" style={styles.ctaArrow}>
|
||||
→
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={styles.imageSection} aria-label="Featured architecture">
|
||||
{/* Image Section */}
|
||||
<section style={styles.imageSection} aria-label="Featured infrastructure map">
|
||||
<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"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cdefs%3E%3ClinearGradient id='mapBg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23E8F4FD'/%3E%3Cstop offset='100%25' stop-color='%23F0F8FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='600' fill='url(%23mapBg)'/%3E%3C!-- Map Grid --%3E%3Cg stroke='%23DDD' stroke-width='1' opacity='0.5'%3E%3Cline x1='0' y1='100' x2='1200' y2='100'/%3E%3Cline x1='0' y1='200' x2='1200' y2='200'/%3E%3Cline x1='0' y1='300' x2='1200' y2='300'/%3E%3Cline x1='0' y1='400' x2='1200' y2='400'/%3E%3Cline x1='0' y1='500' x2='1200' y2='500'/%3E%3Cline x1='200' y1='0' x2='200' y2='600'/%3E%3Cline x1='400' y1='0' x2='400' y2='600'/%3E%3Cline x1='600' y1='0' x2='600' y2='600'/%3E%3Cline x1='800' y1='0' x2='800' y2='600'/%3E%3Cline x1='1000' y1='0' x2='1000' y2='600'/%3E%3C/g%3E%3C!-- Water Mains (Blue) --%3E%3Cg stroke='%232196F3' stroke-width='4' fill='none'%3E%3Cpath d='M50 150 Q200 120 350 140 T650 160 Q800 150 950 170'/%3E%3Cpath d='M100 250 L300 240 Q450 230 600 250 L900 260'/%3E%3Cpath d='M150 350 Q400 340 650 360 L1000 370'/%3E%3Cpath d='M80 450 L280 440 Q500 450 750 460 Q900 455 1100 470'/%3E%3C/g%3E%3C!-- Sewer Mains (Brown) --%3E%3Cg stroke='%23795548' stroke-width='3' fill='none'%3E%3Cpath d='M70 180 Q250 170 400 185 T700 200 Q850 195 1050 210'/%3E%3Cpath d='M120 280 L320 270 Q480 275 630 285 L880 290'/%3E%3Cpath d='M180 380 Q420 375 680 385 L980 390'/%3E%3Cpath d='M110 480 L310 475 Q530 485 780 490 Q920 485 1120 500'/%3E%3C/g%3E%3C!-- Property Parcels (Green outlines) --%3E%3Cg stroke='%234CAF50' stroke-width='2' fill='%234CAF50' fill-opacity='0.1'%3E%3Crect x='220' y='120' width='80' height='60'/%3E%3Crect x='320' y='110' width='100' height='80'/%3E%3Crect x='450' y='130' width='90' height='70'/%3E%3Crect x='580' y='115' width='85' height='65'/%3E%3Crect x='720' y='125' width='95' height='75'/%3E%3Crect x='250' y='220' width='70' height='55'/%3E%3Crect x='370' y='210' width='110' height='85'/%3E%3Crect x='520' y='230' width='80' height='60'/%3E%3Crect x='650' y='215' width='90' height='70'/%3E%3Crect x='200' y='320' width='85' height='65'/%3E%3Crect x='340' y='310' width='95' height='75'/%3E%3Crect x='480' y='330' width='100' height='80'/%3E%3Crect x='620' y='315' width='75' height='55'/%3E%3C/g%3E%3C!-- Map Markers --%3E%3Cg%3E%3Ccircle cx='260' cy='150' r='8' fill='%23FF5722'/%3E%3Ccircle cx='410' cy='270' r='8' fill='%23FF5722'/%3E%3Ccircle cx='580' cy='350' r='8' fill='%23FF5722'/%3E%3Ccircle cx='750' cy='180' r='8' fill='%23FF5722'/%3E%3C/g%3E%3C!-- Legend --%3E%3Cg transform='translate(50, 50)'%3E%3Crect x='0' y='0' width='200' height='100' fill='white' stroke='%23DDD' rx='5'/%3E%3Ctext x='10' y='20' font-family='Arial' font-size='14' font-weight='bold' fill='%23333'%3EInfrastructure Layers%3C/text%3E%3Cline x1='10' y1='35' x2='30' y2='35' stroke='%232196F3' stroke-width='4'/%3E%3Ctext x='35' y='40' font-family='Arial' font-size='12' fill='%23666'%3EWater Mains%3C/text%3E%3Cline x1='10' y1='55' x2='30' y2='55' stroke='%23795548' stroke-width='3'/%3E%3Ctext x='35' y='60' font-family='Arial' font-size='12' fill='%23666'%3ESewer Lines%3C/text%3E%3Crect x='10' y='70' width='20' height='15' fill='%234CAF50' fill-opacity='0.3' stroke='%234CAF50'/%3E%3Ctext x='35' y='82' font-family='Arial' font-size='12' fill='%23666'%3EProperty Parcels%3C/text%3E%3C/g%3E%3C/svg%3E"
|
||||
alt="Interactive map showing San Diego's infrastructure including water mains, sewer lines, and property parcels with community markers"
|
||||
style={styles.heroImage}
|
||||
onMouseEnter={handleImageHover}
|
||||
onMouseLeave={handleImageLeave}
|
||||
|
|
@ -510,60 +530,122 @@ const ArchitecturalShowcase: React.FC = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section style={styles.purpose} aria-labelledby="replacement-heading">
|
||||
{/* Purpose Section */}
|
||||
<section style={styles.purpose} aria-labelledby="purpose-heading">
|
||||
<div style={styles.purposeContent}>
|
||||
<h2 id="replacement-heading" style={styles.purposeTitle}>Your Text Here</h2>
|
||||
<h2 id="purpose-heading" style={styles.purposeTitle}>
|
||||
Empowering San Diego's Development Community
|
||||
</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.
|
||||
Our platform bridges the gap between raw infrastructure data and actionable community insights. By combining real-time GeoJSON data from San Diego's open APIs with community-driven collaboration tools, we create a comprehensive resource for property
|
||||
buyers, builders, city planners, and engaged citizens to make informed decisions about our city's future.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={styles.servicesSection}>
|
||||
{/* Services Section */}
|
||||
<section style={styles.servicesSection} id="services">
|
||||
<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.
|
||||
<h2 style={styles.servicesTitle}>Comprehensive Infrastructure Solutions</h2>
|
||||
<p style={styles.servicesSubtitle}>
|
||||
From real-time data visualization to community collaboration—everything you need to understand San Diego's infrastructure landscape.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.serviceCard}>
|
||||
<h3 style={styles.serviceTitle}>
|
||||
Green<br />
|
||||
Building<br />
|
||||
Consultation
|
||||
</h3>
|
||||
<div style={styles.servicesGrid} className="services-grid">
|
||||
{/* Service Cards (keep all 6 as you had) */}
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>🗺️</div>
|
||||
<h3 style={styles.serviceTitle}>Interactive Infrastructure Mapping</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
Our experts guide you through the process of creating environmentally friendly structures that align with your goals.
|
||||
Visualize San Diego's complete infrastructure network including sewer mains, water lines, pipelines, and zoning areas. Toggle layers, zoom into specific neighborhoods, and access real-time GeoJSON data from official city APIs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={styles.serviceCard}>
|
||||
<h3 style={styles.serviceTitle}>
|
||||
Project<br />
|
||||
Planning<br />
|
||||
& Development
|
||||
</h3>
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>👥</div>
|
||||
<h3 style={styles.serviceTitle}>Community Collaboration Hub</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
From concept to completion, we provide comprehensive planning services tailored to sustainable living and building principles.
|
||||
Connect with builders, property buyers, city planners, and fellow citizens. Participate in location-based discussions, share insights about infrastructure challenges, and collaborate on development projects in your area.
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>📈</div>
|
||||
<h3 style={styles.serviceTitle}>Analytics & Decision Support</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
Access comprehensive analytics to evaluate infrastructure density, property development feasibility, and resource availability. Make data-driven decisions with heatmaps, trend analysis, and infrastructure capacity assessments.
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>🏘️</div>
|
||||
<h3 style={styles.serviceTitle}>Property Development Tools</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
Essential tools for real estate developers and builders. Check infrastructure availability before starting projects, view ongoing public works, assess development feasibility, and access zoning information for informed decision-making.
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>📊</div>
|
||||
<h3 style={styles.serviceTitle}>Issue Reporting & Crowdsourcing</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
Report infrastructure issues directly from the map interface. Crowdsource problem identification, track repair status, and contribute to maintaining accurate, community-verified infrastructure data across San Diego.
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.serviceCard} onMouseEnter={handleServiceCardHover} onMouseLeave={handleServiceCardLeave}>
|
||||
<div style={styles.serviceIcon}>🚀</div>
|
||||
<h3 style={styles.serviceTitle}>Future City Expansion</h3>
|
||||
<p style={styles.serviceDescription}>
|
||||
Built for scalability beyond San Diego. Our platform architecture supports expansion to other cities, additional datasets including environmental and transportation data, and integration with multiple municipal data sources.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section style={{ ...styles.purpose, backgroundColor: '#ffffff' }} aria-labelledby="features-heading">
|
||||
<div style={styles.purposeContent}>
|
||||
<h2 id="features-heading" style={styles.purposeTitle}>
|
||||
Why Choose MapLayer SD?
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
||||
gap: '3rem',
|
||||
marginTop: '3rem',
|
||||
textAlign: 'left' as const,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>📍 Hyper-Local Focus</h3>
|
||||
<p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
|
||||
Unlike generic mapping solutions, we specialize exclusively in San Diego's infrastructure, providing unmatched detail and accuracy for local development needs.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>🔄 Real-Time Data</h3>
|
||||
<p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
|
||||
Direct integration with San Diego's open data APIs ensures you always have the most current infrastructure information available.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', color: '#1a1a1a', marginBottom: '1rem' }}>🤝 Community-Driven</h3>
|
||||
<p style={{ color: '#6a6a6a', lineHeight: 1.6 }}>
|
||||
Beyond visualization—we foster collaboration between builders, buyers, planners, and citizens for better urban development outcomes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer style={styles.footer}>
|
||||
<div style={styles.footerContent}>
|
||||
<p style={styles.footerText}>
|
||||
© 2024 MapLayer SD - San Diego Infrastructure & Community Mapping Platform. Empowering informed urban development through data transparency and community collaboration.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue