diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..dc3f8be --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,1513 @@ +/* FONTS */ +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); + +:root { + /* COLOR PALETTE */ + /* Backgrounds */ + --bg-primary: #0A0E1A; + --bg-secondary: #0F1728; + --bg-tertiary: #1A2035; + + /* Accents */ + --cyan: #00F5FF; + --cyan-dark: #00BFD8; + --purple: #A855F7; + --purple-dark: #8B3FD8; + --pink: #FF006E; + + /* Text */ + --text-white: #FFFFFF; + --text-gray: #CBD5E1; + --text-muted: #64748B; + + /* Gradients */ + --gradient-primary: linear-gradient(135deg, #00F5FF 0%, #A855F7 100%); + --gradient-cyan: linear-gradient(135deg, #00F5FF 0%, #00BFD8 100%); + + /* TYPOGRAPHY */ + /* Fonts */ + --font-heading: 'Space Grotesk', sans-serif; + --font-body: 'Inter', sans-serif; + + /* Sizes */ + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 20px; + --text-2xl: 24px; + --text-3xl: 32px; + --text-4xl: 42px; + --text-5xl: 56px; + + /* Weights */ + --weight-regular: 400; + --weight-medium: 500; + --weight-semibold: 600; + --weight-bold: 700; + + /* Line Heights */ + --leading-tight: 1.2; + --leading-normal: 1.6; + --leading-relaxed: 1.8; + + /* SPACING (8px base) */ + --space-1: 8px; + --space-2: 16px; + --space-3: 24px; + --space-4: 32px; + --space-6: 48px; + --space-8: 64px; + --space-12: 96px; + --space-16: 128px; + --space-20: 160px; + + /* ANIMATIONS */ + --duration-fast: 200ms; + --duration-normal: 300ms; + --duration-slow: 500ms; + + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +body { + background-color: var(--bg-primary); + font-family: var(--font-body); + color: var(--text-gray); + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* HEADER */ +#mainHeader { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 80px; + z-index: 1000; + background: transparent; + transition: all 300ms; +} + +#mainHeader.scrolled { + background: rgba(10,14,26,0.9); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(0,245,255,0.1); + box-shadow: 0 4px 24px rgba(0,0,0,0.5); +} + +.inner-container { + max-width: 1400px; + margin: 0 auto; + padding: 0 48px; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo-container { + padding: 12px 32px; + background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(168,85,247,0.1)); + border: 1px solid rgba(0,245,255,0.3); + border-radius: 50px; + backdrop-filter: blur(10px); + cursor: pointer; + transition: all 300ms; + position: relative; +} + +.logo-text { + font-family: 'Space Grotesk'; + font-size: 24px; + font-weight: 700; + background: linear-gradient(135deg, #00F5FF, #A855F7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; +} + +.logo-container:hover { + transform: scale(1.05); + box-shadow: 0 0 30px rgba(0,245,255,0.5); +} + +.main-nav { + display: flex; + align-items: center; + gap: 8px; +} + +.nav-link { + padding: 12px 20px; + font-family: 'Space Grotesk'; + font-size: 16px; + font-weight: 500; + color: #CBD5E1; + text-decoration: none; + border-radius: 12px; + transition: all 200ms; +} + +.main-nav { + display: flex; + align-items: center; + gap: 8px; +} + +.nav-link { + padding: 12px 20px; + font-family: 'Space Grotesk'; + font-size: 16px; + font-weight: 500; + color: #CBD5E1; + text-decoration: none; + border-radius: 12px; + transition: all 200ms; + display: flex; + align-items: center; + gap: 6px; +} + +.nav-link:hover, +.nav-link.active { + color: #FFFFFF; + background: rgba(0,245,255,0.1); +} + +.nav-link .chevron { + font-size: 12px; + transition: transform var(--duration-fast) var(--ease-smooth); + margin-left: 4px; +} + +.nav-dropdown { + position: relative; +} + +.dropdown-menu { + position: absolute; + top: calc(100% + 16px); + left: 0; + min-width: 320px; + background: #0F1728; + border: 1px solid rgba(0,245,255,0.2); + border-radius: 16px; + padding: 16px; + box-shadow: 0 16px 48px rgba(0,0,0,0.6); + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 300ms var(--ease-smooth); + z-index: 1001; + display: flex; + flex-direction: column; + gap: 8px; +} + +.nav-dropdown:hover .dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.nav-dropdown:hover .nav-link .chevron { + transform: rotate(180deg); +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 16px; + padding: 16px; + border-radius: 12px; + transition: all 200ms var(--ease-smooth); + text-decoration: none; + background: transparent; +} + +.dropdown-item:hover { + background: rgba(0,245,255,0.1); + transform: translateX(4px); +} + +.dropdown-item-icon { + font-size: 24px; +} + +.dropdown-item-text { + display: flex; + flex-direction: column; +} + +.dropdown-item-title { + font-size: 16px; + font-weight: var(--weight-semibold); + color: var(--text-white); +} + +.dropdown-item-subtitle { + font-size: 14px; + font-weight: var(--weight-regular); + color: #64748B; +} + +/* Header Right */ +.header-right { + display: flex; + align-items: center; + gap: var(--space-2); /* Reduced gap */ +} + +/* Language Switcher */ +.lang-switcher-container { + position: relative; +} + +.lang-switcher { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 16px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + font: 14px 'Inter', medium; + color: #CBD5E1; + cursor: pointer; + transition: all var(--duration-fast); +} + +.lang-switcher:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.2); +} + +.lang-switcher .flag-icon { + width: 20px; + height: 20px; + border-radius: 50%; + object-fit: cover; +} + +.lang-switcher .chevron { + font-size: 12px; + transition: transform var(--duration-fast) var(--ease-smooth); +} + +.lang-switcher-container.open .lang-switcher .chevron { + transform: rotate(180deg); +} + +.lang-dropdown { + position: absolute; + top: calc(100% + 8px); + right: 0; + min-width: 150px; + background: #0F1728; + border: 1px solid rgba(0,245,255,0.2); + border-radius: 12px; + padding: 8px; + box-shadow: 0 8px 32px rgba(0,0,0,0.5); + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: all 300ms var(--ease-smooth); + z-index: 1001; + display: flex; + flex-direction: column; + gap: 4px; +} + +.lang-switcher-container.open .lang-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.lang-dropdown a { + padding: 10px 16px; + font-size: 14px; + color: var(--text-gray); + text-decoration: none; + border-radius: 8px; + transition: all var(--duration-fast); +} + +.lang-dropdown a:hover { + background: rgba(0,245,255,0.1); + color: var(--text-white); +} + +/* Cart Button */ +.cart-button { + padding: 12px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + color: #CBD5E1; + cursor: pointer; + transition: all var(--duration-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.cart-button:hover { + background: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.2); + color: var(--text-white); +} + +.cart-icon { + width: 24px; + height: 24px; +} + +.ki-newsletter-btn { + font-size: 15px; + padding: 10px 20px; +} + +.btn { + font-family: var(--font-heading); + font-weight: var(--weight-bold); + border-radius: 50px; + padding: var(--space-1) var(--space-3); + border: 1px solid transparent; + transition: all var(--duration-normal) var(--ease-smooth); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: var(--text-white); + border-color: rgba(255, 255, 255, 0.2); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.2); + border-color: var(--cyan); +} + +.mobile-toggle { + display: none; /* Hidden by default */ + flex-direction: column; + gap: 5px; + cursor: pointer; + background: none; + border: none; + padding: 0; +} + +.mobile-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text-white); + transition: all 0.3s ease; +} + + +@media (max-width: 1200px) { /* Adjust breakpoint as needed */ + .main-nav { + display: none; + } + .header-right { + gap: var(--space-2); + } + .ki-newsletter-btn, .lang-switcher, .cart-icon { + display: none; /* Hide desktop utils */ + } + .mobile-toggle { + display: flex; /* Show mobile toggle */ + } +} + +/* HERO SECTION */ +.hero-section { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding: 160px 48px 120px; /* top accounts for fixed header */ + background: #0A0E1A; + overflow: hidden; +} + +.hero-background-effects { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; +} + +.hero-grid-overlay { + position: absolute; + inset: 0; + background-image: linear-gradient(rgba(0,245,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,255,0.05) 1px, transparent 1px); + background-size: 50px 50px; + opacity: 0.1; /* Reduced from 0.3 */ + z-index: 0; +} + +.hero-orb { + position: absolute; + border-radius: 50%; + will-change: transform, opacity; +} + +.orb-1 { + width: 500px; + height: 500px; + position: absolute; + top: 10%; + left: 20%; + background: radial-gradient(circle, rgba(0,245,255,0.15) 0%, transparent 60%); /* Softer gradient */ + filter: blur(100px); /* Increased blur */ + animation: subtle-float 30s ease-in-out infinite; /* New animation */ + z-index: 0; +} + +.orb-2 { + width: 600px; + height: 600px; + position: absolute; + bottom: 10%; + right: 15%; + background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 60%); /* Softer gradient */ + filter: blur(120px); /* Increased blur */ + animation: subtle-float 35s ease-in-out infinite; /* New animation */ + animation-delay: -15s; + z-index: 0; +} + +@keyframes subtle-float { + 0% { + transform: translateY(20px) translateX(0px) scale(1); + opacity: 0.9; + } + 50% { + transform: translateY(-30px) translateX(25px) scale(1.05); + opacity: 1; + } + 100% { + transform: translateY(20px) translateX(0px) scale(1); + opacity: 0.9; + } +} + +.hero-content-container { + position: relative; + z-index: 1; /* above background */ + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 96px; + align-items: center; + width: 100%; + padding: 0 var(--space-6); +} + +.glass-container { + background: rgba(15, 23, 40, 0.6); + backdrop-filter: blur(20px); + border-radius: 16px; + padding: var(--space-6); + border: 1px solid rgba(0, 245, 255, 0.1); + box-shadow: 0 8px 32px rgba(0,0,0,0.3); +} + +.hero-headline { + font-family: var(--font-heading); + font-size: var(--text-5xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: var(--leading-tight); + margin-bottom: var(--space-3); +} + +.gradient-text { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; +} + +.hero-subtext { + font-size: var(--text-lg); + line-height: var(--leading-relaxed); + color: var(--text-gray); + margin-bottom: var(--space-4); + max-width: 550px; +} + +.btn-primary { + background: var(--gradient-primary); + color: var(--text-white); + padding: var(--space-2) var(--space-4); + font-size: var(--text-base); + text-decoration: none; + display: inline-flex; + align-items: center; + gap: var(--space-2); +} + +.btn-primary:hover { + color: var(--text-white); + filter: brightness(1.1); + box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); +} + +.arrow-icon { + width: 20px; + height: 20px; + transition: transform var(--duration-fast) var(--ease-smooth); +} + +.btn-primary:hover .arrow-icon { + transform: translateX(4px); +} + +/* Hero Right Visual */ +.hero-right { + perspective: 1000px; +} + +.hero-visual-stack { + position: relative; + width: 340px; + height: 400px; + transform-style: preserve-3d; + animation: stack-sway 20s ease-in-out infinite alternate; +} + +@keyframes stack-sway { + from { transform: rotateX(10deg) rotateY(-15deg); } + to { transform: rotateX(10deg) rotateY(15deg); } +} + +.hero-card { + position: absolute; + width: 100%; + height: auto; + padding: var(--space-3); + background: rgba(26, 32, 53, 0.7); + border: 1px solid rgba(0, 245, 255, 0.2); + border-radius: 12px; + backdrop-filter: blur(10px); + box-shadow: 0 10px 40px rgba(0,0,0,0.4); + display: flex; + align-items: center; + gap: var(--space-3); + will-change: transform; + animation: card-float 8s ease-in-out infinite; +} + +.card-icon { + font-size: 28px; +} +.card-text { + font-size: var(--text-base); + color: var(--text-gray); + line-height: var(--leading-normal); + margin: 0; +} +.card-text strong { + color: var(--text-white); + font-weight: var(--weight-semibold); +} + +.card-1 { + animation-delay: 0s; +} +.card-2 { + animation-delay: -2.66s; +} +.card-3 { + animation-delay: -5.33s; +} + +@keyframes card-float { + 0%, 100% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(0px); } + 50% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(-20px); } +} + +.card-1 { --y-pos: 0px; --z-pos: 0px; --rot: -5deg; } +.card-2 { --y-pos: 120px; --z-pos: -40px; --rot: 3deg; } +.card-3 { --y-pos: 240px; --z-pos: -80px; --rot: -2deg; } + + +/* Scroll Indicator */ +.scroll-indicator { + position: absolute; + bottom: var(--space-4); + left: 50%; + transform: translateX(-50%); + cursor: pointer; + opacity: 0.7; + transition: opacity var(--duration-fast); +} +.scroll-indicator:hover { + opacity: 1; +} + +.mouse-icon { + width: 24px; + height: 40px; + border: 2px solid var(--text-muted); + border-radius: 12px; + position: relative; +} + +.scroll-wheel { + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 8px; + background: var(--text-muted); + border-radius: 2px; + animation: scroll-anim 2s ease-in-out infinite; +} + +@keyframes scroll-anim { + 0% { transform: translate(-50%, 0); opacity: 1; } + 50% { transform: translate(-50%, 10px); opacity: 1; } + 100% { transform: translate(-50%, 20px); opacity: 0; } +} + +@media (max-width: 1023px) { + .hero-content-container { + grid-template-columns: 1fr; + gap: 64px; + text-align: center; + } + .hero-left { + order: 2; + } + .hero-right { + order: 1; + margin: 0 auto; + } + .hero-subtext { + margin-left: auto; + margin-right: auto; + } + .hero-headline { + font-size: var(--text-4xl); + } +} +@media (max-width: 767px) { + .hero-section { + min-height: 800px; + } + .hero-headline { + font-size: var(--text-3xl); + } + .glass-container { + padding: var(--space-4); + } + .hero-visual-stack { + transform: scale(0.8); + } +} + +/* GENERAL SECTION STYLING */ +.section-header { + text-align: center; + max-width: 700px; + margin: 0 auto var(--space-8); +} +.section-headline { + font-family: var(--font-heading); + font-size: var(--text-4xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: var(--leading-tight); + margin-bottom: var(--space-2); +} +.section-subtext { + font-size: var(--text-lg); + line-height: var(--leading-relaxed); + color: var(--text-gray); +} +.container-custom { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-6); +} + +/* SOCIAL PROOF SECTION */ +.social-proof-section { + padding: var(--space-8) 0; + background-color: var(--bg-primary); + overflow: hidden; +} + +.social-proof-headline { + text-align: center; + font-family: var(--font-heading); + font-weight: var(--weight-medium); + color: var(--text-muted); + margin-bottom: var(--space-6); +} + +.logo-marquee { + width: 100%; + position: relative; + -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); + mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); +} + +.logo-track { + display: flex; + width: max-content; + animation: marquee 40s linear infinite; +} + +.logo-item { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + font-family: var(--font-heading); + font-size: var(--text-xl); + color: var(--text-muted); + opacity: 0.6; + transition: opacity var(--duration-normal), color var(--duration-normal); +} +.logo-item:hover { + color: var(--text-gray); + opacity: 1; +} + +@keyframes marquee { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +/* VALUE PROPOSITION SECTION */ +.value-prop-section { + padding: var(--space-16) 0; + background-color: var(--bg-primary); +} + +.value-cards-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-6); +} + +.value-card { + background: var(--bg-secondary); + border: 1px solid transparent; + border-radius: 12px; + padding: var(--space-6) var(--space-4); + text-align: center; + transition: transform var(--duration-normal) var(--ease-smooth), + border-color var(--duration-normal) var(--ease-smooth), + box-shadow var(--duration-normal) var(--ease-smooth); + position: relative; + overflow: hidden; +} + +.value-card:hover { + transform: translateY(-10px); + border-color: rgba(0, 245, 255, 0.3); + box-shadow: 0 10px 30px rgba(0,0,0,0.2); +} + +.value-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0, 245, 255, 0.1), transparent 40%); + transition: opacity var(--duration-slow); + opacity: 0; + animation: rotate 10s linear infinite; + z-index: 0; +} + +.value-card > * { + position: relative; + z-index: 1; +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.value-card:hover::before { + opacity: 1; +} + +.value-card-icon-wrapper { + margin: 0 auto var(--space-4); + width: 64px; + height: 64px; + border-radius: 50%; + background: var(--bg-tertiary); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-3xl); + transition: background-color var(--duration-normal); +} + +.value-card:hover .value-card-icon-wrapper { + background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(168, 85, 247, 0.2)); +} + +.value-card-title { + font-family: var(--font-heading); + font-size: var(--text-xl); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-bottom: var(--space-2); +} + +.value-card-text { + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--text-gray); +} + +/* Scroll Animation */ +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth); +} + +.animate-on-scroll.is-visible { + opacity: 1; + transform: translateY(0); +} + +.value-card.animate-on-scroll:nth-child(2) { + transition-delay: 200ms; +} +.value-card.animate-on-scroll:nth-child(3) { + transition-delay: 400ms; +} + + +@media (max-width: 1023px) { + .value-cards-grid { + grid-template-columns: 1fr; + } +} + +/* HOW IT WORKS SECTION */ +.how-it-works-section { + background: var(--bg-secondary); + padding: var(--space-16) 0; + position: relative; +} + +.timeline { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--space-6); + max-width: 1200px; + margin: 0 auto; + position: relative; +} + +.timeline::before { + content: ''; + position: absolute; + top: 32px; /* Vertically center with the number */ + left: 100px; + right: 100px; + height: 2px; + background: linear-gradient(90deg, var(--cyan), var(--purple)); + z-index: 0; + opacity: 0.3; + animation: gradient-flow 3s linear infinite; + background-size: 200% 100%; +} + +@keyframes gradient-flow { + 0% { background-position: 0% 50%; } + 100% { background-position: 200% 50%; } +} + +.step-card { + position: relative; + z-index: 1; + text-align: center; + flex: 1; + padding: 0 var(--space-3); +} + +.step-number { + font-family: var(--font-heading); + font-size: 64px; + font-weight: var(--weight-bold); + color: transparent; + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); + line-height: 1; + margin-bottom: var(--space-4); +} + +.step-icon { + font-size: 28px; + margin-bottom: var(--space-3); + display: block; + color: var(--cyan); +} + +.step-title { + font-family: var(--font-heading); + font-size: var(--text-xl); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-bottom: var(--space-2); +} + +.step-text { + font-size: var(--text-base); + color: var(--text-gray); + line-height: var(--leading-normal); +} + +@media (max-width: 1023px) { + .timeline { + flex-direction: column; + align-items: center; + gap: var(--space-8); + } + .timeline::before { + top: 50px; + left: 50%; + transform: translateX(-50%); + bottom: 50px; + width: 2px; + height: auto; + right: auto; + background: linear-gradient(180deg, var(--cyan), var(--purple)); + } + .step-card { + text-align: center; + max-width: 400px; + } +} + +/* FINAL CTA SECTION */ +.final-cta-section { + padding: var(--space-16) 0; + background-color: var(--bg-primary); +} + +.cta-badge { + display: inline-block; + padding: var(--space-1) var(--space-2); + border: 1px solid var(--cyan); + border-radius: 50px; + color: var(--cyan); + font-family: var(--font-heading); + font-weight: var(--weight-bold); + font-size: var(--text-sm); + letter-spacing: 1px; + margin-bottom: var(--space-3); +} + +.cta-headline { + font-family: var(--font-heading); + font-size: var(--text-5xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: var(--leading-tight); + margin-bottom: var(--space-6); + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +.button-group { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.btn-lg { + padding: var(--space-2) var(--space-6); + font-size: var(--text-lg); +} + +.trust-badges { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: var(--space-4); + color: var(--text-muted); +} + +.trust-badges span { + font-weight: var(--weight-medium); +} + +@media (max-width: 767px) { + .cta-headline { + font-size: var(--text-4xl); + } + .button-group { + flex-direction: column; + align-items: stretch; + } +} + +/* FOOTER */ +#main-footer { + background: #060815; + border-top: 1px solid rgba(0,245,255,0.2); + padding: var(--space-12) 0 var(--space-4); + position: relative; +} + +.footer-grid { + max-width: 1400px; + margin: 0 auto var(--space-8); + display: grid; + grid-template-columns: 1.2fr 1fr 1fr 1.2fr; + gap: var(--space-8); +} + +.footer-column { + /* styles for each column */ +} + +.footer-logo { + display: inline-block; + padding: 10px 24px; + background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(168,85,247,0.1)); + border: 1px solid rgba(0,245,255,0.3); + border-radius: 50px; + font: 20px 'Space Grotesk', bold; + color: transparent; /* Fallback for browsers that don't support background-clip */ + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: var(--space-3); + background-image: var(--gradient-primary); +} + +.footer-tagline { + font-size: var(--text-base); + color: var(--text-muted); + line-height: var(--leading-normal); + margin-bottom: var(--space-3); +} + +.footer-email { + display: flex; + align-items: center; + gap: 10px; + font-size: var(--text-base); + font-weight: var(--weight-medium); + color: var(--cyan); + text-decoration: none; + transition: color var(--duration-fast); +} + +.footer-email:hover { + filter: brightness(110%); + text-decoration: underline; +} + +.email-icon { + width: 20px; + height: 20px; +} + +.footer-heading { + font-family: var(--font-heading); + font-weight: var(--weight-semibold); + font-size: var(--text-lg); + color: var(--text-white); + margin-bottom: var(--space-3); +} + +.footer-links { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.footer-links a { + color: var(--text-gray); + text-decoration: none; + transition: color var(--duration-fast); +} + +.footer-links a:hover { + color: var(--cyan); + text-decoration: underline; +} + +.footer-newsletter-text { + color: var(--text-gray); + margin-bottom: var(--space-3); + line-height: var(--leading-normal); +} + +.newsletter-form { + position: relative; + max-width: 300px; +} + +.newsletter-form input { + width: 100%; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + padding: 12px 48px 12px 16px; + color: var(--text-white); + font-family: var(--font-body); +} + +.newsletter-form input::placeholder { + color: var(--text-muted); +} + +.newsletter-form input:focus { + outline: none; + border-color: var(--cyan); + box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2); +} + +.newsletter-form button { + position: absolute; + right: 4px; + top: 4px; + bottom: 4px; + width: 36px; + background: var(--cyan); + border: none; + border-radius: 6px; + color: var(--bg-primary); + cursor: pointer; + transition: background-color var(--duration-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.newsletter-form button:hover { + background: var(--cyan-dark); +} + +.footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: var(--space-4); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2); +} + +.copyright { + color: var(--text-muted); + font-size: var(--text-sm); + margin: 0; +} + +.social-links { + display: flex; + gap: var(--space-2); +} + +.social-links a { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 50%; + color: var(--text-gray); + text-decoration: none; + transition: all var(--duration-fast); +} + +.social-links a:hover { + background: var(--cyan); + border-color: var(--cyan); + color: var(--bg-primary); + transform: translateY(-2px); +} + +@media (max-width: 1023px) { + .footer-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-6); + } +} + +@media (max-width: 767px) { + #main-footer { + padding-top: var(--space-8); + } + .footer-grid { + grid-template-columns: 1fr; + gap: var(--space-6); + } + .footer-bottom { + flex-direction: column; + gap: var(--space-3); + } +} + +/* COOKIE BANNER */ +.cookie-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 9999; + background: rgba(15, 23, 40, 0.95); + backdrop-filter: blur(20px); + border-top: 1px solid rgba(0, 245, 255, 0.2); + padding: var(--space-3) var(--space-4); + box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); + transform: translateY(100%); + opacity: 0; + visibility: hidden; + transition: all 400ms var(--ease-smooth); +} + +.cookie-banner.visible { + transform: translateY(0); + opacity: 1; + visibility: visible; +} + +.cookie-content { + max-width: 1400px; + margin: 0 auto; + display: flex; + align-items: center; + gap: var(--space-4); +} + +.cookie-text { + flex: 1; +} + +.cookie-heading { + font-family: var(--font-heading); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-bottom: var(--space-1); + font-size: var(--text-lg); +} + +.cookie-description { + font-size: var(--text-sm); + color: var(--text-gray); + line-height: var(--leading-normal); + margin: 0; +} + +.cookie-link { + color: var(--cyan); + text-decoration: none; +} + +.cookie-link:hover { + text-decoration: underline; +} + +.cookie-buttons { + display: flex; + gap: var(--space-2); +} + +.cookie-btn { + padding: 10px var(--space-3); + border-radius: 8px; + border: 1px solid transparent; + font-family: var(--font-body); + font-weight: var(--weight-semibold); + cursor: pointer; + transition: all var(--duration-fast); +} + +.cookie-accept { + background: var(--cyan); + color: var(--bg-primary); +} + +.cookie-accept:hover { + background: var(--cyan-dark); +} + +.cookie-reject { + background: transparent; + border-color: var(--text-muted); + color: var(--text-gray); +} + +.cookie-reject:hover { + background: rgba(255,255,255,0.1); + border-color: var(--text-gray); +} + +@media (max-width: 1023px) { + .cookie-content { + flex-direction: column; + align-items: stretch; + gap: var(--space-3); + } +} + +/* MOBILE MENU */ +.mobile-menu { + position: fixed; + inset: 0; + z-index: 999; /* below header (1000) */ + background: rgba(10, 14, 26, 0.98); + backdrop-filter: blur(30px); + transform: translateX(100%); + visibility: hidden; + opacity: 0; + transition: all 400ms var(--ease-smooth); + display: none; /* Hidden by default, shown via media query */ + color: var(--text-white); +} + +.mobile-menu.open { + transform: translateX(0); + visibility: visible; + opacity: 1; +} + +body.menu-open { + overflow: hidden; +} + +.mobile-menu-content { + padding: var(--space-12) var(--space-6) var(--space-6); + display: flex; + flex-direction: column; + height: 100%; +} + +.mobile-close { + position: absolute; + top: var(--space-4); + right: var(--space-6); + background: none; + border: none; + color: var(--text-gray); + cursor: pointer; +} + +.mobile-close:hover { + color: var(--text-white); +} + +.mobile-nav { + flex: 1; + display: flex; + flex-direction: column; +} + +.mobile-nav-link { + font-family: var(--font-heading); + font-size: var(--text-3xl); + font-weight: var(--weight-medium); + color: var(--text-white); + text-decoration: none; + padding: var(--space-2) 0; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +.mobile-nav-section .mobile-nav-link { + display: flex; + justify-content: space-between; + align-items: center; + background: none; + border: none; + width: 100%; + padding: var(--space-2) 0; + border-bottom: 1px solid rgba(255,255,255,0.1); + font-family: var(--font-heading); + font-size: var(--text-3xl); +} + +.toggle-icon { + transition: transform var(--duration-normal); + font-size: 16px; +} + +.mobile-nav-section.open .toggle-icon { + transform: rotate(180deg); +} + +.mobile-subsection { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-in-out; + background: rgba(0,0,0,0.2); + padding-left: var(--space-3); +} + +.mobile-subnav-link { + display: block; + color: var(--text-gray); + text-decoration: none; + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +.mobile-subnav-link:hover { + color: var(--text-white); + background: rgba(0, 245, 255, 0.1); +} + +.mobile-menu-footer { + padding-top: var(--space-4); + text-align: center; +} + +.lang-switcher-mobile { + margin-top: var(--space-4); + color: var(--text-muted); +} + +.lang-switcher-mobile a { + color: var(--text-gray); + text-decoration: none; + padding: 0 var(--space-1); + font-weight: var(--weight-bold); +} + +.lang-switcher-mobile a.active { + color: var(--cyan); +} + +@media (max-width: 1023px) { + .mobile-menu { + display: block; + } +} diff --git a/assets/images/flag-de.svg b/assets/images/flag-de.svg new file mode 100644 index 0000000..9edca5f --- /dev/null +++ b/assets/images/flag-de.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/flag-en.svg b/assets/images/flag-en.svg new file mode 100644 index 0000000..08aa480 --- /dev/null +++ b/assets/images/flag-en.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/flag-tr.svg b/assets/images/flag-tr.svg new file mode 100644 index 0000000..3f7eb26 --- /dev/null +++ b/assets/images/flag-tr.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e0e4a04 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,144 @@ +document.addEventListener('DOMContentLoaded', function () { + const header = document.getElementById('mainHeader'); + + if (header) { + window.addEventListener('scroll', function () { + if (window.scrollY > 100) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + }); + } + + // Intersection Observer for animations + const animatedElements = document.querySelectorAll('.animate-on-scroll'); + if (animatedElements.length > 0) { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + // Optional: unobserve after animation + // observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.1 + }); + + animatedElements.forEach(el => { + observer.observe(el); + }); + } + + // Newsletter Form Handler + const newsletterForm = document.getElementById('newsletterForm'); + if (newsletterForm) { + newsletterForm.addEventListener('submit', function(e) { + e.preventDefault(); + const emailInput = newsletterForm.querySelector('input[type="email"]'); + if (emailInput.value) { + alert('Danke für Ihr Interesse! Sie wurden zu unserem Newsletter hinzugefügt.'); + emailInput.value = ''; + } else { + alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.'); + } + }); + } + + // Cookie Banner Handler + const cookieBanner = document.getElementById('cookieBanner'); + const cookieAccept = document.getElementById('cookieAccept'); + const cookieReject = document.getElementById('cookieReject'); + const cookieConsent = localStorage.getItem('cookie_consent'); + + // Show banner if no consent has been given + if (!cookieConsent) { + setTimeout(() => { + cookieBanner.classList.add('visible'); + }, 1000); // Delay showing the banner slightly + } + + const handleCookieConsent = (consent) => { + localStorage.setItem('cookie_consent', consent); + cookieBanner.classList.remove('visible'); + }; + + if(cookieAccept) { + cookieAccept.addEventListener('click', () => handleCookieConsent('accepted')); + } + if(cookieReject) { + cookieReject.addEventListener('click', () => handleCookieConsent('rejected')); + } + + // Mobile Menu Handler + const mobileToggle = document.querySelector('.mobile-toggle'); + const mobileMenu = document.getElementById('mobileMenu'); + const closeMobileMenu = document.getElementById('closeMobileMenu'); + const body = document.body; + + const openMenu = () => { + mobileMenu.classList.add('open'); + body.classList.add('menu-open'); + }; + + const closeMenu = () => { + mobileMenu.classList.remove('open'); + body.classList.remove('menu-open'); + }; + + if (mobileToggle && mobileMenu) { + mobileToggle.addEventListener('click', openMenu); + } + + if (closeMobileMenu) { + closeMobileMenu.addEventListener('click', closeMenu); + } + + // Close menu when clicking a link inside + const mobileNavLinks = mobileMenu.querySelectorAll('a[href^="#"]'); + mobileNavLinks.forEach(link => { + link.addEventListener('click', () => { + // Don't close for section toggles + if (!link.parentElement.classList.contains('mobile-subsection')) { + closeMenu(); + } + }); + }); + + // Accordion for mobile sub-menu + const sectionToggles = mobileMenu.querySelectorAll('.section-toggle'); + sectionToggles.forEach(toggle => { + toggle.addEventListener('click', () => { + const section = toggle.parentElement; + const subsection = section.querySelector('.mobile-subsection'); + + section.classList.toggle('open'); + + if (section.classList.contains('open')) { + subsection.style.maxHeight = subsection.scrollHeight + 'px'; + } else { + subsection.style.maxHeight = '0'; + } + }); + }); + + // Language Switcher Handler + const langSwitcherBtn = document.getElementById('langSwitcherBtn'); + const langDropdown = document.getElementById('langDropdown'); + const langSwitcherContainer = document.querySelector('.lang-switcher-container'); + + if (langSwitcherBtn && langDropdown && langSwitcherContainer) { + langSwitcherBtn.addEventListener('click', (event) => { + event.stopPropagation(); // Prevent the click from immediately closing the dropdown + langSwitcherContainer.classList.toggle('open'); + }); + + document.addEventListener('click', (event) => { + if (!langSwitcherContainer.contains(event.target)) { + langSwitcherContainer.classList.remove('open'); + } + }); + + } +}); \ No newline at end of file diff --git a/includes/lang_loader.php b/includes/lang_loader.php new file mode 100644 index 0000000..52d5d4a --- /dev/null +++ b/includes/lang_loader.php @@ -0,0 +1,21 @@ + - - + + + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Future Now - KI-Beratung + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+
+
+ Future Now +
+ +
+
+ + +
+ + + +
+
+
+ + +
+ + +
+ + +
+ Jetzt KI-Check starten +
+ Sprache: + DE + EN +
+
+
-
- + +
+
+
+
+
+
+
+
+
+
+

+ +

+

+ +

+ + + + + + +
+
+
+
+
+ 🎯 +

Zielgerichtete Strategie
Personalisierte KI-Roadmap

+
+
+ ⚙️ +

Effiziente Prozesse
Automatisierungspotenziale aufdecken

+
+
+ 📈 +

Nachhaltiges Wachstum
Wettbewerbsvorteile sichern

+
+
+
+
+ +
+
+
+ +
+ + +
+
+ +
+
+
Unternehmen A
+
Startup B
+
Kanzlei C
+
Praxis D
+
Handwerk E
+
Agentur F
+
Beratung G
+
Konzern H
+ +
Unternehmen A
+
Startup B
+
Kanzlei C
+
Praxis D
+
Handwerk E
+
Agentur F
+
Beratung G
+
Konzern H
+
+
+
+
+ + +
+
+
+

Ihr schneller Weg zum KI-Vorsprung

+

Wir machen Komplexes einfach und liefern Ihnen in kürzester Zeit einen klaren, umsetzbaren Plan.

+
+
+ +
+
+ 🗺️ +
+

Schritt-für-Schritt Blueprint

+

Sie erhalten eine klare Roadmap, die genau auf Ihr Unternehmen zugeschnitten ist – keine vagen Empfehlungen.

+
+ +
+
+ ✅ +
+

Konkrete Use Cases

+

Wir identifizieren die profitabelsten KI-Anwendungen für Ihre Branche und Ihre spezifischen Prozesse.

+
+ +
+
+ 🚀 +
+

Sofortige Umsetzung

+

Unsere Ergebnisse sind so aufbereitet, dass Sie direkt mit der Implementierung beginnen können.

+
+
+
+
+ + +
+
+
+

So einfach geht's

+

Von der ersten Frage bis zu Ihrem persönlichen KI-Blueprint

+
+
+ +
+
01
+
+ 📋 +

Fragen beantworten

+

Füllen Sie unseren intelligenten Fragebogen in ca. 5-10 Minuten aus. Ihre Antworten bilden die Grundlage für Ihre Analyse.

+
+
+ +
+
02
+
+ 🤖 +

KI-Analyse erhalten

+

Unsere KI analysiert Ihre Antworten und erstellt in Echtzeit einen umfassenden Bericht über Ihr Potenzial und Ihre Reife.

+
+
+ +
+
03
+
+ 💡 +

Blueprint umsetzen

+

Sie erhalten konkrete, priorisierte Handlungsempfehlungen, die Sie sofort oder mit unserer Hilfe umsetzen können.

+
+
+
+
+ Starten Sie jetzt Ihre Analyse +
+
+
+ + +
+
+
IHR KI-BLUEPRINT
+

+ Sind Sie bereit für den nächsten Schritt? +

+
+ Jetzt Gratis-Check starten + Beratung anfragen +
+
+ ✅ 100% Kostenlos + 🇩🇪 DSGVO-konform + ⏱️ Nur 5 Minuten +
+
+
+
+ + + + + + + + - + \ No newline at end of file diff --git a/lang/de.php b/lang/de.php new file mode 100644 index 0000000..f80a43b --- /dev/null +++ b/lang/de.php @@ -0,0 +1,27 @@ + 'Home', + 'nav_why_ai' => 'Warum KI?', + 'nav_fuer_wen' => 'Für wen ist KI?', + 'nav_fuer_wen_sub' => 'Zielgruppen & Branchen', + 'nav_why_now' => 'Warum jetzt handeln?', + 'nav_why_now_sub' => 'Marktdynamik & Urgenz', + 'nav_what_is_ai' => 'Was ist KI?', + 'nav_what_is_ai_sub' => 'Grundlagen erklärt', + 'nav_use_cases' => 'Einsatzmöglichkeiten', + 'nav_use_cases_sub' => 'Use Cases & ROI', + 'nav_ai_check' => 'KI-Check', + 'nav_ai_website' => 'KI-Website', + 'nav_prices' => 'Preise', + 'nav_contact' => 'Kontakt', + 'newsletter_button' => 'KI-Newsletter', + 'lang_de' => 'Deutsch', + 'lang_en' => 'English', + 'lang_tr' => 'Türkçe', + + //- Hero + 'hero_headline' => 'KI-Potenzial für Ihr Unternehmen freischalten', + 'hero_subtext' => 'Finden Sie in 5 Minuten heraus, wo Sie bei der KI-Integration stehen. Erhalten Sie einen personalisierten Blueprint, um die nächsten Schritte zu gehen.', + 'hero_cta' => 'Jetzt kostenlosen KI-Check starten', +]; diff --git a/lang/en.php b/lang/en.php new file mode 100644 index 0000000..e8783d9 --- /dev/null +++ b/lang/en.php @@ -0,0 +1,27 @@ + 'Home', + 'nav_why_ai' => 'Why AI?', + 'nav_fuer_wen' => 'Who is AI for?', + 'nav_fuer_wen_sub' => 'Target Groups & Industries', + 'nav_why_now' => 'Why act now?', + 'nav_why_now_sub' => 'Market Dynamics & Urgency', + 'nav_what_is_ai' => 'What is AI?', + 'nav_what_is_ai_sub' => 'Basics explained', + 'nav_use_cases' => 'Use Cases', + 'nav_use_cases_sub' => 'Use Cases & ROI', + 'nav_ai_check' => 'AI-Check', + 'nav_ai_website' => 'AI-Website', + 'nav_prices' => 'Prices', + 'nav_contact' => 'Contact', + 'newsletter_button' => 'AI-Newsletter', + 'lang_de' => 'German', + 'lang_en' => 'English', + 'lang_tr' => 'Turkish', + + //- Hero + 'hero_headline' => 'Unlock AI Potential for Your Business', + 'hero_subtext' => 'Find out in 5 minutes where you stand on AI integration. Receive a personalized blueprint to take the next steps.', + 'hero_cta' => 'Start Your Free AI-Check Now', +]; diff --git a/lang/tr.php b/lang/tr.php new file mode 100644 index 0000000..440b58c --- /dev/null +++ b/lang/tr.php @@ -0,0 +1,27 @@ + 'Ana Sayfa', + 'nav_why_ai' => 'Neden YZ?', + 'nav_fuer_wen' => 'YZ kimin için?', + 'nav_fuer_wen_sub' => 'Hedef Kitleler ve Sektörler', + 'nav_why_now' => 'Neden şimdi?', + 'nav_why_now_sub' => 'Pazar Dinamikleri ve Aciliyet', + 'nav_what_is_ai' => 'YZ nedir?', + 'nav_what_is_ai_sub' => 'Temel Bilgiler', + 'nav_use_cases' => 'Kullanım Alanları', + 'nav_use_cases_sub' => 'Kullanım Alanları ve ROI', + 'nav_ai_check' => 'YZ Kontrolü', + 'nav_ai_website' => 'YZ Web Sitesi', + 'nav_prices' => 'Fiyatlar', + 'nav_contact' => 'İletişim', + 'newsletter_button' => 'YZ Bülteni', + 'lang_de' => 'Almanca', + 'lang_en' => 'İngilizce', + 'lang_tr' => 'Türkçe', + + //- Hero + 'hero_headline' => 'İşletmeniz için Yapay Zeka potansiyelinin kilidini açın', + 'hero_subtext' => '5 dakika içinde YZ entegrasyonunda nerede olduğunuzu öğrenin. Sonraki adımları atmak için kişiselleştirilmiş bir plan alın.', + 'hero_cta' => 'Ücretsiz YZ Kontrolünü Şimdi Başlat', +];