Changes to be committed:

modified: client/index.html modified: client/package-lock.json modified: client/package.json modified: client/postcss.config.js new file: client/public/images/banner-2.png new file: client/public/images/news-background.jpg new file: client/public/images/royal-king.jpg new file: client/public/images/shopping.png modified: client/src/App.tsx modified: client/src/components/cards/Member-cart.tsx modified: client/src/components/cards/NewsCard.tsx modified: client/src/components/layouts/Navbar.tsx modified: client/src/index.css modified: client/src/pages/about.tsx modified: client/src/pages/cart.tsx modified: client/src/pages/home.tsx new file: client/src/pages/news/index.tsx new file: client/src/pages/news/singlePage.tsx modified: client/tailwind.config.js
koompi · Aug 1, 2023 · dcffb5d · dcffb5d
1 parent 63ac5df
commit dcffb5d
Show file tree

Hide file tree

Showing 19 changed files with 2,383 additions and 539 deletions.
diff --git a/client/index.html b/client/index.html
@@ -16,6 +16,6 @@
     <div id="root"></div>
 
     <script src="/src/index.tsx" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/kute.min.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/kute.min.js"></script> -->
   </body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -28,6 +28,7 @@
     "json-server": "^0.17.3",
     "kute.js": "^2.2.4",
     "lottie-web": "^5.12.2",
-    "solid-js": "^1.7.6"
+    "solid-js": "^1.7.6",
+    "tailwindcss-animated": "^1.0.1"
   }
 }
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/client/public/images/banner-2.png b/client/public/images/banner-2.png
diff --git a/client/public/images/news-background.jpg b/client/public/images/news-background.jpg
diff --git a/client/public/images/royal-king.jpg b/client/public/images/royal-king.jpg
diff --git a/client/public/images/shopping.png b/client/public/images/shopping.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -9,10 +9,12 @@ import Contact from "./pages/contact";
 import Cart from "./pages/cart";
 import ProductDetail from "./pages/products/details";
 import Products from "./pages/products";
+import News from "./pages/news";
+import SinglePageNews from "./pages/news/singlePage";
 
 const App: Component = () => {
   return (
-    <div>
+    <section>
       <Navbar />
       <Routes>
         <Route path="/" component={Home} />
@@ -21,9 +23,11 @@ const App: Component = () => {
         <Route path="/cart" component={Cart} />
         <Route path="/products" component={Products} />
         <Route path="/products/:id?" component={ProductDetail} />
+        <Route path="/news" component={News} />
+        <Route path="/news/:id?" component={SinglePageNews} />
       </Routes>
       <Footer />
-    </div>
+    </section>
   );
 };
 

diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
@@ -11,18 +11,17 @@ interface Props {
 }
 const MemberCard: Component<Props> = ({ props }) => {
   return (
-    <div>
-      <div class="bg-base-200 rounded h-full">
-        <div class="md:py-8 py-2 px-10">
-          <div class="flex justify-center">
-            <img class="w-44" src={props.image} />
-          </div>
-        </div>
-        <div class="text-center px-2 py-8">
-          <h1 class="font-bold text-pink-500">{props.name}</h1>
-          <p class="text-sm text-gray-600">{props.position}</p>
-        </div>
-      </div>
+    <div class="text-center text-gray-500 dark:text-gray-400">
+      <img
+        class="mx-auto mb-4 w-52 h-52 rounded-full"
+        src={props.image}
+        alt="Bonnie Avatar"
+      />
+      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <a href="#">{props.name}</a>
+      </h3>
+
+      <p>{props.position}</p>
     </div>
   );
 };

diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
@@ -1,4 +1,5 @@
 import { Component } from "solid-js";
+import { NavLink } from "@solidjs/router";
 
 export type NewsData = {
   id: string;
@@ -14,25 +15,24 @@ interface Props {
 const NewsCard: Component<Props> = ({ props }) => {
   return (
     <div class="w-full ">
-      <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" />
+      <NavLink href={`/news/${props.id}`}>
+        <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>
+          <div>
+            <h3>
+              <a
+                href="javascript:void(0)"
+                class="text-dark hover:text-primary inline-block text-xl font-semibold sm:text-lg lg:text-lg xl:text-lg"
+              >
+                {props.title}
+              </a>
+            </h3>
+            <p class="text-body-color text-base">{props.des}</p>
+          </div>
         </div>
-        <div>
-          <span class="bg-primary mb-2 inline-block rounded-lg py-1 px-4 text-center text-xs font-semibold leading-loose text-white">
-            Dec 22, 2023
-          </span>
-          <h3>
-            <a
-              href="javascript:void(0)"
-              class="text-dark hover:text-primary inline-block text-xl font-semibold sm:text-lg lg:text-lg xl:text-lg"
-            >
-              {props.title}
-            </a>
-          </h3>
-          <p class="text-body-color text-base">{props.des}</p>
-        </div>
-      </div>
+      </NavLink>
     </div>
   );
 };

diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -103,7 +103,7 @@ const Navbar: Component = () => {
         </div>
       </div> */}
 
-      <nav class="bg-white border-gray-200 dark:bg-gray-900">
+      <nav class=" bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <a href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
@@ -161,7 +161,7 @@ const Navbar: Component = () => {
             <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
                 <a
-                  href="#"
+                  href="/"
                   class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
                   aria-current="page"
                 >
@@ -170,23 +170,23 @@ const Navbar: Component = () => {
               </li>
               <li>
                 <a
-                  href="#products"
+                  href="/products"
                   class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Products
                 </a>
               </li>
               <li>
-                <a
-                  href="#"
+                <NavLink
+                  href="/about-us"
                   class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   About
-                </a>
+                </NavLink>
               </li>
               <li>
                 <a
-                  href="#"
+                  href="#contact"
                   class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Contact

diff --git a/client/src/index.css b/client/src/index.css
@@ -34,24 +34,7 @@ body {
   left: 50%;
   transform: translateX(-50%);
 }
-.about-bg-img {
-  background-image: url("/images/cool-background.svg");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 60vh;
-}
-.about-header-img {
-  background-image: url("/images/blob-scene-haikei.svg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 60vh;
-}
-.footer-bg-about-img {
-  background-image: url("/images/wave-haikei.svg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 1000px;
-}
+
 .bg-shopping-cart {
   background-image: url("/images/circle-scatter-haikei1.svg");
   background-repeat: no-repeat;
@@ -123,3 +106,21 @@ body {
   width: 100%;
   height: 100%;
 }
+
+.background-img-about {
+  background-image: url("../public/images/banner-2.png");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+}
+
+.news-background {
+  background-image: url("../public/images/news-background.jpg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+}