Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

responsiveness added to login and homepage #214

Merged
merged 3 commits into from
Jan 10, 2025
Merged

responsiveness added to login and homepage #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d89963
responsiveness added to login and homepage
dhaval-codes Jan 9, 2025
3be33f2
Merge branch 'develop' of https://github.com/AI4Bharat/Anudesh-Fronte…
dhaval-codes Jan 9, 2025
5d0a8a4
fixed the merge conflict error
dhaval-codes Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 102 additions & 62 deletions src/app/ui/pages/home/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ import RateReviewIcon from "@mui/icons-material/RateReview";
import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
import CompareIcon from "@mui/icons-material/Compare";
import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
import {
Box,
Grid,
Stack,
Card,
CardContent,
Typography,
} from "@mui/material";
import { Box, Grid, Stack, Card, CardContent, Typography } from "@mui/material";
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
import SupervisorAccountIcon from "@mui/icons-material/SupervisorAccount";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import Carousel from "react-material-ui-carousel";
import IntroStyle from "@/styles/IntroStyle";
import { dynamicCard, footer, operationalModes, info, banner, operationalDynamics } from "./config";
import {
dynamicCard,
footer,
operationalModes,
info,
banner,
operationalDynamics,
} from "./config";
import Svg from "@/assets/home_page1.svg";

