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 { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import OpenLayerMap from './components/UI/Map/OpenLayerMap';
|
||||
import Homepage from './components/UI/Homepage/homepage';
|
||||
import ArchitecturalShowcase from './components/UI/Homepage/showcase';
|
||||
|
||||
function App() {
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ function App() {
|
|||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Homepage />} />
|
||||
<Route path="/" element={<ArchitecturalShowcase />} />
|
||||
<Route path="/open" element={<OpenLayerMap />} />
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: white;
|
||||
.showcase {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
background: var(--color-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.homepage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
.navigation {
|
||||
position: fixed;
|
||||
/* Header */
|
||||
.showcase__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background: transparent;
|
||||
padding: 50px 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-100%);
|
||||
animation: slideDown var(--animation-medium) var(--ease-smooth) 0.1s forwards;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
.showcase__nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 80px;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: white;
|
||||
.showcase__logo {
|
||||
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;
|
||||
font-size: 16px;
|
||||
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;
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
transition: color var(--animation-fast) var(--ease-smooth);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
.showcase__nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #ffffff;
|
||||
background: var(--color-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--animation-medium) var(--ease-bounce);
|
||||
}
|
||||
|
||||
/* Hero Section - Split Layout */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
.showcase__nav-links a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Left Section - White background with image */
|
||||
.left-section {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
.showcase__nav-links a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 100%;
|
||||
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;
|
||||
.showcase__contact-btn {
|
||||
background: var(--color-primary);
|
||||
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 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 5.5rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.85;
|
||||
letter-spacing: 1px;
|
||||
.showcase__contact-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
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;
|
||||
color: #ffffff;
|
||||
transition: transform var(--animation-slow) var(--ease-smooth);
|
||||
}
|
||||
|
||||
.showcase__image-container:hover .showcase__hero-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Purpose Section */
|
||||
.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;
|
||||
font-weight: 400;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-top: 25px;
|
||||
opacity: 0.3;
|
||||
font-weight: 500;
|
||||
@keyframes slideInLeft {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imageReveal {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
.showcase__nav {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.left-section,
|
||||
.right-section {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.showcase__nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
gap: 40px;
|
||||
padding: 0 20px;
|
||||
.showcase__hero {
|
||||
padding: var(--spacing-lg) var(--spacing-sm);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
.showcase__hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
.showcase__purpose-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
.showcase__image-section {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-container {
|
||||
gap: 25px;
|
||||
.showcase__logo {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 12px;
|
||||
.showcase__hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
.showcase__purpose-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.left-section,
|
||||
.right-section {
|
||||
transition: all 0.8s ease;
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.left-section:hover .hero-img {
|
||||
.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;
|
||||
}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);
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.hero-img {
|
||||
transition: transform 0.8s ease;
|
||||
/* Purpose Section */
|
||||
.showcase__purpose {
|
||||
background: var(--color-background-alt);
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
margin-top: var(--spacing-xxl);
|
||||
}
|
||||
|
||||
/* Ensure proper stacking */
|
||||
.navigation {
|
||||
z-index: 1000;
|
||||
.showcase__purpose-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-xxl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
z-index: 1;
|
||||
.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 */
|
||||
@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