Skip to content

Commit 4b08abf

Browse files
kevish-is-buildingkevish-is-building
committed
auth responsive
1 parent 8fdb60d commit 4b08abf

File tree

3 files changed

+30
-27
lines changed

3 files changed

+30
-27
lines changed

‎src/components/Auth/AuthLayout.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
77

88
export const AuthLayout = () => {
99
return (
10-
<div className="relative flex flex-row h-screen w-screen overflow-hidden">
10+
<div className="relative flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
1111
{/* Background Gradient Circles */}
1212
<img
1313
src="/images/Group97.png"
@@ -16,21 +16,24 @@ export const AuthLayout = () => {
1616
/>
1717

1818
{/* Content on top of background */}
19-
<div className="relative z-10 flex flex-row w-full h-full bg-[#121212]">
19+
<div className="relative z-10 flex flex-col lg:flex-row w-full min-h-screen bg-[#121212]">
20+
{/* Left Side - Hidden on mobile, shown on tablet and up */}
2021
<motion.div
2122
initial={{ opacity: 0.1, y: -50 }}
2223
animate={{ opacity: 1, y: 0 }}
2324
transition={{ duration: 0.8, ease: "easeOut" }}
24-
className="flex-1 flex justify-between items-center"
25+
className="hidden md:flex flex-1 justify-between items-center"
2526
style={{ mixBlendMode: "lighten" }}
2627
>
2728
<LeftSide />
2829
</motion.div>
30+
31+
{/* Right Side - Full width on mobile, half width on desktop */}
2932
<motion.div
3033
initial={{ opacity: 0, y: 50 }}
3134
animate={{ opacity: 1, y: 0 }}
3235
transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
33-
className="flex-1"
36+
className="flex-1 w-full lg:w-1/2 min-h-screen lg:min-h-auto"
3437
>
3538
<RightSide />
3639
</motion.div>

‎src/components/Auth/LeftSide.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,29 @@ import { motion } from "framer-motion";
22

33
export const LeftSide = () => {
44
return (
5-
<div className="relative flex-1 flex flex-col items-center px-12 py-10 overflow-hidden">
5+
<div className="relative flex-1 flex flex-col items-center px-6 md:px-8 lg:px-12 py-6 md:py-8 lg:py-10 overflow-hidden">
66
{/* Logo */}
7-
<div className="w-full flex justify-center mb-2 mt-10">
7+
<div className="w-full flex justify-center mb-2 mt-4 md:mt-6 lg:mt-10">
88
<img
99
src="/images/d.png"
1010
alt="DCODE Logo"
11-
className="h-8"
11+
className="h-6 md:h-7 lg:h-8"
1212
/>
1313
</div>
1414

1515
{/* Center Content */}
16-
<div className="flex flex-col items-center text-center max-w-md flex-grow justify-center">
16+
<div className="flex flex-col items-center text-center max-w-xs md:max-w-sm lg:max-w-md flex-grow justify-center">
1717
{/* Illustration with floating symbols */}
1818
<motion.div
19-
className="relative inline-block mb-8"
19+
className="relative inline-block mb-6 md:mb-8"
2020
initial={{ opacity: 0, scale: 0.8 }}
2121
animate={{ opacity: 1, scale: 1 }}
2222
transition={{ duration: 0.8, ease: "easeOut" }}
2323
>
2424
<motion.img
2525
src="/images/Illustration.png"
2626
alt="Developer Illustration"
27-
className="rounded-lg"
27+
className="rounded-lg w-full max-w-[280px] md:max-w-[320px] lg:max-w-full"
2828
style={{ mixBlendMode: "lighten" }}
2929
// animate={{ y: [0, -5, 0] }}
3030
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
@@ -34,7 +34,7 @@ export const LeftSide = () => {
3434
<div className="absolute inset-0 pointer-events-none select-none">
3535
{/* Top-left {} */}
3636
<motion.div
37-
className="absolute top-2 left-2 text-gray-500 text-2xl"
37+
className="absolute top-1 md:top-2 left-1 md:left-2 text-gray-500 text-lg md:text-xl lg:text-2xl"
3838
initial={{ opacity: 0, scale: 0, rotate: -180 }}
3939
animate={{
4040
opacity: 1,
@@ -54,7 +54,7 @@ export const LeftSide = () => {
5454

5555
{/* Top-right ; */}
5656
<motion.div
57-
className="absolute top-2 right-2 text-gray-500 text-2xl"
57+
className="absolute top-1 md:top-2 right-1 md:right-2 text-gray-500 text-lg md:text-xl lg:text-2xl"
5858
initial={{ opacity: 0, scale: 0, x: 50 }}
5959
animate={{
6060
opacity: 1,
@@ -74,7 +74,7 @@ export const LeftSide = () => {
7474

7575
{/* Bottom-left <> */}
7676
<motion.div
77-
className="absolute bottom-2 left-2 text-gray-500 text-2xl"
77+
className="absolute bottom-1 md:bottom-2 left-1 md:left-2 text-gray-500 text-lg md:text-xl lg:text-2xl"
7878
initial={{ opacity: 0, scale: 0, y: 50 }}
7979
animate={{
8080
opacity: 1,
@@ -92,7 +92,7 @@ export const LeftSide = () => {
9292

9393
{/* Bottom-center 0x3234 */}
9494
<motion.div
95-
className="absolute bottom-10 left-1/3 -translate-x-1/2 text-gray-500 text-xl"
95+
className="absolute bottom-6 md:bottom-8 lg:bottom-10 left-1/3 -translate-x-1/2 text-gray-500 text-sm md:text-base lg:text-xl"
9696
initial={{ opacity: 0, scale: 0, rotate: 45 }}
9797
animate={{
9898
opacity: 1,
@@ -112,7 +112,7 @@ export const LeftSide = () => {
112112

113113
{/* Bottom-right $ */}
114114
<motion.div
115-
className="absolute bottom-2 right-2 text-gray-500 text-2xl"
115+
className="absolute bottom-1 md:bottom-2 right-1 md:right-2 text-gray-500 text-lg md:text-xl lg:text-2xl"
116116
initial={{ opacity: 0, scale: 0, x: -50, rotate: 90 }}
117117
animate={{
118118
opacity: 1,
@@ -136,7 +136,7 @@ export const LeftSide = () => {
136136

137137
{/* Heading + text */}
138138
<motion.h2
139-
className="text-2xl font-semibold text-white mb-4"
139+
className="text-lg md:text-xl lg:text-2xl font-semibold text-white mb-3 md:mb-4"
140140
initial={{ opacity: 0, y: 30 }}
141141
animate={{ opacity: 1, y: 0 }}
142142
transition={{ duration: 0.8, delay: 0.4 }}
@@ -145,7 +145,7 @@ export const LeftSide = () => {
145145
<span className="text-[#BCDD19]">OPEN SOURCE</span> Developers
146146
</motion.h2>
147147
<motion.p
148-
className="text-sm text-[#F5F5F5]/50"
148+
className="text-xs md:text-sm text-[#F5F5F5]/50 leading-relaxed"
149149
initial={{ opacity: 0, y: 20 }}
150150
animate={{ opacity: 1, y: 0 }}
151151
transition={{ duration: 0.8, delay: 0.6 }}

‎src/components/Auth/RightSide.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -301,16 +301,16 @@ export const RightSide = () => {
301301

302302
// === RENDER HELPERS ===
303303
const renderGitHubLoadingState = () => (
304-
<div className="flex-1 flex items-center justify-center min-h-screen px-4 py-6">
304+
<div className="flex-1 flex items-center justify-center min-h-screen px-4 sm:px-6 py-6">
305305
<motion.div
306306
initial={{ opacity: 0 }}
307307
animate={{ opacity: 1 }}
308-
className="text-center space-y-6"
308+
className="text-center space-y-4 sm:space-y-6"
309309
>
310-
<LoadingSpinner size="w-12 h-12" className="text-[#C6FF3D] mx-auto" />
310+
<LoadingSpinner size="w-10 h-10 sm:w-12 sm:h-12" className="text-[#C6FF3D] mx-auto" />
311311
<div className="space-y-2">
312-
<h2 className="text-2xl font-bold text-white">Signing you in...</h2>
313-
<p className="text-gray-400">
312+
<h2 className="text-xl sm:text-2xl font-bold text-white">Signing you in...</h2>
313+
<p className="text-sm sm:text-base text-gray-400 px-2">
314314
Please wait while we authenticate with GitHub
315315
</p>
316316
</div>
@@ -319,8 +319,8 @@ export const RightSide = () => {
319319
);
320320

321321
const renderHeader = () => (
322-
<div className="text-center space-y-6">
323-
<h1 className="text-3xl font-bold text-white leading-tight">
322+
<div className="text-center space-y-4 sm:space-y-6">
323+
<h1 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white leading-tight px-2">
324324
{isLogin ? (
325325
<>
326326
Welcome Back to the{" "}
@@ -490,8 +490,8 @@ export const RightSide = () => {
490490
}
491491

492492
return (
493-
<div className="flex-1 flex items-center justify-center min-h-screen px-4 py-6">
494-
<div className="w-full max-w-md">
493+
<div className="flex-1 flex items-center justify-center min-h-screen px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
494+
<div className="w-full max-w-sm sm:max-w-md">
495495
<AnimatePresence mode="wait">
496496
<motion.div
497497
key={isLogin ? "login" : "signup"}
@@ -500,7 +500,7 @@ export const RightSide = () => {
500500
animate="animate"
501501
exit="exit"
502502
transition={{ duration: 0.3, ease: "easeInOut" }}
503-
className="space-y-8"
503+
className="space-y-6 sm:space-y-8"
504504
>
505505
{renderHeader()}
506506
<div className="relative">

0 commit comments

Comments
 (0)