Changes to be committed:

new file: client/public/thumbnails/thumbnail-1.png new file: client/public/thumbnails/thumbnail-2.png new file: client/public/thumbnails/thumbnail-3.png modified: client/src/components/cards/Member-cart.tsx modified: client/src/components/cards/NewsCard.tsx modified: client/src/components/cards/RelatedCard.tsx modified: client/src/components/layouts/Navbar.tsx modified: client/src/pages/about.tsx modified: client/src/pages/cart.tsx modified: client/src/pages/login.tsx modified: client/src/pages/news/index.tsx modified: client/src/pages/news/singlePage.tsx modified: client/src/pages/products/details.tsx modified: client/src/pages/products/index.tsx modified: client/src/pages/register.tsx modified: client/src/pages/reset.tsx
koompi · Aug 23, 2023 · 0040007 · 0040007
1 parent 4a2b132
commit 0040007
Show file tree

Hide file tree

Showing 16 changed files with 673 additions and 472 deletions.
diff --git a/client/public/thumbnails/thumbnail-1.png b/client/public/thumbnails/thumbnail-1.png
diff --git a/client/public/thumbnails/thumbnail-2.png b/client/public/thumbnails/thumbnail-2.png
diff --git a/client/public/thumbnails/thumbnail-3.png b/client/public/thumbnails/thumbnail-3.png
diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
@@ -17,15 +17,15 @@ const MemberCard: Component<Props> = ({ props }) => {
       data-aos="zoom-out-down"
     >
       <img
-        class="mx-auto mb-4 w-52 h-52 rounded-full"
+        class="mx-auto mb-4 w-full h-full md:w-48 md:h-48 rounded-full"
         src={props.image}
         alt="Bonnie Avatar"
       />
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+      <h3 class="mb-1 text-md md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
         <A href="#">{props.name}</A>
       </h3>
 
-      <p>{props.position}</p>
+      <p class="text-xs md:text-lg">{props.position}</p>
     </div>
   );
 };

diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
@@ -16,7 +16,7 @@ const NewsCard: Component<Props> = ({ props }) => {
   return (
     <div class="w-full ">
       <NavLink href={`/news/${props.id}`}>
-        <div class="mx-auto mb-3 max-w-[370px]" data-aos="zoom-out-down">
+        <div class="mx-auto mb-3 max-w-[370px]">
           <div class="mb-3 overflow-hidden rounded-2xl border-gray-200 shadow hover:scale-105 duration-150">
             <img src={props.image} alt="news" class="w-full" />
           </div>

diff --git a/client/src/components/cards/RelatedCard.tsx b/client/src/components/cards/RelatedCard.tsx
@@ -19,7 +19,7 @@ const RelatedCard: Component<Props> = ({ props }) => {
         <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left border p-2 rounded-xl">
           <img
             alt="team"
-            class="flex-shrink-0 rounded-lg w-24 h-24 object-cover object-center sm:mb-0 mb-4"
+            class="flex-shrink-0 rounded-lg w-full md:w-24 object-cover object-center sm:mb-0 mb-4"
             src={props?.image}
           />
           <div class="flex-grow sm:pl-8">

diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -16,7 +16,7 @@ const Navbar: Component<{}> = () => {
   return (
     <div>
       <nav class="bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100 ">
-        <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-24">
+        <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-2 lg:px-24 xl:px-24 2xl:px-2">
           <A href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </A>

diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
diff --git a/client/src/pages/cart.tsx b/client/src/pages/cart.tsx
@@ -29,7 +29,7 @@ const Cart = () => {
     <>
       {/* <Checkout /> */}
       <div>
-        <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl ">
+        <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <h2 class="text-4xl text-[#98A2AE] font-bold text-center">
             Shopping Cart
           </h2>
@@ -202,7 +202,7 @@ const Cart = () => {
                       </div>
                     </div>
 
-                    <div class="md:col-span-2">
+                    <div class="md:col-span-2 mt-9 md:mt-6">
                       <div class="lg:px-2">
                         <div class="p-4 bg-gray-100 rounded-full">
                           <h1 class="ml-2 font-bold uppercase">Coupon Code</h1>
@@ -331,7 +331,7 @@ const Cart = () => {
                                 d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"
                               />
                             </svg>
-                            <span class="ml-2 mt-5px">
+                            <span class="ml-2 mt-1 text-sm md:text-md ">
                               Procceed to checkout
                             </span>
                           </button>

diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
@@ -7,16 +7,20 @@ const Login = () => {
       style="background-image:url('./../../public/images/jcomp.jpg')"
     >
       <div class="w-full h-screen absolute bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-5" />
-      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-[27vw] lg:py-0">
+      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-full md:w-[40vw] lg:w-[30vw] xl:w-[36vw] 2xl:w-[27vw] lg:py-0">
         <A
           href="/"
           class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
         >
-          <img class="w-32 z-50" src="/images/logo.png" alt="logo" />
+          <img
+            class="w-32 md:w-16 lg:w-16 xl:w-16 2xl:w-32 z-50"
+            src="/images/logo.png"
+            alt="logo"
+          />
         </A>
         <div class="w-full bg-white/60 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-30 rounded-2xl shadow-md dark:border md:mt-0 sm:max-w-xl:p-0 dark:bg-gray-800 dark:border-gray-700">
           <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <h1 class="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+            <h1 class="text-xl md:text-sm lg:text-sm xl:text-sm 2xl:text-xl text-center font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
               Welcome back!
             </h1>
 

diff --git a/client/src/pages/news/index.tsx b/client/src/pages/news/index.tsx
@@ -4,9 +4,9 @@ import NewsData from "../../data/News";
 
 const News: Component = () => {
   return (
-    <section class="w-full h-screen overflow-x-hidden">
+    <section class="w-full h-screen overflow-x-hidden ">
       <div class="background-img-about">
-        <div class="bg-white/60 w-full h-full bg-opacity-5">
+        <div class="bg-white/60 w-full h-full bg-opacity-5 px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div class="mx-auto max-w-screen-xl py-9 ">
             <div class="flex px-5 md:flex-row flex-col items-center bg-white rounded-3xl">
               <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-left">

diff --git a/client/src/pages/news/singlePage.tsx b/client/src/pages/news/singlePage.tsx
@@ -7,10 +7,10 @@ const SinglePageNews: Component = () => {
   return (
     <>
       <main class="pt-8 pb-16 lg:pt-16 lg:pb-24 bg-white dark:bg-gray-900">
-        <div class="grid grid-cols-3  gap-3 justify-between px-4 mx-auto max-w-screen-xl ">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 justify-between px-4 mx-auto max-w-screen-xl ">
           <article class="col-span-2 mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg format-blue dark:format-invert">
             <header class="mb-4 lg:mb-6 not-format">
-              <h1 class="mb-4 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white">
+              <h1 class="mb-4 text-xl md:text-2xl font-extrabold leading-tight text-gray-900 lg:mb-6 dark:text-white">
                 King Norodom Sihamoni’s Birthday
               </h1>
             </header>
@@ -506,6 +506,7 @@ const SinglePageNews: Component = () => {
             </section>
           </article>
           <div class="col-span-auto w-full p-3 rounded-xl ">
+            <h3>Related contents</h3>
             <For each={NewsData}>
               {(NewData) => {
                 return <RelatedCard props={NewData} />;

diff --git a/client/src/pages/products/details.tsx b/client/src/pages/products/details.tsx
@@ -39,7 +39,7 @@ const ProductDetail: Component<{}> = (props) => {
 
   return (
     <>
-      <div class="bg-white">
+      <div class="px-0 md:px-16">
         <div class="pt-6">
           <nav aria-label="Breadcrumb">
             <ol
@@ -93,7 +93,37 @@ const ProductDetail: Component<{}> = (props) => {
             </ol>
           </nav>
 
-          <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-4 lg:px-8">
+          <div class="block md:hidden relative -z-10 px-4 pt-4">
+            <div id="default-carousel" class="w-full" data-carousel="slide">
+              <div class="relative h-[180px] overflow-hidden rounded-lg">
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-1.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-2.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-3.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="hidden md:block mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-4 lg:px-8">
             <Image
               image="/products/product1.png"
               name="undefined"
@@ -602,9 +632,9 @@ const ProductDetail: Component<{}> = (props) => {
           </div>
         </div>
       </div>
-      <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
+      <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl px-4 md:px-4 lg:px-24 xl:px-24 2xl:px-4">
         <h1 class="text-gray-900 font-bold text-2xl">Related products</h1>
-        <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12 ">
+        <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12">
           <For each={CoreProducts.slice(0, 4)}>
             {(CoreProducts) => {
               return (