Skip to content

Commit 456f175

Browse files
sagarika-padmanabansagarika-padmanaban
authored
Merge pull request #214 from AI4Bharat/responsivenes-dhaval
responsiveness added to login and homepage
2 parents 68d75c7 + 5d0a8a4 commit 456f175

File tree

4 files changed

+199
-172
lines changed

4 files changed

+199
-172
lines changed

‎src/app/ui/pages/home/home.js

Lines changed: 102 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ import RateReviewIcon from "@mui/icons-material/RateReview";
99
import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
1010
import CompareIcon from "@mui/icons-material/Compare";
1111
import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
12-
import {
13-
Box,
14-
Grid,
15-
Stack,
16-
Card,
17-
CardContent,
18-
Typography,
19-
} from "@mui/material";
12+
import { Box, Grid, Stack, Card, CardContent, Typography } from "@mui/material";
2013
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
2114
import SupervisorAccountIcon from "@mui/icons-material/SupervisorAccount";
2215
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
2316
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
2417
import Carousel from "react-material-ui-carousel";
2518
import IntroStyle from "@/styles/IntroStyle";
26-
import { dynamicCard, footer, operationalModes, info, banner, operationalDynamics } from "./config";
19+
import {
20+
dynamicCard,
21+
footer,
22+
operationalModes,
23+
info,
24+
banner,
25+
operationalDynamics,
26+
} from "./config";
2727
import Svg from "@/assets/home_page1.svg";
2828