const DynamicCards = ({ card }) => {
Expand Down Expand Up @@ -111,14 +111,17 @@ const DynamicCards = ({ card }) => {
alignItems: "center",
}}
>
<Box sx={{ display: { lg: "block", sm: "none" } }}>
<Box sx={{ display: { lg: "block", sm: "none", xs: "none" } }}>
<DynamicIcon />
</Box>
<Box>
<Typography className={classes.heading} fontWeight="bold">
{card.name}
</Typography>
<Typography className={classes.dynamicContent}>
<Typography
className={classes.dynamicContent}
sx={{ fontSize: "small" }}
>
{card.content}
</Typography>
</Box>
Expand All @@ -130,52 +133,57 @@ const DynamicCards = ({ card }) => {
const Home = () => {
const navigate = useNavigate();
useEffect(() => {
if (typeof window !== 'undefined') {
window.sessionStorage.setItem('interaction_json', JSON.stringify([]));
if (typeof window !== "undefined") {
window.sessionStorage.setItem("interaction_json", JSON.stringify([]));
}
}, []);


return (
// {page div}
<>
<div className="pb-40 bg-gradient-to-tl from-orange-light to-orange-dark-100 h-auto">
<div className="pt-8 pb-16 flex justify-between px-16">
<Image
{/* {header and first page} */}
<div className="pb-40 bg-gradient-to-tl from-orange-light to-orange-dark-100 h-full flex flex-col">
<div className="py-8 flex justify-between px-10 top-0 lg:px-20">
<img
alt="Anudesh"
src="https://i.imgur.com/56Ut9oz.png"
width={90}
height={90}
></Image>
<div className="flex gap-6">
<button
onClick={() => navigate("/login")}
className="text-xl font-medium hover:underline"
>
{banner.logIn}
</button>
<button onClick={() => window.open("https://github.com/AI4Bharat/Anudesh", "_blank")}
className="text-xl font-medium hover:underline">
className="w-14 h-14 md:w-20 md:h-20 lg:w-24 lg:h-24"
/>

<div className="flex gap-4 md:gap-6 lg:gap-8">
<button
onClick={() => navigate("/login")}
className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl"
>
{banner.logIn}
</button>
<button
onClick={() =>
window.open("https://github.com/AI4Bharat/Anudesh", "_blank")
}
className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl"
>
Codebase
</button>
<button className="text-xl font-medium hover:underline">
<button className="text-base font-medium hover:underline text-xs md:text-lg lg:text-2xl">
Analytics
</button>
</div>
</div>

<div className="flex items-center align-middle h-full">
<div className="px-40">
<div className="text-orange-600 text-6xl mb-16 font-medium">
{ banner.heading }
<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">
<div className="w-full md:w-3/5">
<div className="text-orange-600 mb-8 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
{banner.heading}
</div>
<div className="text-orange-600 text-3xl mb-16">
<div className="text-orange-600 text-base mb-8 md:text-xl lg:text-2xl">
{banner.subheading}
</div>
<div className="flex gap-8">
<Link to={"https://www.youtube.com/watch?v=6k7fk3mCk9A"}>
<button className="bg-orange-600 text-white text-xl p-4 rounded-md hover:bg-white hover:text-orange-600 border border-orange-600">
{banner.demo}
</button>
<button className="bg-orange-600 text-white text-l p-4 rounded-md hover:bg-white hover:text-orange-600 border border-orange-600">
{banner.demo}
</button>
</Link>

{/* <button
Expand All @@ -186,48 +194,61 @@ const Home = () => {
</button> */}
<button
onClick={() => navigate("/chat")}
className="text-orange-600 bg-white text-xl p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white"
className="text-orange-600 bg-white text-l p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white"
>
{banner.chat}
</button>
</div>
</div>
<div className="pr-40">
<Image
<div className="flex items-center justify-center md:w-2/5">
<img
alt="Anudesh"
className="hideOnMobile"
src="https://i.imgur.com/56Ut9oz.png"
width={900}
height={900}
></Image>
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
></img>
</div>
</div>
</div>

<div className="flex flex-row items-center justify-center text-center py-32 px-60">
<Image className="hideOnMobile" alt="Anudesh" src={Svg} width={400} height={400}></Image>
<div className="pl-20">
<div className="text-orange-600 text-6xl font-medium">
{ info.question }
<div className="flex flex-row items-center justify-center text-center py-10 px-10 md:py-20 lg:py-40 gap-10">
<Image
className="hideOnMobile md:w-2/5"
alt="Anudesh"
src={Svg}
width={400}
height={400}
></Image>
<div className="w-full lg:w-3/5">
<div className="text-orange-600 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
{info.question}
</div>
<div className="pt-10">
<div className="text-4xl font-semibold text-gray-700 pb-10">
{ info.subquestion }
<div className="pt-8">
<div className="text-xl font-semibold text-gray-700 pb-4 md:text-xl lg:text-3xl">
{info.subquestion}
</div>
<Typography
variant="body1"
color="rgb(107 114 128)"
fontWeight={300}
sx={{
fontSize: {
xs: "18px", // Font size for small screens
sm: "22px", // Font size for ≥ 600px
md: "24px", // Font size for ≥ 900px
lg: "26px", // Font size for ≥ 1200px
},
}}
className="w-full"
>
{ info.content }
{info.content}
</Typography>
</div>
</div>
</div>

<div className="text-center pb-32 px-64">
<div className="text-gray-700 text-6xl font-medium">
{ operationalModes.heading }
<div className="xl: text-center pb-12 px-10">
<div className="text-gray-700 text-2xl font-semibold md:text-4xl md:font-bold lg:text-5xl">
{operationalModes.heading}
</div>
<Box sx={{ flexGrow: 1 }}>
<Grid
Expand Down Expand Up @@ -256,6 +277,14 @@ const Home = () => {
<Typography
color="rgb(107 114 128)"
fontWeight={300}
sx={{
fontSize: {
xs: "18px", // Font size for small screens
sm: "22px", // Font size for ≥ 600px
md: "24px", // Font size for ≥ 900px
lg: "26px", // Font size for ≥ 1200px
},
}}
variant="body1"
>
{operationalModes.admin_content}
Expand Down Expand Up @@ -283,6 +312,14 @@ const Home = () => {
color="rgb(107 114 128)"
fontWeight={300}
variant="body1"
sx={{
fontSize: {
xs: "18px", // Font size for small screens
sm: "22px", // Font size for ≥ 600px
md: "24px", // Font size for ≥ 900px
lg: "26px", // Font size for ≥ 1200px
},
}}
>
{operationalModes.user_content}
</Typography>
Expand All @@ -292,9 +329,9 @@ const Home = () => {
</Box>
</div>

<div clasNsame="text-center pb-32">
<div className="text-center text-gray-700 text-6xl font-medium py-20">
{ operationalDynamics.heading }
<div clasNsame="text-center py-10 ">
<div className="text-center text-gray-700 text-2xl pb-10 font-semibold md:text-4xl md:font-bold lg:text-5xl">
{operationalDynamics.heading}
</div>
<Carousel
stopAutoPlayOnHover
Expand All @@ -312,7 +349,7 @@ const Home = () => {
NextIcon={<ArrowForwardIosIcon />}
PrevIcon={<ArrowBackIosNewIcon />}
sx={{
width: "70%",
width: "90%",
margin: "auto",
height: "auto",
}}
Expand All @@ -324,7 +361,10 @@ const Home = () => {
</div>

<div className="text-center bg-stone-800 py-6">
<Typography className="text-white" sx={{fontWeight: 'bold'}}>
<Typography
className="text-white"
sx={{ fontWeight: "bold", fontSize: "small" }}
>
{footer.content}
</Typography>
</div>
Expand Down
Loading
Loading