Skip to content

Commit bb7e126

Browse files
ishani-1255ishani-1255
committed
made responsive
1 parent aa5e442 commit bb7e126

File tree

1 file changed

+35
-32
lines changed

1 file changed

+35
-32
lines changed

‎src/components/header.jsx‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,19 @@ const CountdownTimer = () => {
4545
initial={{ opacity: 0, y: 50 }}
4646
animate={{ opacity: 1, y: 0 }}
4747
transition={{ duration: 0.8, delay: 1.5 }}
48-
className="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 mt-6 sm:mt-8"
48+
className="flex justify-center space-x-3 xs:space-x-4 sm:space-x-6 md:space-x-8 mt-4 sm:mt-6 md:mt-8"
4949
>
5050
{Object.entries(timeLeft).map(([unit, value]) => (
51-
<div
52-
key={unit}
53-
className="flex flex-col items-center pt-8"
54-
>
55-
<div className="self-center font-medium leading-none text-4xl md:text-[80px] tracking-[5px] md:tracking-[12px] text-white">
56-
{value < 10 ? `0${value}` : value}
57-
</div>
58-
<div className="text-sm md:text-xl text-white uppercase mt-2 tracking-[7px]">
59-
{unit}
60-
</div>
51+
<div
52+
key={unit}
53+
className="flex flex-col items-center pt-4 sm:pt-6 md:pt-8"
54+
>
55+
<div className="self-center font-medium leading-none text-2xl xs:text-3xl sm:text-4xl md:text-[80px] tracking-[3px] xs:tracking-[4px] sm:tracking-[5px] md:tracking-[12px] text-white">
56+
{value < 10 ? `0${value}` : value}
57+
</div>
58+
<div className="text-xs xs:text-sm sm:text-base md:text-xl text-white uppercase mt-1 sm:mt-2 tracking-[4px] sm:tracking-[7px]">
59+
{unit}
60+
</div>
6161
</div>
6262
))}
6363
</motion.div>
@@ -72,9 +72,12 @@ const RegistrationClosedButton = ({ className }) => (
7272
<motion.div
7373
whileHover={{ scale: 1.05 }}
7474
whileTap={{ scale: 0.95 }}
75-
className="px-3 sm:px-4 md:px-6 lg:px-8 py-2 sm:py-2.5 md:py-3 lg:py-4
76-
rounded-xl sm:rounded-2xl text-xs sm:text-sm md:text-base lg:text-lg
77-
border-2 border-red-700 border-solid bg-red-950 bg-opacity-50 text-red-300
75+
className="px-2 xs:px-3 sm:px-4 md:px-6 lg:px-8
76+
py-1.5 xs:py-2 sm:py-2.5 md:py-3 lg:py-4
77+
rounded-lg xs:rounded-xl sm:rounded-2xl
78+
text-[10px] xs:text-xs sm:text-sm md:text-base lg:text-lg
79+
border-2 border-red-700 border-solid
80+
bg-red-950 bg-opacity-50 text-red-300
7881
transition-all duration-300 opacity-70"
7982
tabIndex={0}
8083
>
@@ -83,7 +86,7 @@ const RegistrationClosedButton = ({ className }) => (
8386
</div>
8487
);
8588

86-
// Navigation Component (Same as before)
89+
// Navigation Component
8790
export function Navbarlinks() {
8891
const [isMenuOpen, setIsMenuOpen] = useState(false);
8992

@@ -132,22 +135,22 @@ export function Navbarlinks() {
132135
<>
133136
<motion.button
134137
whileTap={{ scale: 0.9 }}
135-
className="lg:hidden z-50 fixed top-4 sm:top-6 right-4 sm:right-6"
138+
className="lg:hidden z-50 fixed top-4 xs:top-5 sm:top-6 right-4 xs:right-5 sm:right-6"
136139
onClick={() => setIsMenuOpen(!isMenuOpen)}
137140
>
138141
{isMenuOpen ?
139-
<X size={24} color="white" className="h-6 w-6 sm:h-8 sm:w-8" /> :
140-
<Menu size={24} color="white" className="h-6 w-6 sm:h-8 sm:w-8" />
142+
<X size={24} color="white" className="h-5 w-5 xs:h-6 xs:w-6 sm:h-8 sm:w-8" /> :
143+
<Menu size={24} color="white" className="h-5 w-5 xs:h-6 xs:w-6 sm:h-8 sm:w-8" />
141144
}
142145
</motion.button>
143146

144-
<nav className="hidden lg:flex gap-6 xl:gap-[60px] items-center self-stretch my-auto whitespace-nowrap min-w-[240px]">
147+
<nav className="hidden lg:flex gap-4 sm:gap-6 xl:gap-[60px] items-center self-stretch my-auto whitespace-nowrap min-w-[240px]">
145148
{navigationItems.map((item) => (
146149
<motion.div
147150
key={item.id}
148151
onClick={() => scrollToSection(item.section)}
149152
className="self-stretch my-auto text-white hover:text-indigo-300 transition-colors cursor-pointer
150-
text-sm xl:text-base 2xl:text-lg font-medium"
153+
text-xs sm:text-sm xl:text-base 2xl:text-lg font-medium"
151154
whileHover={{ scale: 1.05 }}
152155
whileTap={{ scale: 0.95 }}
153156
tabIndex={0}
@@ -170,7 +173,7 @@ export function Navbarlinks() {
170173
<motion.div
171174
key={item.id}
172175
onClick={() => scrollToSection(item.section)}
173-
className="text-xl sm:text-2xl md:text-3xl text-white py-3 sm:py-4 cursor-pointer"
176+
className="text-lg xs:text-xl sm:text-2xl md:text-3xl text-white py-2 xs:py-3 sm:py-4 cursor-pointer"
174177
variants={linkVariants}
175178
custom={index}
176179
initial="hidden"
@@ -202,8 +205,8 @@ function Header() {
202205
initial={{ y: -100 }}
203206
animate={{ y: 0 }}
204207
transition={{ duration: 0.5 }}
205-
className="flex items-center justify-between px-4 sm:px-6 md:px-8 lg:px-11
206-
py-4 sm:py-6 md:py-7 lg:py-8 bg-stone-950 text-white"
208+
className="flex items-center justify-between px-3 xs:px-4 sm:px-6 md:px-8 lg:px-11
209+
py-3 xs:py-4 sm:py-6 md:py-7 lg:py-8 bg-stone-950 text-white"
207210
>
208211
<motion.img
209212
initial={{ scale: 0.8, opacity: 0 }}
@@ -212,7 +215,7 @@ function Header() {
212215
loading="lazy"
213216
src="https://cdn.builder.io/api/v1/image/assets/2ab850804b89467986bf6d3429dba897/a00abd21834cc6c981d48b9cdeccfb2794a178108acd85652ab8986dadc30252?apiKey=2ab850804b89467986bf6d3429dba897&"
214217
alt="Company Logo"
215-
className="object-contain w-[80px] sm:w-[100px] md:w-[130px] lg:w-[162px] aspect-[4.63]"
218+
className="object-contain w-[60px] xs:w-[70px] sm:w-[100px] md:w-[130px] lg:w-[162px] aspect-[4.63]"
216219
/>
217220

218221
<motion.img
@@ -222,10 +225,10 @@ function Header() {
222225
loading="lazy"
223226
src="https://i.ibb.co/Xj2vBBD/Screenshot-2024-11-26-at-9-55-18-AM-removebg-preview.png"
224227
alt="Company Logo"
225-
className="object-contain w-[80px] sm:w-[100px] md:w-[130px] lg:w-[162px] aspect-[2.63]"
228+
className="object-contain w-[60px] xs:w-[70px] sm:w-[100px] md:w-[130px] lg:w-[162px] aspect-[2.63]"
226229
/>
227230

228-
<div className="flex items-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-16">
231+
<div className="flex items-center space-x-2 xs:space-x-3 sm:space-x-6 md:space-x-8 lg:space-x-16">
229232
<Navbarlinks />
230233
<div className="hidden lg:block">
231234
<RegistrationClosedButton />
@@ -237,37 +240,37 @@ function Header() {
237240
initial={{ opacity: 0, y: 50 }}
238241
animate={{ opacity: 1, y: 0 }}
239242
transition={{ duration: 0.8, delay: 0.5 }}
240-
className="flex flex-col items-center justify-center mt-10 text-center text-white h-full px-4"
243+
className="flex flex-col items-center justify-center mt-6 xs:mt-8 sm:mt-10 text-center text-white h-full px-3 xs:px-4 sm:px-4"
241244
>
242245
<motion.div
243246
initial={{ x: -100, opacity: 0 }}
244247
animate={{ x: 0, opacity: 1 }}
245248
transition={{ duration: 0.6, delay: 0.7 }}
246-
className="text-sm md:text-2xl leading-none text-center text-white tracking-[10px] md:tracking-[39px] mb-4 "
249+
className="text-[10px] xs:text-xs sm:text-base md:text-2xl leading-none text-center text-white tracking-[5px] xs:tracking-[7px] sm:tracking-[10px] md:tracking-[39px] mb-2 xs:mb-3 sm:mb-4"
247250
>
248251
DECEMBER 21 | 22
249252
</motion.div>
250253
<motion.div
251254
initial={{ scale: 0.5, opacity: 0 }}
252255
animate={{ scale: 1, opacity: 1 }}
253256
transition={{ duration: 0.6, delay: 0.9 }}
254-
className="self-center font-medium leading-none border border-black border-solid text-5xl md:text-[120px] tracking-[10px] md:tracking-[52px]"
257+
className="self-center font-medium leading-none border border-black border-solid text-3xl xs:text-4xl sm:text-5xl md:text-[120px] tracking-[5px] xs:tracking-[7px] sm:tracking-[10px] md:tracking-[52px]"
255258
>
256259
TINYML
257260
</motion.div>
258261
<motion.div
259262
initial={{ x: 100, opacity: 0 }}
260263
animate={{ x: 0, opacity: 1 }}
261264
transition={{ duration: 0.6, delay: 1.1 }}
262-
className="pt-6 md:pt-12 w-full font-bold text-3xl md:text-6xl leading-none mx-4 text-center text-white tracking-[4px] md:tracking-[8px] whitespace-nowrap"
265+
className="pt-3 xs:pt-4 sm:pt-6 md:pt-12 w-full font-bold text-xl xs:text-2xl sm:text-3xl md:text-6xl leading-none mx-2 text-center text-white tracking-[2px] xs:tracking-[3px] sm:tracking-[4px] md:tracking-[8px] whitespace-nowrap"
263266
>
264267
24-HR
265268
</motion.div>
266269
<motion.div
267270
initial={{ y: 100, opacity: 0 }}
268271
animate={{ y: 0, opacity: 1 }}
269272
transition={{ duration: 0.6, delay: 1.3 }}
270-
className="self-center py-4 md:py-5 text-xl md:text-4xl leading-none tracking-[4px] md:tracking-[8px] text-center text-white w-full max-w-[1290px]"
273+
className="self-center py-2 xs:py-3 sm:py-4 md:py-5 text-sm xs:text-base sm:text-xl md:text-4xl leading-none tracking-[2px] xs:tracking-[3px] sm:tracking-[4px] md:tracking-[8px] text-center text-white w-full max-w-[1290px]"
271274
>
272275
HACK WHERE AI MEET HARDWARE
273276
</motion.div>
@@ -276,7 +279,7 @@ function Header() {
276279
<CountdownTimer />
277280

278281
{/* Mobile Register Button */}
279-
<div className="lg:hidden mt-6 sm:mt-8">
282+
<div className="lg:hidden mt-4 xs:mt-5 sm:mt-6">
280283
<RegistrationClosedButton />
281284
</div>
282285
</motion.div>

0 commit comments

Comments
 (0)