diff --git a/src/pages/get-started/index.tsx b/src/pages/get-started/index.tsx index 0f10c19f..2c0a88ae 100644 --- a/src/pages/get-started/index.tsx +++ b/src/pages/get-started/index.tsx @@ -124,10 +124,11 @@ function GetStartedHeader() { return (
+
-
- Start -
- {texts.map((text, i) => ( - - {text} - - ))} -
- Today +
+ Start  + + Code + Build + Deploy + Learn + +  Today
diff --git a/src/pages/get-started/styles.module.css b/src/pages/get-started/styles.module.css index 22ab02e9..8b0031e5 100644 --- a/src/pages/get-started/styles.module.css +++ b/src/pages/get-started/styles.module.css @@ -82,25 +82,40 @@ color: white; border: none; } +.buttonPrimary { + background: rgba(255, 255, 255, 0.05); + color: #fff !important; + border: 2px solid #4CC9F0; + backdrop-filter: blur(8px); + border-image:linear-gradient(to right, #4CC9F0,#60a5fa)1; + } + .buttonPrimary{ + animation: pulse-glow 4s infinite; +} +@keyframes pulse-glow { + 0%{ box-shadow: 0 0 0 0 rgba(76,201,240,0.3); } + 70% { box-shadow: 0 0 0 15px rgba(76,201,240 ,0); } 100% { box-shadow: 0 0 0 0 rgba(76 ,201 ,240,0); } } + .buttonPrimary:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); - background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); -} + transform: translateY(-3px); + background: #4CC9F0; + box-shadow: 0 8px 24px rgba(76,201,240,0.4); border-color: rgba(255, 255, 255, 0.3); color: #0a0a0a !important; + } .buttonOutline { - background: rgba(255, 255, 255, 0.1); - color: white; - border: 2px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.05); + color: #fff !important; + border: 2px solid #4CC9F0; backdrop-filter: blur(8px); -} + } .buttonOutline:hover { - transform: translateY(-2px); - background: rgba(255, 255, 255, 0.15); - box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); + transform: translateY(-3px); + background:#4CC9F0; + box-shadow: 0 8px 24px rgba(76, 201,240,0.4); border-color: rgba(255, 255, 255, 0.3); + color: #0a0a0a !important; } .buttonIcon { @@ -155,11 +170,11 @@ } .heroBanner { - padding: 4rem 1rem; + padding: 6rem 2rem; text-align: center; position: relative; overflow: hidden; - background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; z-index: 1; } @@ -184,7 +199,14 @@ padding: 7rem 2rem; } } - +.heroOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height:100%; + background: rgba(0,0,40,0.4); +} .heroBanner::before { content: ''; position: absolute; @@ -198,12 +220,7 @@ z-index: -1; } -.highlight { - color: #60a5fa; - font-weight: 700; - position: relative; - display: inline-block; -} +.highlight { color: #4CC9F0; font-weight: 700; position: relative; display: inline-block; } .highlight::after { content: ''; @@ -212,10 +229,10 @@ left: 0; width: 100%; height: 4px; - background: #60a5fa; + background: linear-gradient(to right, #4CC9F0,#60a5fa); border-radius: 2px; transform: scaleX(0); - transform-origin: right; + transform-origin: left; transition: transform 0.5s ease; } @@ -229,7 +246,7 @@ margin-bottom: 1rem; line-height: 1.2; font-weight: 800; - background: linear-gradient(to right, #fff, #e0e7ff); + background: linear-gradient(90deg, #ffffff 0%, #dbeafe 40%, #a5f3fc 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -238,8 +255,9 @@ transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; padding: 0 1rem; + text-shadow: none; } - +.heroContent{ position: relative; z-index: 2; } /* Tablet */ @media (min-width: 640px) { .hero__title { @@ -268,12 +286,13 @@ font-size: 1.125rem; max-width: 100%; margin: 0 auto 2rem; - color: #e2e8f0; + color: #d1d5db; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease 0.2s forwards; - line-height: 1.6; + line-height: 1.75; padding: 0 1rem; + text-shadow: 0 2px 5px rgba(0,0,0,0.5) } /* Tablet */ @@ -468,6 +487,10 @@ background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); } +.feature:hover .featureTitle::after { + width: 60px; + background: linear-gradient(90deg, var(--feature-color, #3b82f6), rgba(59, 130, 246, 0.8)); } + .feature:hover .featureIcon { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); @@ -819,109 +842,125 @@ } .typingContainer { - margin: 2.5rem 0 3rem; - font-size: 1.75rem; - font-weight: 800; - color: white; - text-align: center; - display: flex; - justify-content: center; - align-items: center; -} - - - -.typingText::before { - content: ''; - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(45deg, #60a5fa, #818cf8, #a78bfa, #c084fc); - background-size: 400% 400%; - z-index: -1; - border-radius: 50px; - opacity: 0.5; - animation: gradient 8s ease infinite; -} - -@keyframes gradient { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } + display: flex; + align-items: center; + justify-content: center; + margin-top: 4rem; + font-size: 2.8rem; + font-weight: 700; + color: white; + z-index: 2; + line-height: 1.5; + gap: 2rem; + padding: 1.5rem 2.5rem; + border-radius: 1.5rem; + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(14px) saturate(180%); + -webkit-backdrop-filter: blur(14px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); + flex-wrap: nowrap; } -.typingAnimation { - position: relative; - height: 2.5rem; - overflow: hidden; - min-width: 220px; - display: flex; - align-items: center; - justify-content: center; - flex: 1; - text-align: center; +.staticText { + font-weight: 700; + font-size: 2rem; + background: linear-gradient(90deg, #4CC9F0, #A29BFE, #4CC9F0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-transform: uppercase; + letter-spacing: 1px; + margin: 0; + white-space: nowrap; + flex: 0 0 auto; +} + +.dynamicText { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + text-align: left; /* align dynamic text horizontally */ + min-width: 10ch; + font-size: 2rem; + height: 1.7rem; + overflow: hidden; + padding: 0 0.4rem; + flex: 0 1 auto; } .typingWord { - position: absolute; - opacity: 0; - transform: translateY(20px); - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - background: linear-gradient(135deg, #60a5fa, #818cf8); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - text-fill-color: transparent; - font-weight: 900; - white-space: nowrap; - text-shadow: 0 2px 10px rgba(96, 165, 250, 0.3); -} + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + animation: typing 12s ease-in-out infinite; + white-space: nowrap; + background: linear-gradient(90deg, #00f2fe, #4facfe); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 700; + letter-spacing: 0.5px; +} + +.typingWord:nth-child(1) { animation-delay: 0s; } +.typingWord:nth-child(2) { animation-delay: 3s; } +.typingWord:nth-child(3) { animation-delay: 6s; } +.typingWord:nth-child(4) { animation-delay: 9s; } + +@keyframes typing { + 0% { opacity: 0; transform: translate(-50%, 100%); } + 5% { opacity: 1; transform: translate(-50%, -50%); } + 20% { opacity: 1; transform: translate(-50%, -50%); } + 25% { opacity: 0; transform: translate(-50%, -200%); } + 100% { opacity: 0; } +} + +.dynamicText::after { + content: '|'; + position: absolute; + right: -1ch; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #4CC9F0, #A29BFE); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: blink 1s infinite; + font-weight: 400; + font-size: 1.9rem; + line-height: 2.6rem; +} + +@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } -.typingWord.visible { - opacity: 1; - transform: translateY(0); - animation: textGlow 2s ease-in-out infinite alternate; -} - -@keyframes textGlow { - from { - text-shadow: 0 0 5px rgba(96, 165, 250, 0.6); - } - to { - text-shadow: 0 0 15px rgba(96, 165, 250, 0.9); +@media (max-width: 1024px) { + .typingContainer { + font-size: 2rem; + gap: 1rem; + padding: 1rem 1.5rem; } + .typingContainer { font-size: 2rem; gap: 0.5rem; padding: 1rem 1.5rem; } + .staticText { font-size: 1.6rem; } + .dynamicText { font-size: 1.6rem; height: 2rem; } + .typingWord { font-size: 1.6rem; line-height: 2rem; } + .dynamicText::after { font-size: 1.6rem; line-height: 2rem; } } -.staticText { - font-weight: 700; - color: #e2e8f0; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - white-space: nowrap; - padding: 0 0.5rem; - display: flex; - align-items: center; -} +/* Small screens (mobile) */ +@media (max-width: 600px) { + .typingContainer { + font-size: 1.4rem; + flex-direction: column; + gap: 0.4rem; + padding: 0.8rem 1rem; + } + .staticText { font-size: 1.2rem; text-align: center; } + .dynamicText { font-size: 1.2rem; height: 1.8rem; } + .typingWord { font-size: 1.2rem; line-height: 1.8rem; } + .dynamicText::after { font-size: 1.2rem; line-height: 1.8rem; } -.typingText { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - background: rgba(255, 255, 255, 0.05); - padding: 1.25rem 2.5rem; - border-radius: 50px; - backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - position: relative; - overflow: hidden; - min-width: 500px; - box-sizing: border-box; - transition: all 0.3s ease; } - /* Ensure touch targets are large enough for mobile */ .button, .pathLink { min-height: 44px;