fix: add smooth scroll, focus-visible styles, and skeleton animation

index.html

@@ -2,9 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="./icon.ico" type="image/x-icon">
+    <link rel="icon" href="/icon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="/icon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PopShop</title>
+    <meta name="description" content="PopShop - Your ultimate destination for trendy and fashionable apparel. Shop the latest collections at affordable prices.">
+    <meta name="keywords" content="fashion, clothing, apparel, online shopping, trendy clothes, PopShop">
+    <meta name="author" content="PopShop">
+    <meta property="og:title" content="PopShop - Fashion Redefined">
+    <meta property="og:description" content="Your ultimate destination for trendy and fashionable apparel. Shop the latest collections at affordable prices.">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/logo.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="PopShop - Fashion Redefined">
+    <meta name="twitter:description" content="Your ultimate destination for trendy and fashionable apparel.">
+    <title>PopShop - Fashion Redefined</title>
     <link rel="stylesheet" href="/src/tailwind/output.css">
   </head>
   <body>

src/browserRoutes/routes/Routes.tsx

@@ -16,6 +16,7 @@ import Profile from "../../pages/Profile/Profile";
 import TopButton from "../../components/TopButton/TopButton";
 import TermsandConditions from "../../pages/T&C/TermsCond";
 import MyOrders from "../../pages/Orders/MyOrders";
+import About from "../../pages/About/About";
 
 // Admin Routes
 import AdminLayout from "../../admin/AdminLayout/AdminLayout";
@@ -121,6 +122,10 @@ const Routes = () => {
           path: "my-orders",
           element: <MyOrders />,
         },
+        {
+          path: "about",
+          element: <About />,
+        },
       ]
     },
     {

src/components/Footer.tsx

@@ -78,7 +78,7 @@ const ServicesList = () => {
           <Link to="#" className="text-gray-700 transition hover:opacity-75">Join Us</Link>
         </li>
         <li>
-          <Link to="/#about" className="text-gray-700 transition hover:opacity-75">About</Link>
+          <Link to="/home/about" className="text-gray-700 transition hover:opacity-75">About</Link>
         </li>
       </ul>
     </>

src/components/Navbar.tsx

@@ -304,6 +304,9 @@ function Navbar() {
             <li>
               <Link to={"/home#Products"} onClick={() => setShowHamburgerMenu(false)}>Product</Link>
             </li>
+            <li>
+              <Link to={"/home/about"} onClick={() => setShowHamburgerMenu(false)}>About Us</Link>
+            </li>
             <li>
               <Link to={"/home/contact"} onClick={() => setShowHamburgerMenu(false)}>Contact Us</Link>
             </li>

src/index.css

@@ -36,4 +36,6 @@ img {
 img:hover {
     transform: scale(1.05);
     opacity: 0.9;
-}
+}*:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 4px; }
+.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

src/pages/About/About.tsx

@@ -0,0 +1,80 @@
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import Head from "../../components/Head";
+import { Tilt } from "react-tilt";
+
+export default function About() {
+  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 });
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 100 }}
+      animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 100 }}
+      transition={{ duration: 1 }}
+      className="mx-auto max-w-screen-xl px-4 py-16"
+    >
+      <div className="text-mynavy mb-12">
+        <Head h1="About" h2="Us" />
+      </div>
+
+      <div className="flex flex-col lg:flex-row items-center gap-12">
+        <div className="w-full lg:w-1/2">
+          <Tilt
+            options={{ max: 15, scale: 1.05, speed: 400 }}
+            className="w-full"
+          >
+            <img
+              src="/images/fashion.jpg"
+              alt="About PopShop"
+              className="w-full rounded-2xl shadow-xl"
+            />
+          </Tilt>
+        </div>
+
+        <div className="w-full lg:w-1/2 text-mynavy space-y-6">
+          <h2 className="text-3xl font-bold">Welcome to PopShop</h2>
+          <p className="text-lg leading-relaxed">
+            PopShop is your ultimate destination for trendy and fashionable
+            apparel. We believe that style should be accessible to everyone,
+            which is why we curate the best collections at prices that won't
+            break the bank.
+          </p>
+          <p className="text-lg leading-relaxed">
+            From casual wear to premium exclusives, our platform offers a
+            seamless shopping experience with a wide range of sizes and styles
+            to suit every personality.
+          </p>
+          <p className="text-lg leading-relaxed">
+            Join thousands of happy customers and redefine your wardrobe with
+            PopShop — where fashion meets passion.
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+        <div className="p-8 rounded-xl shadow-lg bg-white">
+          <h3 className="text-2xl font-bold text-mynavy mb-4">Our Mission</h3>
+          <p className="text-gray-600">
+            To provide high-quality fashion at affordable prices while
+            delivering an exceptional shopping experience.
+          </p>
+        </div>
+        <div className="p-8 rounded-xl shadow-lg bg-white">
+          <h3 className="text-2xl font-bold text-mynavy mb-4">Our Vision</h3>
+          <p className="text-gray-600">
+            To become the go-to fashion destination for style-conscious
+            individuals worldwide.
+          </p>
+        </div>
+        <div className="p-8 rounded-xl shadow-lg bg-white">
+          <h3 className="text-2xl font-bold text-mynavy mb-4">Our Values</h3>
+          <p className="text-gray-600">
+            Quality, affordability, inclusivity, and customer satisfaction are
+            at the heart of everything we do.
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

