Merge pull request #320 from Build-Squad/Landing-page-responsive-design

Draft: Landing page responsive
Build-Squad · Apr 16, 2024 · ab066db · ab066db
2 parents 90ef30e + 595106e
commit ab066db
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 103 deletions.
diff --git a/src/ui/app/business/components/banner/index.tsx b/src/ui/app/business/components/banner/index.tsx
@@ -41,13 +41,14 @@ export default function Banner({}: Props) {
         alignItems: "center",
         flexDirection: "column",
         position: "relative",
-        paddingY: "82px",
+        paddingY: { xs: "32px", sm: "64px", md: "82px" },
       }}
     >
       <Box
         sx={{
           display: "flex",
           alignItems: "flex-end",
+          flexDirection: { xs: "column", md: "row" },
           columnGap: "4px",
         }}
       >
@@ -64,7 +65,7 @@ export default function Banner({}: Props) {
       </Box>
       <Box
         sx={{
-          width: "60%",
+          width: { xs: "80%", sm: "70%", md: "60%" },
           textAlign: "center",
           mt: 1,
           display: "flex",
@@ -73,7 +74,7 @@ export default function Banner({}: Props) {
       >
         <Typography
           variant="h4"
-          sx={{ fontSize: "2.65rem" }}
+          sx={{ fontSize: { xs: "2rem", sm: "2.25rem", md: "2.65rem" } }}
           fontWeight={"bold"}
         >
           Effortless Connections, Powerful Results
@@ -87,10 +88,10 @@ export default function Banner({}: Props) {
       <Box
         sx={{
           mt: 3,
-          px: 5,
-          py: 3,
-          paddingBottom: "12px",
-          width: "60%",
+          px: { xs: 2, sm: 3, md: 5 },
+          py: { xs: 2, sm: 3 },
+          paddingBottom: { xs: "8px", md: "12px" },
+          width: { xs: "90%", sm: "80%", md: "60%" },
           background: "rgba(255, 255, 255, 0.51)",
           borderRadius: "16px",
           backdropFilter: "blur(5px)",
@@ -104,7 +105,7 @@ export default function Banner({}: Props) {
             justifyContent={"space-between"}
             alignItems={"flex-start"}
           >
-            <Grid item xs={6} sm={6} md={6} lg={5}>
+            <Grid item xs={12} sm={6} md={5} lg={5}>
               <TextField
                 label="Platform"
                 color="secondary"
@@ -125,10 +126,10 @@ export default function Banner({}: Props) {
                 variant="outlined"
               />
             </Grid>
-            <Grid item xs={6} sm={6} md={6} lg={5}>
+            <Grid item xs={12} sm={6} md={5} lg={5}>
               <FiltersComponent formik={formik} type={"CATEGORIES"} />
             </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={2}>
+            <Grid item xs={12} sm={12} md={2} lg={2}>
               <Button
                 size="large"
                 type="submit"
@@ -137,7 +138,7 @@ export default function Banner({}: Props) {
                 sx={{
                   borderRadius: "12px",
                   fontWeight: "bold",
-                  px: 5,
+                  px: 4,
                   py: 1,
                 }}
               >
@@ -148,7 +149,7 @@ export default function Banner({}: Props) {
         </form>
       </Box>
 
-      <Box sx={{ mt: 5, textAlign: "center" }}>
+      <Box sx={{ mt: 5, textAlign: "center", maxWidth: "90%" }}>
         <Typography variant="h6">
           How can Xfluencer add to the success of your business?
         </Typography>
@@ -173,7 +174,8 @@ export default function Banner({}: Props) {
                     borderRadius: "24px",
                     border: "1px solid #7B7B7B",
                     background: "rgba(255, 255, 255, 0.40)",
-                    fontSize: "20px",
+                    fontSize: { xs: "16px", md: "20px" },
+                    marginBottom: "8px",
                   }}
                 >
                   {it}

diff --git a/src/ui/app/business/components/elevateSection/index.tsx b/src/ui/app/business/components/elevateSection/index.tsx
@@ -208,56 +208,57 @@ export default function ElevateSection({}: Props) {
         <Typography sx={{ fontSize: "40px" }}>
           Tailored Marketing Solutions For Businesses
         </Typography>
-        <Box
-          sx={{ display: "flex", justifyContent: "center", marginTop: "14px" }}
+        <Grid
+          sx={{ marginTop: "14px" }}
+          mx="auto"
+          container
+          borderRadius="30px"
+          width="80%"
+          border="1px solid #BABABA"
+          justifyContent={"space-between"}
         >
-          <Box
-            sx={{
-              display: "flex",
-              flexWrap: "wrap",
-              borderRadius: "30px",
-              border: "1px solid #BABABA",
-              width: "fit-content",
-            }}
-          >
-            {TABS.map((item, index) => {
-              return (
-                <Box
-                  sx={{
-                    cursor: "pointer",
-                    display: "flex",
-                    paddingX: "56px",
-                    alignItems: "center",
-                    columnGap: "8px",
-                    borderRadius: selectedTab == index ? "30px" : "none",
-                    border: selectedTab == index ? "1px solid black" : "none",
-                    paddingY: "18px",
-                  }}
-                  onClick={() => {
-                    handleSelect({ index });
-                  }}
-                  key={index}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="none"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                      d="M8 10V12L10.7314 9.95143L11.09 9.85021C12.771 9.37573 14 7.8288 14 6C14 3.79086 12.2091 2 10 2H6C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10H8ZM6 16V12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0H10C13.3137 0 16 2.68629 16 6C16 8.74753 14.1532 11.0637 11.6333 11.775L6 16Z"
-                      fill="black"
-                    />
-                  </svg>
-                  <Typography>{item}</Typography>
-                </Box>
-              );
-            })}
-          </Box>
-        </Box>
+          {TABS.map((item, index) => (
+            <Grid
+              item
+              xs={12}
+              sm={12}
+              lg={4}
+              md={12}
+              sx={{
+                flex: "1",
+                cursor: "pointer",
+                display: "flex",
+                paddingX: "56px",
+                justifyContent: "center",
+                alignItems: "center",
+                columnGap: "8px",
+                borderRadius: selectedTab === index ? "30px" : "none",
+                border: selectedTab === index ? "1px solid black" : "none",
+                paddingY: "18px",
+              }}
+              onClick={() => {
+                handleSelect({ index });
+              }}
+              key={index}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M8 10V12L10.7314 9.95143L11.09 9.85021C12.771 9.37573 14 7.8288 14 6C14 3.79086 12.2091 2 10 2H6C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10H8ZM6 16V12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0H10C13.3137 0 16 2.68629 16 6C16 8.74753 14.1532 11.0637 11.6333 11.775L6 16Z"
+                  fill="black"
+                />
+              </svg>
+              <Typography>{item}</Typography>
+            </Grid>
+          ))}
+        </Grid>
       </Box>
       <Grid
         container

diff --git a/src/ui/app/business/components/faqSection/index.tsx b/src/ui/app/business/components/faqSection/index.tsx
@@ -8,6 +8,7 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
+  Grid,
 } from "@mui/material";
 
 import { ExpandMore } from "@mui/icons-material";
@@ -40,34 +41,25 @@ const FAQs = [
 export default function FAQSection({}: Props) {
   return (
     <>
-      <Box
+      <Grid
+        container
+        justifyContent={"space-between"}
         sx={{
           mt: 3,
-          display: "flex",
-          justifyContent: "space-between",
           paddingY: "46px",
-          alignItems: "center",
-          columnGap: "40px",
         }}
       >
-        <Box sx={{ flex: 1, textAlign: "left" }}>
+        <Grid sx={{ textAlign: "left" }} xs={12} sm={12} md={4} xl={4}>
           <Typography variant="h4" fontWeight={"bold"}>
             Frequently Asked Questions
           </Typography>
-          <Typography sx={{ mt: 3, color: "#676767" }} variant="h6">
+          <Typography sx={{ mt: 3, mb:3, color: "#676767" }} variant="h6">
             Our platform is curated specifically for those influencers who have
             mastered the art of engaging their audience on one of the most
             dynamic social media platforms.
           </Typography>
-        </Box>
-        <Box
-          sx={{
-            flex: 2,
-            display: "flex",
-            flexDirection: "column",
-            rowGap: "20px",
-          }}
-        >
+        </Grid>
+        <Grid item xs={12} sm={12} md={7} xl={7}>
           {FAQs.map(({ question, answer }, index: number) => {
             return (
               <Accordion
@@ -84,6 +76,7 @@ export default function FAQSection({}: Props) {
                       content: "none",
                     },
                   },
+                  mb:2
                 }}
                 key={index}
               >
@@ -104,8 +97,8 @@ export default function FAQSection({}: Props) {
               </Accordion>
             );
           })}
-        </Box>
-      </Box>
+        </Grid>
+      </Grid>
     </>
   );
 }
diff --git a/src/ui/app/business/components/guideContainer/index.tsx b/src/ui/app/business/components/guideContainer/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Typography, Box } from "@mui/material";
+import { Typography, Box, Grid } from "@mui/material";
 import Image from "next/image";
 
 type Props = {};
@@ -24,9 +24,7 @@ const WORKING_STEPS = [
 ];
 
 const stepContainerStyle = {
-  flex: "1",
   textAlign: "center",
-  maxWidth: "20%",
 };
 
 export default function GuideContainer({}: Props) {
@@ -44,28 +42,35 @@ export default function GuideContainer({}: Props) {
       <Typography variant="subtitle1" sx={{ color: "#505050" }}>
         Explore, Purchase, Analyse in seconds.
       </Typography>
-      <Box
+      <Grid
+        container
+        justifyContent={"space-between"}
+        columnGap={"10px"}
+        rowGap={"20px"}
         sx={{
-          display: "flex",
-          justifyContent: "space-around",
           padding: "64px 72px",
           paddingBottom: "0px",
-          flexWrap: "wrap",
-          columnGap: "10px",
         }}
       >
         {WORKING_STEPS.map((step) => (
-          <Box key={step.id} sx={stepContainerStyle}>
+          <Grid
+            key={step.id}
+            sx={stepContainerStyle}
+            xs={12}
+            sm={3}
+            lg={3}
+            md={3}
+          >
             <Image
               src={step.imageUrl}
               height={94}
               width={94}
               alt={step.description}
             />
             <Typography variant="subtitle1">{step.description}</Typography>
-          </Box>
+          </Grid>
         ))}
-      </Box>
+      </Grid>
     </Box>
   );
 }
diff --git a/src/ui/app/business/components/influencersContainer/index.tsx b/src/ui/app/business/components/influencersContainer/index.tsx
@@ -55,18 +55,17 @@ export default function InfluencersContainer({ topInfluencers }: Props) {
           <ArrowBackIos onClick={handleBack} sx={{ cursor: "pointer" }} />
         </Grid>
         <Grid item flex={1}>
-          <Box
+          <Grid
+            container
             sx={{
-              display: "flex",
-              flexWrap: "wrap",
               gap: "20px",
               justifyContent: "center",
             }}
           >
             {displayedInfluencers.map((inf, index) => (
               <InfluencersCards influencer={inf} key={index} />
             ))}
-          </Box>
+          </Grid>
         </Grid>
         <Grid item>
           <ArrowForwardIos onClick={handleForward} sx={{ cursor: "pointer" }} />

diff --git a/src/ui/app/components/analyticsContainer/index.tsx b/src/ui/app/components/analyticsContainer/index.tsx
@@ -28,8 +28,7 @@ const ANALYTICS_DATA: AnalyticsRoleData[] = [
     },
     data2: {
       value: "76 %",
-      subtitle:
-        "Users say they bought something after a recommendation from X",
+      subtitle: "Users say they bought something after a recommendation from X",
     },
     data3: {
       value: "238 M",
@@ -72,7 +71,9 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
     sm={12}
     md={3}
     lg={3}
-    justifyContent="space-around"
+    sx={{
+      justifyContent: { sm: "flex-start", md: "space-around" },
+    }}
     alignItems="center"
     display="flex"
   >
@@ -82,7 +83,7 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
       </Typography>
       <Typography variant="subtitle1">{subtitle}</Typography>
     </Box>
-    <svg
+    {/* <svg
       xmlns="http://www.w3.org/2000/svg"
       width="2"
       height="126"
@@ -96,7 +97,7 @@ const AnalyticsItem: React.FC<AnalyticsDataItem> = ({
         strokeOpacity="0.6"
         strokeLinecap="round"
       />
-    </svg>
+    </svg> */}
   </Grid>
 );