2929
const DynamicCards = ({ card }) => {
@@ -111,14 +111,17 @@ const DynamicCards = ({ card }) => {
111111
alignItems: "center",
112112
}}
113113
>
114-
<Box sx={{ display: { lg: "block", sm: "none" } }}>
114+
<Box sx={{ display: { lg: "block", sm: "none", xs: "none" } }}>
115115
<DynamicIcon />
116116
</Box>
117117
<Box>
118118
<Typography className={classes.heading} fontWeight="bold">
119119
{card.name}
120120
</Typography>
121-
<Typography className={classes.dynamicContent}>
121+
<Typography
122+
className={classes.dynamicContent}
123+
sx={{ fontSize: "small" }}
124+
>
122125
{card.content}
123126
</Typography>
124127
</Box>
@@ -130,52 +133,57 @@ const DynamicCards = ({ card }) => {
130133
const Home = () => {
131134
const navigate = useNavigate();
132135
useEffect(() => {
133-
if (typeof window !== 'undefined') {
134-
window.sessionStorage.setItem('interaction_json', JSON.stringify([]));
136+
if (typeof window !== "undefined") {
137+
window.sessionStorage.setItem("interaction_json", JSON.stringify([]));
135138
}
136139
}, []);
137-
138140

139141
return (
142+
// {page div}
140143
<>
141-
<div className="pb-40 bg-gradient-to-tl from-orange-light to-orange-dark-100 h-auto">
142-
<div className="pt-8 pb-16 flex justify-between px-16">
143-
<Image
144+
{/* {header and first page} */}
145+
<div className="pb-40 bg-gradient-to-tl from-orange-light to-orange-dark-100 h-full flex flex-col">
146+
<div className="py-8 flex justify-between px-10 top-0 lg:px-20">
147+
<img
144148
alt="Anudesh"
145149
src="https://i.imgur.com/56Ut9oz.png"
146-
width={90}
147-
height={90}
148-
></Image>
149-
<div className="flex gap-6">
150-
<button
151-
onClick={() => navigate("/login")}
152-
className="text-xl font-medium hover:underline"
153-
>
154-
{banner.logIn}
155-
</button>
156-
<button onClick={() => window.open("https://github.com/AI4Bharat/Anudesh", "_blank")}
157-
className="text-xl font-medium hover:underline">
150+
className="w-14 h-14 md:w-20 md:h-20 lg:w-24 lg:h-24"
151+
/>
152+
153+
<div className="flex gap-4 md:gap-6 lg:gap-8">
154+
<button
155+
onClick={() => navigate("/login")}
156+
className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl"
157+
>
158+
{banner.logIn}
159+
</button>
160+
<button
161+
onClick={() =>
162+
window.open("https://github.com/AI4Bharat/Anudesh", "_blank")
163+
}
164+
className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl"
165+
>
158166
Codebase
159167
</button>
160-
<button className="text-xl font-medium hover:underline">
168+
<button className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl">
161169
Analytics
162170
</button>
163171
</div>
164172
</div>
165173

166-
<div className="flex items-center align-middle h-full">
167-
<div className="px-40">
168-
<div className="text-orange-600 text-6xl mb-16 font-medium">
169-
{ banner.heading }
174+
<div className="w-full px-10 py-10 flex items-center justify-center flex-col-reverse gap-8 md:flex-row lg:px-20 md:pt-40 lg:pt-0">
175+
<div className="w-full md:w-3/5">
176+
<div className="text-orange-600 mb-8 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
177+
{banner.heading}
170178
</div>
171-
<div className="text-orange-600 text-3xl mb-16">
179+
<div className="text-orange-600 text-base mb-8 md:text-xl lg:text-2xl">
172180
{banner.subheading}
173181
</div>
174182
<div className="flex gap-8">
175183
<Link to={"https://www.youtube.com/watch?v=6k7fk3mCk9A"}>
176-
<button className="bg-orange-600 text-white text-xl p-4 rounded-md hover:bg-white hover:text-orange-600 border border-orange-600">
177-
{banner.demo}
178-
</button>
184+
<button className="bg-orange-600 text-white text-l p-4 rounded-md hover:bg-white hover:text-orange-600 border border-orange-600">
185+
{banner.demo}
186+
</button>
179187
</Link>
180188

181189
{/* <button
@@ -186,48 +194,61 @@ const Home = () => {
186194
</button> */}
187195
<button
188196
onClick={() => navigate("/chat")}
189-
className="text-orange-600 bg-white text-xl p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white"
197+
className="text-orange-600 bg-white text-l p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white"
190198
>
191199
{banner.chat}
192200
</button>
193201
</div>
194202
</div>
195-
<div className="pr-40">
196-
<Image
203+
<div className="flex items-center justify-center md:w-2/5">
204+
<img
197205
alt="Anudesh"
198-
className="hideOnMobile"
199206
src="https://i.imgur.com/56Ut9oz.png"
200-
width={900}
201-
height={900}
202-
></Image>
207+
className="w-[150px] h-[150px] md:w-full md:h-full lg:w-full lg:h-full" // had to use custom, bcz tailwind directly jumps after 24 to 28
208+
></img>
203209
</div>
204210
</div>
205211
</div>
206212

207-
<div className="flex flex-row items-center justify-center text-center py-32 px-60">
208-
<Image className="hideOnMobile" alt="Anudesh" src={Svg} width={400} height={400}></Image>
209-
<div className="pl-20">
210-
<div className="text-orange-600 text-6xl font-medium">
211-
{ info.question }
213+
<div className="flex flex-row items-center justify-center text-center py-10 px-10 md:py-20 lg:py-40 gap-10">
214+
<Image
215+
className="hideOnMobile md:w-2/5"
216+
alt="Anudesh"
217+
src={Svg}
218+
width={400}
219+
height={400}
220+
></Image>
221+
<div className="w-full lg:w-3/5">
222+
<div className="text-orange-600 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
223+
{info.question}
212224
</div>
213-
<div className="pt-10">
214-
<div className="text-4xl font-semibold text-gray-700 pb-10">
215-
{ info.subquestion }
225+
<div className="pt-8">
226+
<div className="text-xl font-semibold text-gray-700 pb-4 md:text-xl lg:text-3xl">
227+
{info.subquestion}
216228
</div>
217229
<Typography
218230
variant="body1"
219231
color="rgb(107 114 128)"
220232
fontWeight={300}
233+
sx={{
234+
fontSize: {
235+
xs: "18px", // Font size for small screens
236+
sm: "22px", // Font size for ≥ 600px
237+
md: "24px", // Font size for ≥ 900px
238+
lg: "26px", // Font size for ≥ 1200px
239+
},
240+
}}
241+
className="w-full"
221242
>
222-
{ info.content }
243+
{info.content}
223244
</Typography>
224245
</div>
225246
</div>
226247
</div>
227248

228-
<div className="text-center pb-32 px-64">
229-
<div className="text-gray-700 text-6xl font-medium">
230-
{ operationalModes.heading }
249+
<div className="xl: text-center pb-12 px-10">
250+
<div className="text-gray-700 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
251+
{operationalModes.heading}
231252
</div>
232253
<Box sx={{ flexGrow: 1 }}>
233254
<Grid
@@ -256,6 +277,14 @@ const Home = () => {
256277
<Typography
257278
color="rgb(107 114 128)"
258279
fontWeight={300}
280+
sx={{
281+
fontSize: {
282+
xs: "18px", // Font size for small screens
283+
sm: "22px", // Font size for ≥ 600px
284+
md: "24px", // Font size for ≥ 900px
285+
lg: "26px", // Font size for ≥ 1200px
286+
},
287+
}}
259288
variant="body1"
260289
>
261290
{operationalModes.admin_content}
@@ -283,6 +312,14 @@ const Home = () => {
283312
color="rgb(107 114 128)"
284313
fontWeight={300}
285314
variant="body1"
315+
sx={{
316+
fontSize: {
317+
xs: "18px", // Font size for small screens
318+
sm: "22px", // Font size for ≥ 600px
319+
md: "24px", // Font size for ≥ 900px
320+
lg: "26px", // Font size for ≥ 1200px
321+
},
322+
}}
286323
>
287324
{operationalModes.user_content}
288325
</Typography>
@@ -292,9 +329,9 @@ const Home = () => {
292329
</Box>
293330
</div>
294331

295-
<div clasNsame="text-center pb-32">
296-
<div className="text-center text-gray-700 text-6xl font-medium py-20">
297-
{ operationalDynamics.heading }
332+
<div clasNsame="text-center py-10 ">
333+
<div className="text-center text-gray-700 text-2xl pb-10 font-semibold md:text-4xl md:font-bold lg:text-5xl">
334+
{operationalDynamics.heading}
298335
</div>
299336
<Carousel
300337
stopAutoPlayOnHover
@@ -312,7 +349,7 @@ const Home = () => {
312349
NextIcon={<ArrowForwardIosIcon />}
313350
PrevIcon={<ArrowBackIosNewIcon />}
314351
sx={{
315-
width: "70%",
352+
width: "90%",
316353
margin: "auto",
317354
height: "auto",
318355
}}
@@ -324,7 +361,10 @@ const Home = () => {
324361
</div>
325362

326363
<div className="text-center bg-stone-800 py-6">
327-
<Typography className="text-white" sx={{fontWeight: 'bold'}}>
364+
<Typography
365+
className="text-white"
366+
sx={{ fontWeight: "bold", fontSize: "small" }}
367+
>
328368
{footer.content}
329369
</Typography>
330370
</div>

0 commit comments

Comments
 (0)