src/pages/Auth/Auth.tsx

@@ -516,11 +516,15 @@ function Auth() {
                       value={userData.pass}
                       onChange={handleInputChange}
                     />
-                    <FontAwesomeIcon
-                      icon={isPasswordVisible ? faEyeSlash : faEye}
+                    <button
+                      type="button"
                       onClick={togglePasswordVisibility}
                       className="absolute right-3 top-10 cursor-pointer"
-                    />
+                    >
+                      <FontAwesomeIcon
+                        icon={isPasswordVisible ? faEyeSlash : faEye}
+                      />
+                    </button>
                     {errors.password && (
                       <ul
                         className="px-2 text-xs mt-1"

src/pages/Home/Home.tsx

@@ -62,13 +62,13 @@ function Home() {
           <div className="mt-8 w-full flex flex-wrap gap-4 text-center">
             <a
               href="#about"
-              className="btn w-1/2 bg-myred hover:bg-myyellow text-white"
+              className="btn w-full sm:w-1/2 bg-myred hover:bg-myyellow text-white"
             >
               Get Started
             </a>
             <Link
               to="/home/shop"
-              className="btn w-1/3 bg-mygreen hover:bg-myyellow text-white"
+              className="btn w-full sm:w-1/3 bg-mygreen hover:bg-myyellow text-white"
             >
               Explore
             </Link>
@@ -77,11 +77,11 @@ function Home() {
       </div>
       <Tilt
         options={{
-          max: 25, // Maximum tilt rotation
-          scale: 1.05, // Image scale on hover
-          speed: 400, // Speed of the enter/exit transition
+          max: 25,
+          scale: 1.05,
+          speed: 400,
         }}
-        className="w-2/3 sm:w-1/3 py-4 sm:p-0"
+        className="w-full sm:w-2/3 md:w-1/3 py-4 sm:p-0"
       >
         <img src="/images/hero.png" alt="" />
       </Tilt>
@@ -187,21 +187,21 @@ function Home() {
           </p>
         </header>
         <div className="mt-8 flex flex-col items-center justify-center sm:flex-row gap-5">
-          <div className="flex gap-5 w-2/3">
+          <div className="flex gap-5 w-full sm:w-1/2 md:w-2/3">
             <img
               src="/images/winter3.jpg"
               alt=""
               className="w-full transition duration-1000"
             />
           </div>
-          <div className="flex gap-5 w-2/3">
+          <div className="flex gap-5 w-full sm:w-1/2 md:w-2/3">
             <img
               src="/images/winter1.jpg"
               alt=""
               className="w-full transition duration-1000 group-hover:opacity-90"
             />
           </div>
-          <div className="flex flex-col w-2/3 gap-5">
+          <div className="flex flex-col w-full sm:w-1/2 md:w-2/3 gap-5">
             <img
               src="/images/winter2.jpg"
               alt=""

src/pages/Shop/Shop.tsx

@@ -85,7 +85,7 @@ function Shop() {
           if (f.split("-")[1] !== "above") {
             max = +f.split("-")[1].slice(1);
           }
-          let newFilteredData = filteredData.filter((elem) => {
+          let newFilteredData = data.filter((elem) => {
             return min <= elem.Price && max >= elem.Price;
           });
           if (priceFilteredData.length !== 0) {
@@ -128,9 +128,9 @@ function Shop() {
 
   return (
     <>
-      <div className="mx-auto max-w-screen-xl px-4 pt-12 pb-8 flex justify-center md:justify-between items-center flex-wrap">
+      <div className="mx-auto max-w-screen-xl px-4 pt-12 pb-8 flex flex-col md:flex-row justify-center md:justify-between items-center">
         <Head h1="Our" h2="Store" />
-        <div className="flex gap-6 mt-8 justify-center md:justify-end w-full">
+        <div className="flex gap-4 mt-8 justify-center md:justify-end w-full md:w-auto">
           {/* The button to open modal */}
           <label
             htmlFor="my_modal_6"
@@ -193,10 +193,10 @@ function Shop() {
             </div>
           </div>
 
-          <label className="input input-bordered input-success flex items-center gap-2">
+          <label className="input input-bordered input-success flex items-center gap-2 w-full sm:w-auto">
             <input
               type="text"
-              className="grow w-36"
+              className="grow w-full sm:w-36"
               placeholder="Search"
               onChange={handleSearch}
             />