mobile optimization: iteration 4

AgniveshChaubey · Jan 20, 2024 · 5c88147 · 5c88147
1 parent 60ecd12
commit 5c88147
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 51 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -23,9 +23,9 @@ const AboutUs = () => {
                   <div className="text-white" style={{ textAlign: "justify" }}>
                     {aboutData.map((each, index) => (
                       <>
-                        <h5 className="text-white" key={index}>
-                          <u>{each.header}</u>
-                        </h5>
+                        <div className="display-4" key={index}>
+                          {each.header}
+                        </div>
                         {each.briefInfo.map((info, i) => (
                           <p className="m-0" key={i}>
                             {info}

diff --git a/src/app/components/FacilityCard.tsx b/src/app/components/FacilityCard.tsx
@@ -4,11 +4,11 @@ import Fade from "react-reveal/Fade";
 
 const FacilityCard = ({ facility }: { facility: string }) => {
   return (
-    <Col lg="6" md="6" className="mt-2 col col-sm-6">
+    <Col lg="6" md="6" className="mt-2">
       <Fade bottom duration={1500}>
-        <Card className="shadow-lg--hover shadow w-100">
+        <Card className="shadow-lg--hover shadow">
           <CardBody className="custom-card-body">
-            <div className="d-flex px-1 mx-3 justify-content-center small-mobile-font">
+            <div className="d-flex justify-content-center small">
               {facility}
             </div>
           </CardBody>

diff --git a/src/app/components/NavigationBar.tsx b/src/app/components/NavigationBar.tsx
@@ -22,6 +22,9 @@ const russoOne = Russo_One({
 });
 
 const NavigationBar = () => {
+  const [textColor, setTextColor] = useState(
+    window.innerWidth <= 767 ? "black" : "white"
+  );
   const buttonBRef = useRef(null);
 
   const [collapseClasses, setCollapseClasses] = useState("");
@@ -32,7 +35,17 @@ const NavigationBar = () => {
   useEffect(() => {
     let headroom = new Headroom(document.getElementById("navbar-main")!);
     headroom.init();
-  });
+
+    const handleResize = () => {
+      setTextColor(window.innerWidth <= 767 ? "black" : "white");
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
   const handleButtonClick = () => {
     if (window.innerWidth <= 767 && buttonBRef.current) {
@@ -51,9 +64,9 @@ const NavigationBar = () => {
         >
           <Container className="d-flex justify-content-between">
             <Link href="/" className="mr-lg-5 mt-1">
-              <h2 className={`text-white ${russoOne.className}`} id="nav-title">
+              <h3 className={`text-white ${russoOne.className}`} id="nav-title">
                 Atul Vidhyajyot
-              </h2>
+              </h3>
             </Link>
             <button
               className="navbar-toggler"
@@ -65,19 +78,19 @@ const NavigationBar = () => {
             <UncontrolledCollapse
               toggler="#navbar_global"
               navbar
-              className={collapseClasses}
+              className={`${collapseClasses}`}
               onExiting={onExiting}
               onExited={onExited}
             >
               <div className="navbar-collapse-header">
                 <Row>
                   <Col className="collapse-brand" xs="6">
-                    <h3
+                    <h4
                       className={`text-black ${russoOne.className}`}
                       id="nav-title"
                     >
                       Atul Vidhyajyot
-                    </h3>
+                    </h4>
                   </Col>
                   <Col className="collapse-close" xs="6">
                     <button
@@ -98,7 +111,7 @@ const NavigationBar = () => {
                     <Link
                       rel="noopener"
                       aria-label={`/${urlString(each)}`}
-                      className="nav-link-icon text-white"
+                      className={`nav-link-icon text-${textColor}`}
                       href={`/${urlString(each)}`}
                       onClick={handleButtonClick}
                     >

diff --git a/src/app/homePage/ExploreMore.tsx b/src/app/homePage/ExploreMore.tsx
@@ -12,18 +12,12 @@ const ExploreMore = () => {
         </div>
         <Row className="row-grid align-items-center">
           {homeData.explore.links.map((link, i) => (
-            <Col lg="6" md="6" key={i} className="mt-2 col col-sm-6">
-              <Card
-                className="shadow-lg--hover shadow"
-                style={{ borderRadius: "20px" }}
-              >
-                <CardBody
-                  className="bg-gradient-info custom-card-body"
-                  style={{ borderRadius: "20px" }}
-                >
+            <Col lg="6" md="6" key={i} className="mt-2">
+              <Card className="shadow-lg--hover shadow bg-gradient-info rounded-5">
+                <CardBody className="custom-card-body">
                   <Link href={link === "Home" ? "/" : link.toLowerCase()}>
                     <div className="d-flex mx-3 justify-content-center">
-                      <div className="fw-bold text-white small-mobile-font">
+                      <div className="fw-bold text-white small">
                         {link} <FaSquareArrowUpRight />
                       </div>
                     </div>

diff --git a/src/app/homePage/Gallery.tsx b/src/app/homePage/Gallery.tsx
@@ -22,15 +22,13 @@ const Gallery = () => {
           </Fade>
         </Col>
         <Col lg="6" className="order-2 order-lg-1">
-          <Fade left duration={1000}>
-            <Lottie
-              options={{
-                loop: true,
-                autoplay: true,
-                animationData: general,
-              }}
-            />
-          </Fade>
+          <Lottie
+            options={{
+              loop: true,
+              autoplay: true,
+              animationData: general,
+            }}
+          />
         </Col>
       </Row>
       <Row className="my-5">
@@ -40,15 +38,13 @@ const Gallery = () => {
           </Fade>
         </Col>
         <Col lg="6" className="order-1 order-lg-2">
-          <Fade left duration={1000}>
-            <Lottie
-              options={{
-                loop: true,
-                autoplay: true,
-                animationData: functions,
-              }}
-            />
-          </Fade>
+          <Lottie
+            options={{
+              loop: true,
+              autoplay: true,
+              animationData: functions,
+            }}
+          />
         </Col>
       </Row>
     </Container>

diff --git a/src/app/homePage/Greetings.tsx b/src/app/homePage/Greetings.tsx
@@ -13,7 +13,7 @@ const Greetings = () => {
   return (
     <main>
       <div className="position-relative">
-        <section className="section section-lg section-shaped pb-5">
+        <section className="section section-lg section-shaped pt-5">
           <BackgroundDesign />
           <Container className="py-lg-md d-flex mt-3">
             <div className="col px-0">
@@ -26,7 +26,7 @@ const Greetings = () => {
                     {homeData.greetings.greet}
                   </p>
                 </Col>
-                <Col lg="6" className="d-flex justify-content-center">
+                <Col lg="6" className="d-flex justify-content-center pt-3">
                   <Image
                     className="mb-2 p-3 mt-3 img-responsive bg-white border border-dark rounded-3"
                     src={homeData.greetings.hostelImg}

diff --git a/src/app/rules/page.tsx b/src/app/rules/page.tsx
@@ -34,7 +34,7 @@ const Rules = () => {
                           margin: "20px",
                         }}
                       />
-                      <ul className="ml-3">
+                      <ul>
                         {rulesData.rules.gujarati.map((rule, index) => (
                           <li key={index}>{rule}</li>
                         ))}
@@ -46,7 +46,7 @@ const Rules = () => {
                           margin: "20px",
                         }}
                       />
-                      <ul className="ml-3" style={{ listStyleType: "square" }}>
+                      <ul style={{ listStyleType: "square" }}>
                         {rulesData.rules.english.map((rule, index) => (
                           <li key={index}>{rule}</li>
                         ))}

diff --git a/src/data/faqData.ts b/src/data/faqData.ts
@@ -1,7 +1,7 @@
 import { FaqData } from "@/types/type";
 
 export const faqData: FaqData = {
-    faqHeader: "Frequently Asked Questions",
+    faqHeader: "FAQs",
     headerText: "Got Questions? Find Clear Answers Here! Everything You Need to Know About Your Hostel Stay in Our Simple and Helpful Frequently Asked Questions Section.",
     faqData: [
         {

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -18,13 +18,9 @@ body > div:first-child {
     padding: 0;
     margin-top: 5px;
   }
-  .small-mobile-font {
-    /* padding: 2px, 0px; */
-    font-size: x-small;
-  }
 
   .custom-card-body {
     height: 35px;
-    padding-top: 0.5vw;
+    padding-top: 5px;
   }
 }