Added Homepage
This commit is contained in:
parent
1fa7370370
commit
57084cb429
4 changed files with 1223 additions and 479 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||||
import OpenLayerMap from './components/UI/Map/OpenLayerMap';
|
import OpenLayerMap from './components/UI/Map/OpenLayerMap';
|
||||||
import Homepage from './components/UI/Homepage/homepage';
|
import ArchitecturalShowcase from './components/UI/Homepage/showcase';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
|
|
@ -10,7 +10,7 @@ function App() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Homepage />} />
|
<Route path="/" element={<ArchitecturalShowcase />} />
|
||||||
<Route path="/open" element={<OpenLayerMap />} />
|
<Route path="/open" element={<OpenLayerMap />} />
|
||||||
|
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|
|
||||||
|
|
@ -1,242 +1,721 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
|
/* Generated from reference image; drop into project. */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-primary: #000000;
|
||||||
|
--color-text: #333333;
|
||||||
|
--color-text-light: #666666;
|
||||||
|
--color-background: #ffffff;
|
||||||
|
--color-background-alt: #f8f9fa;
|
||||||
|
--color-accent: #007bff;
|
||||||
|
--spacing-xs: 0.5rem;
|
||||||
|
--spacing-sm: 1rem;
|
||||||
|
--spacing-md: 1.5rem;
|
||||||
|
--spacing-lg: 2rem;
|
||||||
|
--spacing-xl: 3rem;
|
||||||
|
--spacing-xxl: 4rem;
|
||||||
|
--border-radius: 8px;
|
||||||
|
--border-radius-lg: 12px;
|
||||||
|
--animation-fast: 0.2s;
|
||||||
|
--animation-medium: 0.4s;
|
||||||
|
--animation-slow: 0.8s;
|
||||||
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-lifted: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
/* Reset and Base Styles */
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.showcase {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
background-color: white;
|
color: var(--color-text);
|
||||||
|
line-height: 1.6;
|
||||||
|
background: var(--color-background);
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homepage {
|
/* Header */
|
||||||
position: relative;
|
.showcase__header {
|
||||||
width: 100%;
|
position: sticky;
|
||||||
height: 100vh;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation Styles */
|
|
||||||
.navigation {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
background: rgba(255, 255, 255, 0.95);
|
||||||
width: 100%;
|
backdrop-filter: blur(10px);
|
||||||
z-index: 1000;
|
z-index: 100;
|
||||||
background: transparent;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
padding: 50px 0;
|
transform: translateY(-100%);
|
||||||
|
animation: slideDown var(--animation-medium) var(--ease-smooth) 0.1s forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-container {
|
.showcase__nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 80px;
|
justify-content: space-between;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-lg);
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.showcase__logo {
|
||||||
color: white;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__logo-icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__nav-links {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__nav-links a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 16px;
|
color: var(--color-text);
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover {
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link.active {
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
transition: color var(--animation-fast) var(--ease-smooth);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link.active::after {
|
.showcase__nav-links a::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -8px;
|
bottom: -4px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #ffffff;
|
background: var(--color-primary);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Section - Split Layout */
|
.showcase__nav-links a:hover {
|
||||||
.hero-section {
|
color: var(--color-primary);
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left Section - White background with image */
|
.showcase__nav-links a:hover::after {
|
||||||
.left-section {
|
transform: scaleX(1);
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-placeholder {
|
.showcase__contact-btn {
|
||||||
width: 100%;
|
background: var(--color-primary);
|
||||||
height: 100%;
|
|
||||||
background: #2a2a2a;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: scale-down;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right Section - Blue gradient */
|
|
||||||
.right-section {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #3d6db0 100%);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 180px;
|
|
||||||
right: 80px;
|
|
||||||
text-align: left;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-xs) var(--spacing-md);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all var(--animation-fast) var(--ease-smooth);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.showcase__contact-btn::before {
|
||||||
font-family: 'Playfair Display', serif;
|
content: '';
|
||||||
font-size: 5.5rem;
|
position: absolute;
|
||||||
font-weight: 400;
|
top: 0;
|
||||||
line-height: 0.85;
|
left: -100%;
|
||||||
letter-spacing: 1px;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||||
|
transition: left var(--animation-medium) var(--ease-smooth);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-line {
|
.showcase__contact-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-lifted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__contact-btn:hover::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.showcase__hero {
|
||||||
|
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
animation: fadeInUp var(--animation-slow) var(--ease-smooth) 0.3s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-content {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-title {
|
||||||
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0 0 var(--spacing-md) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0 0 var(--spacing-xl) 0;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-md) var(--spacing-lg);
|
||||||
|
border-radius: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
transition: all var(--animation-medium) var(--ease-bounce);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-arrow {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn:hover {
|
||||||
|
transform: translateY(-3px) scale(1.02);
|
||||||
|
box-shadow: var(--shadow-lifted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn:hover .showcase__cta-arrow {
|
||||||
|
transform: translateX(4px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image Section */
|
||||||
|
.showcase__image-section {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__image-container {
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(50px) scale(0.95);
|
||||||
|
animation: imageReveal var(--animation-slow) var(--ease-smooth) 0.6s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
color: #ffffff;
|
transition: transform var(--animation-slow) var(--ease-smooth);
|
||||||
opacity: 1;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.showcase__image-container:hover .showcase__hero-image {
|
||||||
display: block;
|
transform: scale(1.05);
|
||||||
color: rgba(255, 255, 255, 0.9);
|
}
|
||||||
margin-top: 25px;
|
|
||||||
opacity: 0.3;
|
/* Purpose Section */
|
||||||
font-weight: 500;
|
.showcase__purpose {
|
||||||
|
background: var(--color-background-alt);
|
||||||
|
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||||
|
margin-top: var(--spacing-xxl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-xxl);
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 var(--spacing-md) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
animation: slideInLeft var(--animation-medium) var(--ease-smooth) 0.9s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-description {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0 0 var(--spacing-lg) 0;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__learn-more-btn {
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all var(--animation-fast) var(--ease-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__learn-more-btn:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
animation: fadeInUp var(--animation-medium) var(--ease-smooth) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:nth-child(1) {
|
||||||
|
animation-delay: 1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:nth-child(2) {
|
||||||
|
animation-delay: 1.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:hover .showcase__feature-icon {
|
||||||
|
transform: scale(1.1) rotate(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 var(--spacing-sm) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-description {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes slideDown {
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInLeft {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes imageReveal {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Design */
|
/* Responsive Design */
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.hero-title {
|
|
||||||
font-size: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-container {
|
|
||||||
gap: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
bottom: 60px;
|
|
||||||
right: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.hero-section {
|
.showcase__nav {
|
||||||
flex-direction: column;
|
padding: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-section,
|
.showcase__nav-links {
|
||||||
.right-section {
|
display: none;
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-container {
|
.showcase__hero {
|
||||||
gap: 40px;
|
padding: var(--spacing-lg) var(--spacing-sm);
|
||||||
padding: 0 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.showcase__hero-title {
|
||||||
font-size: 14px;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.showcase__purpose-content {
|
||||||
font-size: 3.5rem;
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
.showcase__image-section {
|
||||||
bottom: 40px;
|
padding: var(--spacing-sm);
|
||||||
right: 40px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.nav-container {
|
.showcase__logo {
|
||||||
gap: 25px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.showcase__hero-title {
|
||||||
font-size: 12px;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.showcase__purpose-title {
|
||||||
font-size: 2.8rem;
|
font-size: 2rem;
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Smooth transitions */
|
/* Accessibility */
|
||||||
.left-section,
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.right-section {
|
*,
|
||||||
transition: all 0.8s ease;
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hover effects */
|
.showcase__nav-links a:focus,
|
||||||
.left-section:hover .hero-img {
|
.showcase__contact-btn:focus,
|
||||||
|
.showcase__cta-btn:focus,
|
||||||
|
.showcase__learn-more-btn:focus {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loaded state trigger */
|
||||||
|
.showcase--loaded .showcase__hero {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__image-container {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__purpose-title {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__feature {
|
||||||
|
animation-play-state: running;
|
||||||
|
}title {
|
||||||
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0 0 var(--spacing-md) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0 0 var(--spacing-xl) 0;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-md) var(--spacing-lg);
|
||||||
|
border-radius: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
transition: all var(--animation-medium) var(--ease-bounce);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-arrow {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn:hover {
|
||||||
|
transform: translateY(-3px) scale(1.02);
|
||||||
|
box-shadow: var(--shadow-lifted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__cta-btn:hover .showcase__cta-arrow {
|
||||||
|
transform: translateX(4px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image Section */
|
||||||
|
.showcase__image-section {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__image-container {
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(50px) scale(0.95);
|
||||||
|
animation: imageReveal var(--animation-slow) var(--ease-smooth) 0.6s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
transition: transform var(--animation-slow) var(--ease-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__image-container:hover .showcase__hero-image {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
transition: transform 0.8s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Loading states */
|
/* Purpose Section */
|
||||||
.hero-img {
|
.showcase__purpose {
|
||||||
transition: transform 0.8s ease;
|
background: var(--color-background-alt);
|
||||||
|
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||||
|
margin-top: var(--spacing-xxl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensure proper stacking */
|
.showcase__purpose-content {
|
||||||
.navigation {
|
max-width: 1200px;
|
||||||
z-index: 1000;
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-xxl);
|
||||||
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section {
|
.showcase__purpose-title {
|
||||||
z-index: 1;
|
font-size: 2.5rem;
|
||||||
}
|
font-weight: 700;
|
||||||
|
margin: 0 0 var(--spacing-md) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
animation: slideInLeft var(--animation-medium) var(--ease-smooth) 0.9s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-description {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0 0 var(--spacing-lg) 0;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__learn-more-btn {
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all var(--animation-fast) var(--ease-smooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__learn-more-btn:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__features {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
animation: fadeInUp var(--animation-medium) var(--ease-smooth) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:nth-child(1) {
|
||||||
|
animation-delay: 1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:nth-child(2) {
|
||||||
|
animation-delay: 1.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature:hover .showcase__feature-icon {
|
||||||
|
transform: scale(1.1) rotate(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 var(--spacing-sm) 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__feature-description {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes slideDown {
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInLeft {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes imageReveal {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.showcase__nav {
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__image-section {
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.showcase__logo {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__hero-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__purpose-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase__nav-links a:focus,
|
||||||
|
.showcase__contact-btn:focus,
|
||||||
|
.showcase__cta-btn:focus,
|
||||||
|
.showcase__learn-more-btn:focus {
|
||||||
|
outline: 2px solid var(--color-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loaded state trigger */
|
||||||
|
.showcase--loaded .showcase__hero {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__image-container {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__purpose-title {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase--loaded .showcase__feature {
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,307 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
||||||
import bgImage from '../../../assets/1.jpeg';
|
|
||||||
|
|
||||||
const LaHomeWebsite: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
width: '100vw',
|
|
||||||
height: '100vh',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
fontFamily: "'Inter', sans-serif",
|
|
||||||
color: 'white',
|
|
||||||
backgroundColor: '#000',
|
|
||||||
overflow: 'hidden',
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
left: 0
|
|
||||||
}}>
|
|
||||||
{/* Add link to Google Fonts in the head */}
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
|
||||||
|
|
||||||
{/* Main Container */}
|
|
||||||
<div style={{
|
|
||||||
width: '100%',
|
|
||||||
backgroundImage: `url(${bgImage})`, // Use a local image for the background
|
|
||||||
// backgroundImage: 'url(https://www.lummi.ai/api/render/image/43ea442c-f9b6-48ae-8ba6-cc594a1697d0?token=eyJhbGciOiJIUzI1NiJ9.eyJpZCI6IjQzZWE0NDJjLWY5YjYtNDhhZS04YmE2LWNjNTk0YTE2OTdkMCIsImRvd25sb2FkU2l6ZSI6Im1lZGl1bSIsInJlbmRlclNwZWNzIjp7ImVmZmVjdHMiOnsicmVmcmFtZSI6e319fSwic2hvdWxkQXV0b0Rvd25sb2FkIjpmYWxzZSwianRpIjoiWTJBYU9mWnd1WmtZZWlwU1RhWUlHIiwiaWF0IjoxNzUxMDY1NDk0LCJleHAiOjE3NTEwNjU1NTR9.KFn5ZQku4-hwjlBKCBh6qJVCPdHIaGnK1HCryl7KQYQ)',
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
backgroundRepeat: 'no-repeat'
|
|
||||||
}}>
|
|
||||||
{/* Navigation */}
|
|
||||||
<nav style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: '24px 48px',
|
|
||||||
background: 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%)'
|
|
||||||
}}>
|
|
||||||
<div style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: 400, // Regular weight
|
|
||||||
color: 'white',
|
|
||||||
letterSpacing: '1px'
|
|
||||||
}}>
|
|
||||||
lahome.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: '32px'
|
|
||||||
}}>
|
|
||||||
{['About us', 'Services', 'Team', 'For sale'].map((item) => (
|
|
||||||
<a
|
|
||||||
key={item}
|
|
||||||
href="#"
|
|
||||||
style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
textDecoration: 'none',
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: 400,
|
|
||||||
transition: 'color 0.3s ease'
|
|
||||||
}}
|
|
||||||
onMouseOver={(e) => (e.target as HTMLAnchorElement).style.color = 'white'}
|
|
||||||
onMouseOut={(e) => (e.target as HTMLAnchorElement).style.color = 'rgba(255, 255, 255, 0.8)'}
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
||||||
color: 'white',
|
|
||||||
padding: '12px 24px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: 400,
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease'
|
|
||||||
}}
|
|
||||||
onMouseOver={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
||||||
}}
|
|
||||||
onMouseOut={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'transparent';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
||||||
}}>
|
|
||||||
Contact us
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Main Content Container */}
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
height: 'calc(100% - 96px)',
|
|
||||||
padding: '0 48px'
|
|
||||||
}}>
|
|
||||||
{/* Content Box with Border */}
|
|
||||||
<div style={{
|
|
||||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
||||||
borderRadius: '0px',
|
|
||||||
padding: '64px',
|
|
||||||
width: '100%',
|
|
||||||
maxWidth: '1400px',
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.1)'
|
|
||||||
}}>
|
|
||||||
{/* Main Heading */}
|
|
||||||
<h1 style={{
|
|
||||||
fontSize: '72px',
|
|
||||||
fontWeight: 300, // Light weight
|
|
||||||
color: 'white',
|
|
||||||
margin: '0 0 64px 0',
|
|
||||||
lineHeight: '1.1',
|
|
||||||
letterSpacing: '-1px'
|
|
||||||
}}>
|
|
||||||
Find your<br />
|
|
||||||
dream house
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* Project Info Grid */}
|
|
||||||
<div style={{
|
|
||||||
display: 'grid',
|
|
||||||
gridTemplateColumns: '1fr 1fr 1fr',
|
|
||||||
gap: '40px',
|
|
||||||
marginBottom: '64px'
|
|
||||||
}}>
|
|
||||||
<div>
|
|
||||||
<div style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
|
||||||
fontSize: '14px',
|
|
||||||
marginBottom: '8px',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '1px',
|
|
||||||
fontWeight: 500 // Medium weight for labels
|
|
||||||
}}>
|
|
||||||
Client
|
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: 400
|
|
||||||
}}>
|
|
||||||
Arlington Schools
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
|
||||||
fontSize: '14px',
|
|
||||||
marginBottom: '8px',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '1px',
|
|
||||||
fontWeight: 500
|
|
||||||
}}>
|
|
||||||
Location
|
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: 400
|
|
||||||
}}>
|
|
||||||
Japan
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.6)',
|
|
||||||
fontSize: '14px',
|
|
||||||
marginBottom: '8px',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '1px',
|
|
||||||
fontWeight: 500
|
|
||||||
}}>
|
|
||||||
Year
|
|
||||||
</div>
|
|
||||||
<div style={{
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: 400
|
|
||||||
}}>
|
|
||||||
May, 2022
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bottom Section */}
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
borderTop: '1px solid rgba(255, 255, 255, 0.2)',
|
|
||||||
paddingTop: '40px'
|
|
||||||
}}>
|
|
||||||
{/* Description */}
|
|
||||||
<div style={{
|
|
||||||
maxWidth: '440px'
|
|
||||||
}}>
|
|
||||||
<p style={{
|
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
fontSize: '16px',
|
|
||||||
lineHeight: '1.6',
|
|
||||||
margin: '0 0 24px 0',
|
|
||||||
fontWeight: 400
|
|
||||||
}}>
|
|
||||||
You have the vision for a stunning digital<br />
|
|
||||||
experience. More tips with your design and<br />
|
|
||||||
engineering team through bring about it.
|
|
||||||
</p>
|
|
||||||
<button style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
||||||
color: 'white',
|
|
||||||
padding: '12px 24px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: 400,
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease'
|
|
||||||
}}
|
|
||||||
onMouseOver={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
||||||
}}
|
|
||||||
onMouseOut={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'transparent';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
||||||
}}>
|
|
||||||
View project
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation Arrows */}
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: '12px'
|
|
||||||
}}>
|
|
||||||
<button style={{
|
|
||||||
width: '48px',
|
|
||||||
height: '48px',
|
|
||||||
borderRadius: '50%',
|
|
||||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease'
|
|
||||||
}}
|
|
||||||
onMouseOver={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
||||||
}}
|
|
||||||
onMouseOut={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'transparent';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
||||||
}}>
|
|
||||||
<ChevronLeft size={20} color="white" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button style={{
|
|
||||||
width: '48px',
|
|
||||||
height: '48px',
|
|
||||||
borderRadius: '50%',
|
|
||||||
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease'
|
|
||||||
}}
|
|
||||||
onMouseOver={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
||||||
}}
|
|
||||||
onMouseOut={(e) => {
|
|
||||||
const target = e.target as HTMLButtonElement;
|
|
||||||
target.style.backgroundColor = 'transparent';
|
|
||||||
target.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
||||||
}}>
|
|
||||||
<ChevronRight size={20} color="white" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LaHomeWebsite;
|
|
||||||
572
src/components/UI/Homepage/showcase.tsx
Normal file
572
src/components/UI/Homepage/showcase.tsx
Normal file
|
|
@ -0,0 +1,572 @@
|
||||||
|
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;
|
||||||
Loading…
Reference in a new issue