Feat-responsive (#54)

* feat: rresponsive * feat: responsive * fix: images * fix: home image * fix: image size * fix: small images * fix: footer * fix: search
pooranjoyb · May 13, 2024 · 9c5c9ee · 9c5c9ee
1 parent c74075c
commit 9c5c9ee
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 38 deletions.
diff --git a/public/images/dress.jpg b/public/images/dress.jpg
diff --git a/public/images/dress.png b/public/images/dress.png
diff --git a/public/images/footer.avif b/public/images/footer.avif
diff --git a/public/images/footer.jpg b/public/images/footer.jpg
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -6,14 +6,14 @@ import { IoLogoInstagram } from "react-icons/io5";
 import { FaDribbble } from "react-icons/fa";
 
 function Footer() {
-  return (
-    <>
-      <footer className="text-mynavy mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center bg-white lg:grid lg:grid-cols-5">
-        <div className="relative block h-32 lg:col-span-2 lg:h-full">
+    return (
+        <>
+            <footer className="text-mynavy mx-auto flex-col sm:flex-row max-w-screen-xl px-4 py-12 flex justify-center items-center bg-white lg:grid lg:grid-cols-5">
+            <div className="lg:col-span-2 h-full p-2 sm:p-0">
           <img
-            src="./images/footer.avif"
+            src="./images/footer.jpg"
             alt=""
-            className="absolute inset-0 h-full w-full object-cover"
+            className=" h-full w-full object-cover"
           />
         </div>
 

diff --git a/src/components/Head.tsx b/src/components/Head.tsx
@@ -7,7 +7,7 @@ interface HeadProps {
 export default function Head({ h1, h2 }: HeadProps) {
     return (
         <div className="flex text-mynavy justify-center items-center">
-            <div className="text-6xl font-extrabold">
+            <div className="text-4xl sm:text-6xl font-extrabold">
                 {h1} 
                 <span style={{
                     textShadow: "-1px -1px 0 #000, 5px -1px 0 #073B4C, -1px 1px 0 #073B4C, 10px 1px 0 #073B4C",

diff --git a/src/pages/Cart/Cart.tsx b/src/pages/Cart/Cart.tsx
@@ -23,12 +23,12 @@ function Cart() {
 
   return (
     <>
-      <div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
+      <div className=" mx-auto max-w-screen-xl px-4 pt-8 sm:py-12 flex justify-between items-center">
         <Head h1="Your" h2="Cart" />
       </div>
 
       {/* Cart Details */}
-      <div className="justify-center flex-1 px-4 py-6 mx-auto max-w-7xl lg:py-4 md:px-6">
+      <div className="justify-center flex-1 px-4 sm:py-6 mx-auto max-w-7xl lg:py-4 md:px-6">
         <div className="p-8 bg-gray-50 dark:bg-gray-800">
           <div className="flex flex-wrap -mx-4">
             <div className="w-full px-4 mb-8 xl:w-8/12 xl:mb-0">

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -9,7 +9,7 @@ function Home() {
   return (
     <>
       {/* Hero  */}
-      <div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
+      <div className=" mx-auto max-w-screen-xl px-4 pt-8 gap-6 sm:gap-0 sm:py-12 flex flex-col sm:flex-row justify-between items-center">
         <div className="max-w-xl ">
           <div className="text-mynavy">
             <Head h1="Make Your Look more" h2="Perfect" />
@@ -32,20 +32,20 @@ function Home() {
             </div>
           </div>
         </div>
-        <img className="w-1/3" src="./images/hero.png" alt="" />
+        <img className="w-2/3 sm:w-1/3 py-4 sm:p-0" src="./images/hero.png" alt="" />
       </div>
 
       {/* Section  */}
       <div
         id="about"
-        className="mx-auto max-w-screen-xl my-20 flex justify-between items-center pb-12"
+        className="mx-auto overflow-hidden max-w-screen-xl my-20 flex justify-between items-center pb-12"
       >
         <div className="container">
           <div className="-mx-4 flex  flex-row-reverse flex-wrap">
             <div className="w-full flex-col px-4 lg:w-5/12 justify-between">
-              <div className="flex-col pb-8 text-mynavy">
+              <div className="flex-col px-2 pb-8 text-mynavy">
                 <Head h1="Eat, Sleep, Fashion," h2="Repeat" />
-                <h1 className="text-mynavy mb-4 text-2xl font-extrabold text-dark mt-6">
+                <h1 className="text-mynavy mb-4 text-2xl  font-extrabold text-dark mt-6">
                   Grab the limited time offer!
                 </h1>
 
@@ -54,19 +54,19 @@ function Home() {
                   <b> &#x20B9;2500/-</b> only
                 </p>
               </div>
-              <div>
+              <div className="px-8 sm:p-0">
                 <img
-                  className="w-full mt-8"
+                  className=" w-full mt-8"
                   src="./images/fashion.jpg"
                   alt=""
                 />
               </div>
             </div>
             <div className="hidden px-4 lg:block lg:w-1/12"></div>
             <div className="w-full px-4 lg:w-6/12">
-              <div className="">
+              <div className="px-8 sm:p-0">
                 <div className="relative z-10 inline-block px-4 pt-11 lg:pt-0">
-                  <img src="./images/dress.png" alt="hero" className="w-full" />
+                  <img src="./images/dress.jpg" alt="hero" className="w-full" />
                   <span className="absolute -bottom-8 -right-10 z-[-1]">
                     <svg
                       width="93"
@@ -110,7 +110,7 @@ function Home() {
       </div>
 
       {/* New Collections  */}
-      <div className="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
+      <div className="mx-auto overflow-hidden max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
         <header className="text-center">
           <div className="text-mynavy">
             <Head h1="New" h2="Collections" />
@@ -121,21 +121,22 @@ function Home() {
           </p>
         </header>
 
-        <ul className="mt-8 flex flex-row gap-5">
+        <div className="mt-8 flex flex-col items-center justify-center sm:flex-row gap-5">
           <div className="flex gap-5 w-2/3">
             <img
               src="./images/winter3.jpg"
               alt=""
               className="w-full transition duration-500 "
             />
-
-            <img
-              src="./images/winter1.jpg"
-              alt=""
-              className="w-full transition duration-500 group-hover:opacity-90"
-            />
           </div>
-          <div className="flex flex-col w-1/3 gap-5">
+          <div className="flex gap-5 w-2/3">
+            <img
+                src="./images/winter1.jpg"
+                alt=""
+                className="w-full transition duration-500 group-hover:opacity -90"
+              />
+            </div>
+          <div className="flex flex-col w-2/3 gap-5">
             <img
               src="./images/winter2.jpg"
               alt=""
@@ -148,11 +149,11 @@ function Home() {
               className="w-full transition duration-500 "
             />
           </div>
-        </ul>
+        </div>
       </div>
 
       {/* Products  */}
-      <div className=" mx-auto max-w-screen-xl px-4 py-16 flex flex-col justify-between items-center">
+      <div className=" mx-auto overflow-hidden max-w-screen-xl px-4 py-16 flex flex-col justify-between items-center">
         <div className="text-mynavy">
           <Head h1="Our" h2="Products" />
         </div>

diff --git a/src/pages/Shop/Shop.tsx b/src/pages/Shop/Shop.tsx
@@ -1,24 +1,38 @@
-import { useEffect } from "react"
+import { useEffect } from "react";
 
 // components
-import Head from "../../components/Head"
-import Product from "../../components/Product"
+import Head from "../../components/Head";
+import Product from "../../components/Product";
 
 function Shop() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
     useEffect(() => {
         window.scrollTo(0, 0);
     }, []);
 
     return (
         <>
-            <div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
+            <div className=" flex-col sm:flex-row gap-8 p-2 py-8 mx-auto px-2 max-w-screen-xl sm:px-12 sm:py-12 lg:px-8 lg:py-12 flex justify-between items-center">
                 <Head h1="Our" h2="Store" />
                 <div>
-                    <label className="input input-bordered input-success flex items-center gap-2">
-                        <input type="text" className="grow" placeholder="Search" />
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4 opacity-70"><path fillRule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clipRule="evenodd" /></svg>
-                    </label>
+                <label className="input input-bordered input-success flex items-center gap-2">
+                    <input type="text" className="grow" placeholder="Search" />
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    className="w-4 h-4 opacity-70"
+                    >
+                    <path
+                        fillRule="evenodd"
+                        d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                        clipRule="evenodd"
+                    />
+                    </svg>
+                </label>
                 </div>
             </div>
             <div className="mx-auto max-w-2xl px-4 py-8 lg:max-w-7xl lg:px-8">
@@ -41,4 +55,4 @@ function Shop() {
     )
 }
 
-export default Shop
+export default Shop;
diff --git a/src/tailwind/output.css b/src/tailwind/output.css
@@ -83,6 +83,10 @@ hr {
   /* 3 */
 }
 
+#root{
+  overflow: hidden;
+}
+
 /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
@@ -2395,6 +2399,11 @@ html {
   padding-right: 2rem;
 }
 
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2447,6 +2456,14 @@ html {
   padding-bottom: 2rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .pt-11 {
   padding-top: 2.75rem;
 }
@@ -2632,7 +2649,20 @@ body {
   opacity: 0.9;
 }
 
+.w-100{
+  width: 100%;
+}
+
+.overflow-hidden{
+  overflow: hidden;
+}
+
 @media (min-width: 640px) {
+
+  .sm\:p-0{
+    padding: 0;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -2662,10 +2692,42 @@ body {
     padding-right: 1.5rem;
   }
 
+  .sm\:px-9 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:px-9 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
+
+  .sm\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .sm\:flex-col{
+    flex-direction: column;
+  }
+
+  .sm\:flex-row{
+    flex-direction: row;
+  }
+
+  .sm\:text-6xl{
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+  .sm\:w-1\/3 {
+    width: 33.333333%;
+  }
+
 }
 
 @media (min-width: 768px) {
@@ -2732,6 +2794,12 @@ body {
   }
 }
 
+
+
+.p-0{
+  padding: 0;
+}
+
 @media (min-width: 1024px) {
   .lg\:col-span-2 {
     grid-column: span 2 / span 2;
@@ -2810,6 +2878,11 @@ body {
     padding-right: 2rem;
   }
 
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .lg\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;