Skip to content

Commit f996437

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #489 from singh-odyssey/Improve-U-geet_started-pageI
Improve UI get_started page
2 parents 2817537 + 7f450a8 commit f996437

File tree

2 files changed

+97
-154
lines changed

2 files changed

+97
-154
lines changed

‎src/pages/get-started/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ function GetStartedHeader() {
166166
</motion.div>
167167

168168
<motion.div
169-
className={styles.buttons}
169+
className={styles.heroButtons}
170170
initial={{ opacity: 0, y: 20 }}
171171
animate={{ opacity: 1, y: 0 }}
172172
transition={{ duration: 0.8, delay: 0.6, ease: "easeOut" }}

‎src/pages/get-started/styles.module.css‎

Lines changed: 96 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,46 @@
1616
background: var(--dark-card-hover-bg);
1717
box-shadow: var(--dark-shadow-lg);
1818
}
19+
/* CTA buttons row (top hero) */
1920
.buttons {
20-
display: flex;
21+
display: inline-flex;
2122
justify-content: center;
2223
align-items: center;
23-
gap: 1.5rem;
24-
margin: 3rem 0 4rem;
25-
width: 100%;
24+
gap: 1rem;
25+
margin: 2rem 0 0;
2626
position: relative;
27-
z-index: 1;
27+
z-index: 2;
28+
}
29+
30+
/* Hero-only buttons container: keeps buttons compact instead of full width */
31+
.heroButtons {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
justify-content: center;
36+
gap: 0.8rem;
37+
margin-top: 1.5rem;
38+
}
39+
40+
.heroButtons .button {
41+
width: 100%;
42+
max-width: 360px;
43+
min-width: 0;
44+
padding: 0.9rem 1.25rem;
45+
border-radius: 999px;
46+
}
47+
48+
@media (max-width: 480px) {
49+
.heroButtons { gap: 0.75rem; width: 100%; padding: 0; }
50+
.heroButtons .button { width: 100%; max-width: 320px; }
2851
}
2952

3053
.button {
3154
display: inline-flex;
3255
align-items: center;
3356
justify-content: center;
34-
padding: 0.9rem 2rem;
35-
border-radius: 8px;
57+
padding: 0.9rem 1.6rem;
58+
border-radius: 10px;
3659
font-weight: 600;
3760
font-size: 1.05rem;
3861
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -41,71 +64,60 @@
4164
overflow: hidden;
4265
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
4366
transform: translateY(0);
67+
width: auto;
4468
}
4569

70+
/* Primary CTA */
4671
.buttonPrimary {
4772
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
48-
color: white;
73+
color: #fff !important;
4974
border: none;
75+
border-radius: 12px;
5076
}
51-
.buttonPrimary {
52-
background: rgba(255, 255, 255, 0.05);
53-
color: #fff !important;
54-
border: 2px solid #4CC9F0;
55-
backdrop-filter: blur(8px);
56-
border-image:linear-gradient(to right, #4CC9F0,#60a5fa)1;
57-
}
58-
.buttonPrimary{
59-
animation: pulse-glow 4s infinite;
60-
}
61-
@keyframes pulse-glow {
62-
0%{ box-shadow: 0 0 0 0 rgba(76,201,240,0.3); }
63-
70% { box-shadow: 0 0 0 15px rgba(76,201,240 ,0); } 100% { box-shadow: 0 0 0 0 rgba(76 ,201 ,240,0); } }
6477

6578

6679
.buttonPrimary:hover {
6780
transform: translateY(-3px);
68-
background: #4CC9F0;
69-
box-shadow: 0 8px 24px rgba(76,201,240,0.4); border-color: rgba(255, 255, 255, 0.3); color: #0a0a0a !important;
70-
}
81+
filter: brightness(1.05);
82+
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
83+
}
7184

85+
.buttonPrimary:focus-visible,
86+
.buttonOutline:focus-visible,
87+
.heroButtons .button:focus-visible {
88+
outline: none;
89+
box-shadow: 0 0 0 3px rgba(59,130,246,0.45), 0 0 0 6px rgba(59,130,246,0.2);
90+
}
91+
92+
/* Secondary CTA */
7293
.buttonOutline {
73-
background: rgba(255, 255, 255, 0.05);
74-
color: #fff !important;
75-
border: 2px solid #4CC9F0;
94+
background: rgba(255, 255, 255, 0.06);
95+
color: #e5e7eb !important;
96+
border: 1px solid rgba(255, 255, 255, 0.25);
7697
backdrop-filter: blur(8px);
77-
}
98+
border-radius: 12px;
99+
}
78100

