diff --git a/src/assets/1.jpeg b/src/assets/1.jpeg deleted file mode 100644 index a590d2e..0000000 Binary files a/src/assets/1.jpeg and /dev/null differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/UI/Homepage/homepage.css b/src/components/UI/Homepage/homepage.css deleted file mode 100644 index 79756cf..0000000 --- a/src/components/UI/Homepage/homepage.css +++ /dev/null @@ -1,721 +0,0 @@ -/* 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); -} - -* { - box-sizing: border-box; -} - -.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; -} - -/* Header */ -.showcase__header { - position: sticky; - top: 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; -} - -.showcase__nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--spacing-sm) var(--spacing-lg); - max-width: 1200px; - margin: 0 auto; -} - -.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; - color: var(--color-text); - font-weight: 500; - position: relative; - transition: color var(--animation-fast) var(--ease-smooth); -} - -.showcase__nav-links a::after { - content: ''; - position: absolute; - bottom: -4px; - left: 0; - right: 0; - height: 2px; - background: var(--color-primary); - transform: scaleX(0); - transition: transform var(--animation-medium) var(--ease-bounce); -} - -.showcase__nav-links a:hover { - color: var(--color-primary); -} - -.showcase__nav-links a:hover::after { - transform: scaleX(1); -} - -.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; -} - -.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); -} - -.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; - 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; - 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; -}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); -} - -/* 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; - 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; -} diff --git a/src/components/UI/Homepage/showcase.tsx b/src/components/UI/Homepage/showcase.tsx index 7b51fe5..3d47435 100644 --- a/src/components/UI/Homepage/showcase.tsx +++ b/src/components/UI/Homepage/showcase.tsx @@ -447,48 +447,7 @@ const ArchitecturalShowcase: React.FC = () => { 🗺️ MapLayer SD -