afront 1.0.22 → 1.0.25

package/src/Components/Background/MeshGradient.js

@@ -1,18 +1,18 @@
-import React from "react";
-import * as styles from "../../Style/MeshGradient.module.css";
-
-const MeshGradient = ({ children }) => {
-  return (
-    <div className={styles.gradientWrap}>
-      <div className={styles.meshgradient}>
-        <div className={`${styles.color} ${styles.c1}`}></div>
-        <div className={`${styles.color} ${styles.c2}`}></div>
-        <div className={`${styles.color} ${styles.c3}`}></div>
-        <div className={`${styles.color} ${styles.c4}`}></div>
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export default MeshGradient;
+import React from "react";
+import * as styles from "../../Style/MeshGradient.module.css";
+
+const MeshGradient = ({ children }) => {
+  return (
+    <div className={styles.gradientWrap}>
+      <div className={styles.meshgradient}>
+        <div className={`${styles.color} ${styles.c1}`}></div>
+        <div className={`${styles.color} ${styles.c2}`}></div>
+        <div className={`${styles.color} ${styles.c3}`}></div>
+        <div className={`${styles.color} ${styles.c4}`}></div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default MeshGradient;

package/src/Components/Footer/Footer.js

@@ -1,108 +1,108 @@
-import React from "react";
-import * as styles from "../../Style/Style.module.css";
-
-const Footer = () => {
-  return (
-    <footer className={styles.footer}>
-      <div className={styles.footerContainer}>
-        <div className={styles.footerBrand}>
-          <a href="/" className={styles.footerLogo}>
-            AFront
-          </a>
-          <p className={styles.footerDescription}>
-            Empowering front-end development with cutting-edge tools and
-            services.
-          </p>
-        </div>
-
-        <div className={styles.footerLinks}>
-          <div className={styles.linkColumn}>
-            <h4 className={styles.footerTitle}>Company</h4>
-            <ul className={styles.linkList}>
-              <li>
-                <a href="/about" className={styles.link}>
-                  About Us
-                </a>
-              </li>
-              <li>
-                <a href="/careers" className={styles.link}>
-                  Careers
-                </a>
-              </li>
-              <li>
-                <a href="/contact" className={styles.link}>
-                  Contact Us
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <div className={styles.linkColumn}>
-            <h4 className={styles.footerTitle}>Resources</h4>
-            <ul className={styles.linkList}>
-              <li>
-                <a href="/blog" className={styles.link}>
-                  Blog
-                </a>
-              </li>
-              <li>
-                <a href="/docs" className={styles.link}>
-                  Documentation
-                </a>
-              </li>
-              <li>
-                <a href="/community" className={styles.link}>
-                  Community
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <div className={styles.linkColumn}>
-            <h4 className={styles.footerTitle}>Products</h4>
-            <ul className={styles.linkList}>
-              <li>
-                <a href="/features" className={styles.link}>
-                  Features
-                </a>
-              </li>
-              <li>
-                <a href="/pricing" className={styles.link}>
-                  Pricing
-                </a>
-              </li>
-              <li>
-                <a href="/support" className={styles.link}>
-                  Support
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.footerBottom}>
-        <p className={styles.footerCopy}>
-          © {new Date().getFullYear()} AFront by Asggen Inc. All rights
-          reserved.
-        </p>
-        <div className={styles.socialLinks}>
-          <a href="https://twitter.com" className={styles.socialLink}>
-            Twitter
-          </a>
-          <a href="https://facebook.com" className={styles.socialLink}>
-            Facebook
-          </a>
-          <a
-            href="https://www.linkedin.com/showcase/asggenchat/"
-            className={styles.socialLink}
-          >
-            LinkedIn
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
+import React from "react";
+import * as styles from "../../Style/Style.module.css";
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerContainer}>
+        <div className={styles.footerBrand}>
+          <a href="/" className={styles.footerLogo}>
+            AFront
+          </a>
+          <p className={styles.footerDescription}>
+            Empowering front-end development with cutting-edge tools and
+            services.
+          </p>
+        </div>
+
+        <div className={styles.footerLinks}>
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Company</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/about" className={styles.link}>
+                  About Us
+                </a>
+              </li>
+              <li>
+                <a href="/careers" className={styles.link}>
+                  Careers
+                </a>
+              </li>
+              <li>
+                <a href="/contact" className={styles.link}>
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Resources</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/blog" className={styles.link}>
+                  Blog
+                </a>
+              </li>
+              <li>
+                <a href="/docs" className={styles.link}>
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a href="/community" className={styles.link}>
+                  Community
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Products</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/features" className={styles.link}>
+                  Features
+                </a>
+              </li>
+              <li>
+                <a href="/pricing" className={styles.link}>
+                  Pricing
+                </a>
+              </li>
+              <li>
+                <a href="/support" className={styles.link}>
+                  Support
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.footerBottom}>
+        <p className={styles.footerCopy}>
+          © {new Date().getFullYear()} AFront by Asggen Inc. All rights
+          reserved.
+        </p>
+        <div className={styles.socialLinks}>
+          <a href="https://twitter.com" className={styles.socialLink}>
+            Twitter
+          </a>
+          <a href="https://facebook.com" className={styles.socialLink}>
+            Facebook
+          </a>
+          <a
+            href="https://www.linkedin.com/showcase/asggenchat/"
+            className={styles.socialLink}
+          >
+            LinkedIn
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/Components/Header/Header.js

@@ -1,149 +1,149 @@
-import React, { useState, useEffect } from "react";
-import * as styles from "../../Style/Style.module.css";
-
-const Header = () => {
-  const [isBurgerActive, setBurgerActive] = useState(false);
-  const [isScrolled, setScrolled] = useState(false);
-
-  // Toggle burger and menu
-  const toggleMenu = () => {
-    setBurgerActive(!isBurgerActive);
-  };
-
-  // Handle click on menu links
-  const closeMenu = () => {
-    setBurgerActive(false);
-  };
-
-  // Change header background on scrolling
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrolled(window.scrollY >= 5);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
-  // Fixed Navbar Menu on Window Resize
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth > 768 && isBurgerActive) {
-        setBurgerActive(false);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [isBurgerActive]);
-
-  useEffect(() => {
-    if (isBurgerActive) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
-    return () => {
-      document.body.style.overflow = "auto"; // Reset to default on unmount
-    };
-  }, [isBurgerActive]);
-  return (
-    <header
-      className={`${styles.header}  ${
-        isBurgerActive
-          ? styles.offScroll
-          : `${isScrolled ? styles.onScroll : ""}`
-      } `}
-      id="header"
-    >
-      <nav className={`${styles.navbar} ${styles.container}`}>
-        <a href="/" className={`${styles.brand}`}>
-          AFront
-        </a>
-        <div
-          className={`${styles.burger} ${
-            isBurgerActive ? styles.isActive : ""
-          }`}
-          id="burger"
-          onClick={toggleMenu}
-        >
-          <span className={styles.burgerLine}></span>
-          <span className={styles.burgerLine}></span>
-          <span className={styles.burgerLine}></span>
-        </div>
-        <div
-          className={`${styles.menu} ${
-            isBurgerActive ? styles.isActive : styles.isInActive
-          }`}
-          id="menu"
-        >
-          <ul className={styles.menuInner}>
-            <li className={styles.menuItem}>
-              <a
-                href="#"
-                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
-                onClick={closeMenu}
-              >
-                Learn
-              </a>
-            </li>
-            <li className={styles.menuItem}>
-              <a
-                href="#"
-                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
-                onClick={closeMenu}
-              >
-                Feature
-              </a>
-            </li>
-            <li className={styles.menuItem}>
-              <a
-                href="#"
-                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
-                onClick={closeMenu}
-              >
-                Blog
-              </a>
-            </li>
-            <li className={styles.menuItem}>
-              <a
-                href="/support"
-                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
-                onClick={closeMenu}
-              >
-                Support
-              </a>
-            </li>
-            {isBurgerActive && (
-              <>
-                <li className={styles.menuItem}>
-                  <a
-                    href="#"
-                    className={`${styles.menuLink} ${
-                      isBurgerActive ? styles.menuLinkMobile : ""
-                    }`}
-                    onClick={closeMenu}
-                  >
-                    demo
-                  </a>
-                </li>
-              </>
-            )}
-          </ul>
-        </div>
-        <a href="/" className={styles.menuBlock}>
-          Get Started
-        </a>
-      </nav>
-    </header>
-  );
-};
-
-export default Header;
+import React, { useState, useEffect } from "react";
+import * as styles from "../../Style/Style.module.css";
+
+const Header = () => {
+  const [isBurgerActive, setBurgerActive] = useState(false);
+  const [isScrolled, setScrolled] = useState(false);
+
+  // Toggle burger and menu
+  const toggleMenu = () => {
+    setBurgerActive(!isBurgerActive);
+  };
+
+  // Handle click on menu links
+  const closeMenu = () => {
+    setBurgerActive(false);
+  };
+
+  // Change header background on scrolling
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY >= 5);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  // Fixed Navbar Menu on Window Resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 768 && isBurgerActive) {
+        setBurgerActive(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isBurgerActive]);
+
+  useEffect(() => {
+    if (isBurgerActive) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto"; // Reset to default on unmount
+    };
+  }, [isBurgerActive]);
+  return (
+    <header
+      className={`${styles.header}  ${
+        isBurgerActive
+          ? styles.offScroll
+          : `${isScrolled ? styles.onScroll : ""}`
+      } `}
+      id="header"
+    >
+      <nav className={`${styles.navbar} ${styles.container}`}>
+        <a href="/" className={`${styles.brand}`}>
+          AFront
+        </a>
+        <div
+          className={`${styles.burger} ${
+            isBurgerActive ? styles.isActive : ""
+          }`}
+          id="burger"
+          onClick={toggleMenu}
+        >
+          <span className={styles.burgerLine}></span>
+          <span className={styles.burgerLine}></span>
+          <span className={styles.burgerLine}></span>
+        </div>
+        <div
+          className={`${styles.menu} ${
+            isBurgerActive ? styles.isActive : styles.isInActive
+          }`}
+          id="menu"
+        >
+          <ul className={styles.menuInner}>
+            <li className={styles.menuItem}>
+              <a
+                href="#"
+                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
+                onClick={closeMenu}
+              >
+                Learn
+              </a>
+            </li>
+            <li className={styles.menuItem}>
+              <a
+                href="#"
+                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
+                onClick={closeMenu}
+              >
+                Feature
+              </a>
+            </li>
+            <li className={styles.menuItem}>
+              <a
+                href="#"
+                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
+                onClick={closeMenu}
+              >
+                Blog
+              </a>
+            </li>
+            <li className={styles.menuItem}>
+              <a
+                href="/support"
+                className={`${styles.menuLink} ${isBurgerActive ? styles.menuLinkMobile : ""}`}
+                onClick={closeMenu}
+              >
+                Support
+              </a>
+            </li>
+            {isBurgerActive && (
+              <>
+                <li className={styles.menuItem}>
+                  <a
+                    href="#"
+                    className={`${styles.menuLink} ${
+                      isBurgerActive ? styles.menuLinkMobile : ""
+                    }`}
+                    onClick={closeMenu}
+                  >
+                    demo
+                  </a>
+                </li>
+              </>
+            )}
+          </ul>
+        </div>
+        <a href="/" className={styles.menuBlock}>
+          Get Started
+        </a>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

package/src/Components/Loading/LoadingIndicator.js

@@ -1,12 +1,12 @@
-import React from "react";
-import * as styles from "./LoadingIndicator.module.css"; 
-
-const LoadingIndicator = () => {
-  return (
-    <div className={styles.loadingIndicator}>
-      <div className={styles.loadingLine}></div>
-    </div>
-  );
-};
-
-export default LoadingIndicator;
+import React from "react";
+import * as styles from "./LoadingIndicator.module.css"; 
+
+const LoadingIndicator = () => {
+  return (
+    <div className={styles.loadingIndicator}>
+      <div className={styles.loadingLine}></div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

package/src/Components/Loading/LoadingIndicator.module.css

@@ -1,34 +1,34 @@
-.loadingIndicator {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 0.25rem;
-    background-color: #4287f5;
-    z-index: 9998;
-    overflow: hidden;
-}
-
-.loadingLine {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, #84f9f1, transparent);
-    position: absolute;
-    animation: loadingAnimation 0.5s ease-in-out infinite;
-}
-
-@keyframes loadingAnimation {
-    0% {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-
-    50% {
-        opacity: 1;
-    }
-
-    100% {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
+.loadingIndicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.25rem;
+    background-color: #4287f5;
+    z-index: 9998;
+    overflow: hidden;
+}
+
+.loadingLine {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, #84f9f1, transparent);
+    position: absolute;
+    animation: loadingAnimation 0.5s ease-in-out infinite;
+}
+
+@keyframes loadingAnimation {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}