79101
.buttonOutline:hover {
80102
transform: translateY(-3px);
81-
background:#4CC9F0;
82-
box-shadow: 0 8px 24px rgba(76, 201,240,0.4);
83-
border-color: rgba(255, 255, 255, 0.3);
84-
color: #0a0a0a !important;
103+
background: rgba(255, 255, 255, 0.12);
104+
border-color: rgba(255, 255, 255, 0.35);
105+
color: #ffffff !important;
85106
}
86107

87-
.buttonIcon {
88-
margin-left: 0.6rem;
89-
display: inline-flex;
90-
transition: transform 0.3s ease;
108+
.buttonOutline:hover {
109+
box-shadow: 0 8px 22px rgba(148, 163, 184, 0.15);
91110
}
92111

112+
.buttonIcon { margin-left: 0.6rem; display: inline-flex; transition: transform 0.3s ease; }
113+
93114
.button:hover .buttonIcon {
94-
transform: translateX(4px);
115+
transform: translateX(3px);
95116
}
96117

97118
@media (max-width: 480px) {
98-
.buttons {
99-
flex-direction: column;
100-
gap: 1rem;
101-
margin: 2.5rem 0 3rem;
102-
}
103-
104-
.button {
105-
width: 100%;
106-
max-width: 280px;
107-
margin: 0 auto;
108-
}
119+
.buttons { flex-direction: column; gap: 0.75rem; margin: 1.75rem 0 0; width: 100%; }
120+
.button { width: 100%; max-width: 320px; margin: 0 auto; }
109121
}
110122

111123
.mouse {
@@ -136,11 +148,11 @@
136148
}
137149

138150
.heroBanner {
139-
padding: 6rem 2rem;
151+
padding: 6rem 1.5rem 4rem;
140152
text-align: center;
141153
position: relative;
142154
overflow: hidden;
143-
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
155+
background: radial-gradient(1200px 500px at 50% -100px, #1e3a8a 0%, transparent 70%), linear-gradient(135deg, #0b1220 0%, #13233f 100%);
144156
color: white;
145157
z-index: 1;
146158
}
@@ -165,14 +177,7 @@
165177
padding: 7rem 2rem;
166178
}
167179
}
168-
.heroOverlay {
169-
position: absolute;
170-
top: 0;
171-
left: 0;
172-
width: 100%;
173-
height:100%;
174-
background: rgba(0,0,40,0.4);
175-
}
180+
.heroOverlay { position: absolute; top: 0; left: 0; width: 100%; height:100%; background: radial-gradient(800px 400px at 15% 10%, rgba(59,130,246,0.15), transparent 60%), radial-gradient(800px 400px at 85% 20%, rgba(147,51,234,0.12), transparent 60%); }
176181
.heroBanner::before {
177182
content: '';
178183
position: absolute;
@@ -883,69 +888,31 @@
883888
opacity: 0.9;
884889
}
885890

891+
/* Cleaner, compact hero ticker */
886892
.typingContainer {
887-
display: flex;
888-
align-items: center;
889-
justify-content: center;
890-
margin-top: 4rem;
891-
font-size: 2.8rem;
892-
font-weight: 700;
893-
color: white;
894-
z-index: 2;
895-
line-height: 1.5;
896-
gap: 2rem;
897-
padding: 1.5rem 2.5rem;
898-
border-radius: 1.5rem;
899-
background: rgba(255, 255, 255, 0.08);
900-
backdrop-filter: blur(14px) saturate(180%);
901-
-webkit-backdrop-filter: blur(14px) saturate(180%);
902-
border: 1px solid rgba(255, 255, 255, 0.18);
903-
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
904-
flex-wrap: nowrap;
905-
}
906-
907-
.staticText {
908-
font-weight: 700;
909-
font-size: 2rem;
910-
background: linear-gradient(90deg, #4CC9F0, #A29BFE, #4CC9F0);
911-
-webkit-background-clip: text;
912-
-webkit-text-fill-color: transparent;
913-
text-transform: uppercase;
914-
letter-spacing: 1px;
915-
margin: 0;
916-
white-space: nowrap;
917-
flex: 0 0 auto;
918-
}
919-
920-
.dynamicText {
921-
position: relative;
922-
display: inline-flex;
923-
justify-content: center;
924-
align-items: center;
925-
text-align: left; /* align dynamic text horizontally */
926-
min-width: 10ch;
927-
font-size: 2rem;
928-
height: 1.7rem;
929-
overflow: hidden;
930-
padding: 0 0.4rem;
931-
flex: 0 1 auto;
932-
}
933-
934-
.typingWord {
935-
position: absolute;
936-
top: 50%;
937-
left: 50%;
938-
transform: translate(-50%, -50%);
939-
opacity: 0;
940-
animation: typing 12s ease-in-out infinite;
941-
white-space: nowrap;
942-
background: linear-gradient(90deg, #00f2fe, #4facfe);
943-
-webkit-background-clip: text;
944-
-webkit-text-fill-color: transparent;
945-
font-weight: 700;
946-
letter-spacing: 0.5px;
893+
display: inline-flex;
894+
align-items: center;
895+
justify-content: center;
896+
margin: 1.25rem 0 0;
897+
font-size: 2.2rem;
898+
font-weight: 700;
899+
color: white;
900+
z-index: 2;
901+
line-height: 1.3;
902+
gap: 0.75rem;
903+
padding: 0.6rem 1rem;
904+
border-radius: 999px;
905+
background: rgba(255,255,255,0.06);
906+
border: 1px solid rgba(255,255,255,0.16);
907+
backdrop-filter: blur(10px);
947908
}
948909

910+
.staticText { font-weight: 700; font-size: 1.2rem; background: linear-gradient(90deg, #67e8f9, #93c5fd); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: 1px; margin: 0; white-space: nowrap; flex: 0 0 auto; }
911+
912+
.dynamicText { position: relative; display: inline-flex; justify-content: center; align-items: center; text-align: left; min-width: 9ch; font-size: 1.2rem; height: 1.4rem; overflow: hidden; padding: 0 0.2rem; flex: 0 1 auto; }
913+
914+
.typingWord { 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, #22d3ee, #60a5fa); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: 0.5px; }
915+
949916
.typingWord:nth-child(1) { animation-delay: 0s; }
950917
.typingWord:nth-child(2) { animation-delay: 3s; }
951918
.typingWord:nth-child(3) { animation-delay: 6s; }
@@ -959,49 +926,25 @@
959926
100% { opacity: 0; }
960927
}
961928

962-
.dynamicText::after {
963-
content: '|';
964-
position: absolute;
965-
right: -1ch;
966-
top: 50%;
967-
transform: translateY(-50%);
968-
background: linear-gradient(90deg, #4CC9F0, #A29BFE);
969-
-webkit-background-clip: text;
970-
-webkit-text-fill-color: transparent;
971-
animation: blink 1s infinite;
972-
font-weight: 400;
973-
font-size: 1.9rem;
974-
line-height: 2.6rem;
975-
}
929+
.dynamicText::after { content: '|'; position: absolute; right: -0.6ch; top: 50%; transform: translateY(-50%); background: linear-gradient(90deg, #67e8f9, #a78bfa); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: blink 1s infinite; font-weight: 500; font-size: 1.2rem; line-height: 1.4rem; }
976930

977931
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
978932

979933
@media (max-width: 1024px) {
980-
.typingContainer {
981-
font-size: 2rem;
982-
gap: 1rem;
983-
padding: 1rem 1.5rem;
984-
}
985-
.typingContainer { font-size: 2rem; gap: 0.5rem; padding: 1rem 1.5rem; }
986-
.staticText { font-size: 1.6rem; }
987-
.dynamicText { font-size: 1.6rem; height: 2rem; }
988-
.typingWord { font-size: 1.6rem; line-height: 2rem; }
989-
.dynamicText::after { font-size: 1.6rem; line-height: 2rem; }
934+
.typingContainer { font-size: 1.6rem; gap: 0.5rem; padding: 0.5rem 0.8rem; }
935+
.staticText { font-size: 1rem; }
936+
.dynamicText { font-size: 1rem; height: 1.2rem; }
937+
.typingWord { font-size: 1rem; line-height: 1.2rem; }
938+
.dynamicText::after { font-size: 1rem; line-height: 1.2rem; }
990939
}
991940

992941
/* Small screens (mobile) */
993942
@media (max-width: 600px) {
994-
.typingContainer {
995-
font-size: 1.4rem;
996-
flex-direction: column;
997-
gap: 0.4rem;
998-
padding: 0.8rem 1rem;
999-
}
1000-
.staticText { font-size: 1.2rem; text-align: center; }
1001-
.dynamicText { font-size: 1.2rem; height: 1.8rem; }
1002-
.typingWord { font-size: 1.2rem; line-height: 1.8rem; }
1003-
.dynamicText::after { font-size: 1.2rem; line-height: 1.8rem; }
1004-
943+
.typingContainer { font-size: 1.25rem; flex-direction: row; gap: 0.4rem; padding: 0.45rem 0.75rem; }
944+
.staticText { font-size: 0.9rem; text-align: center; }
945+
.dynamicText { font-size: 0.95rem; height: 1.1rem; }
946+
.typingWord { font-size: 0.95rem; line-height: 1.1rem; }
947+
.dynamicText::after { font-size: 0.95rem; line-height: 1.1rem; }
1005948
}
1006949
/* Ensure touch targets are large enough for mobile */
1007950
.button, .pathLink {

0 commit comments

Comments
 (0)