afront 1.0.19 → 1.0.20

package/src/Pages/Signup.js

@@ -0,0 +1,230 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+import auth from "../Api/login.service";
+
+function Signup() {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [accountType, setAccountType] = useState("personal"); // personal/creator or business
+  const [companyName, setCompanyName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const validateStep = () => {
+    setError(null);
+    if (step === 1) {
+      if (!email) return "Email is required";
+      // basic email regex
+      const emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+      if (!emailRegex.test(email)) return "Enter a valid email address";
+      if (!password) return "Password is required";
+      if (password.length < 8) return "Password must be at least 8 characters";
+    }
+    if (step === 2) {
+      if (!name || name.trim().length === 0) return "Full name is required";
+    }
+    if (step === 3) {
+      if (!accountType) return "Select account type";
+      if (
+        accountType === "business" &&
+        (!companyName || companyName.trim().length === 0)
+      )
+        return "Brand / Company Name is required for business accounts";
+    }
+    return null;
+  };
+
+  const handleNext = (e) => {
+    (async () => {
+      if (e) e.preventDefault();
+      const err = validateStep();
+      if (err) return setError(err);
+      setError(null);
+      // On step 1, call backend to check email (exists/disposable)
+      if (step === 1) {
+        try {
+          const res = await auth.checkSignup({ email });
+          if (!res || !res.ok) {
+            setError(
+              (res && res.data && (res.data.error || res.data.message)) ||
+                "Check failed"
+            );
+            return;
+          }
+          if (res.data.disposable) {
+            setError("Disposable email addresses are not allowed");
+            return;
+          }
+          if (res.data.exists) {
+            setError("An account already exists with this email");
+            return;
+          }
+        } catch (err) {
+          setError("Email check failed");
+          return;
+        }
+      }
+      setStep((s) => Math.min(3, s + 1));
+    })();
+  };
+
+  const handleBack = (e) => {
+    if (e) e.preventDefault();
+    setError(null);
+    setStep((s) => Math.max(1, s - 1));
+  };
+
+  const handleSubmit = async (e) => {
+    if (e) e.preventDefault();
+    const err = validateStep();
+    if (err) return setError(err);
+    setLoading(true);
+    setError(null);
+    try {
+      const payload = {
+        email,
+        password,
+        name,
+        accountType,
+        companyName: accountType === "business" ? companyName : undefined,
+      };
+      const res = await auth.signup(payload);
+      if (!res || !res.ok) {
+        setError(
+          (res && res.data && (res.data.error || res.data.message)) ||
+            "Registration failed"
+        );
+        setLoading(false);
+        return;
+      }
+
+      try {
+        localStorage.setItem("auth-event", String(Date.now()));
+      } catch (e) {}
+      window.dispatchEvent(new Event("auth-changed"));
+      navigate("/");
+    } catch (err) {
+      setError("Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="page auth-page signup-page">
+      <h2>Sign up</h2>
+      {error && <div className="auth-error">{error}</div>}
+      <form
+        className="auth-form"
+        onSubmit={step === 3 ? handleSubmit : handleNext}>
+        {step === 1 && (
+          <>
+            <label>
+              Email Address (required)
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={loading}
+              />
+            </label>
+            {/* Work/personal choice removed — backend tracks only personal emails */}
+            <label>
+              Password (required, min 8 characters)
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={loading}
+              />
+            </label>
+            <div className="form-actions">
+              <button type="button" onClick={handleNext} disabled={loading}>
+                Next
+              </button>
+            </div>
+          </>
+        )}
+
+        {step === 2 && (
+          <>
+            <label>
+              Full Name (required)
+              <input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={loading}
+              />
+            </label>
+            <div className="form-actions">
+              <button type="button" onClick={handleBack} disabled={loading}>
+                Back
+              </button>
+              <button type="button" onClick={handleNext} disabled={loading}>
+                Next
+              </button>
+            </div>
+          </>
+        )}
+
+        {step === 3 && (
+          <>
+            <label>
+              Account Type (required)
+              <div>
+                <label>
+                  <input
+                    type="radio"
+                    name="accountType"
+                    value="personal"
+                    checked={accountType === "personal"}
+                    onChange={() => setAccountType("personal")}
+                    disabled={loading}
+                  />
+                  Personal / Creator
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    name="accountType"
+                    value="business"
+                    checked={accountType === "business"}
+                    onChange={() => setAccountType("business")}
+                    disabled={loading}
+                  />
+                  Business / Brand / Company
+                </label>
+              </div>
+            </label>
+            {accountType === "business" && (
+              <label>
+                Brand / Company Name (required for business)
+                <input
+                  value={companyName}
+                  onChange={(e) => setCompanyName(e.target.value)}
+                  disabled={loading}
+                />
+              </label>
+            )}
+
+            {error && <div className="auth-error">{error}</div>}
+
+            <div className="form-actions">
+              <button type="button" onClick={handleBack} disabled={loading}>
+                Back
+              </button>
+              <button type="submit" disabled={loading}>
+                {loading ? "Signing up..." : "Sign up"}
+              </button>
+            </div>
+          </>
+        )}
+      </form>
+    </div>
+  );
+}
+
+export default Signup;

package/src/Routes/ARoutes.js

@@ -1,24 +1,65 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useContext } from "react";
 import { Route, Routes } from "react-router";
 import routes from "../ARoutes/AFRoutes.js";
-import LoadingFallback from "../LoadingFallback.js";
+import RequireAuth from "../Components/RequireAuth.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
+import Header from "../Components/Header/Header.js";
+import Footer from "../Components/Footer/Footer.js";
+import LoadingContext from "../Utils/LoadingContext.js";
 
 
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    {children}
+    <Footer />
+  </>
+);
+
 const ARoutes = ({ context }) => {
+  const { setLoading } = useContext(LoadingContext);
   return (
-    <Suspense fallback={<LoadingFallback />}>
       <Routes>
         {/* Pages Routes */}
-        {routes.map(({ path, element: Element }, index) => (
+        {routes.map(({ path, element: Element, withHeaderFooter, protected: isProtected }, index) => (
           <Route
             key={index}
             path={path}
-            element={<Element context={context} />}
+            element={
+              withHeaderFooter ? (
+                <Layout>
+                  <Suspense
+                    fallback={<LoadingIndicator />}
+                    onPromiseStart={() => setLoading(true)}
+                    onPromiseEnd={() => setLoading(false)}>
+                    {isProtected ? (
+                      <RequireAuth>
+                        <Element context={context} />
+                      </RequireAuth>
+                    ) : (
+                      <Element context={context} />
+                    )}
+                  </Suspense>
+                </Layout>
+              ) : (
+                <Suspense
+                  fallback={<LoadingIndicator />}
+                  onPromiseStart={() => setLoading(true)}
+                  onPromiseEnd={() => setLoading(false)}>
+                  {isProtected ? (
+                    <RequireAuth>
+                      <Element context={context} />
+                    </RequireAuth>
+                  ) : (
+                    <Element context={context} />
+                  )}
+                </Suspense>
+              )
+            }
           />
         ))}
         {/* Pages Routes */}
       </Routes>
-    </Suspense>
   );
 };
 

package/src/Routes/ARoutesStatic.js

@@ -0,0 +1,83 @@
+/*
+ * File Name:  ARoutesStatic.js
+ *
+ * Description:  This file handles the logic for Handling Header and Footer to be visible or not for the every specific page for single page application (Static Page).
+ *
+ *
+ * Author:  Mark Sea.
+ *
+ * Created:  14/Dec/2024
+ *
+ * Dependencies:  {react-router}
+ *
+ * Assumptions:  This file is used in appStatic.js
+ */
+
+import React, { Suspense, useContext } from "react";
+import { Route, Routes } from "react-router";
+import routes from "../ARoutes/AFRoutes.js";
+import RequireAuth from "../Components/RequireAuth.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
+import Header from "../Components/Header/Header.js";
+import Footer from "../Components/Footer/Footer.js";
+import LoadingContext from "../Utils/LoadingContext.js";
+
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    {children}
+    <Footer />
+  </>
+);
+
+const ARoutesStatic = ({ context }) => {
+  const { setLoading } = useContext(LoadingContext);
+  return (
+    <Routes>
+      {routes.map(
+        (
+          { path, element: Element, withHeaderFooter, protected: isProtected },
+          index
+        ) => (
+          <Route
+            key={index}
+            path={path}
+            element={
+              withHeaderFooter ? (
+                <Layout>
+                  <Suspense
+                    fallback={<LoadingIndicator />}
+                    onPromiseStart={() => setLoading(true)}
+                    onPromiseEnd={() => setLoading(false)}>
+                    {isProtected ? (
+                      <RequireAuth>
+                        <Element context={context} />
+                      </RequireAuth>
+                    ) : (
+                      <Element context={context} />
+                    )}
+                  </Suspense>
+                </Layout>
+              ) : (
+                <Suspense
+                  fallback={<LoadingIndicator />}
+                  onPromiseStart={() => setLoading(true)}
+                  onPromiseEnd={() => setLoading(false)}>
+                  {isProtected ? (
+                    <RequireAuth>
+                      <Element context={context} />
+                    </RequireAuth>
+                  ) : (
+                    <Element context={context} />
+                  )}
+                </Suspense>
+              )
+            }
+          />
+        )
+      )}
+    </Routes>
+  );
+};
+
+export default ARoutesStatic;

package/src/Static/appStatic.js

@@ -1,26 +1,16 @@
-import React, { Suspense } from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router";
-import routes from "../ARoutes/AFRoutes.js";
-import LoadingFallback from "../LoadingFallback.js";
+import React, { useState } from "react";
+import ARoutesStatic from "../Routes/ARoutesStatic.js";
+import LoadingContext from "../Utils/LoadingContext.js";
+import LoadingIndicator from "../Components/Loading/LoadingIndicator.js";
 
-import Header from "../Components/Header/Header.js";
-import Footer from "../Components/Footer/Footer.js";
 
-function appStatic() {
+function appStatic({ context }) {
+  const [loading, setLoading] = useState(false);
   return (
-    <Router>
-      <Suspense fallback={<LoadingFallback />}>
-        <Header />
-        <Routes>
-          {/* Pages Routes */}
-          {routes.map(({ path, element: Element }, index) => (
-            <Route key={index} path={path} element={<Element />} />
-          ))}
-          {/* Pages Routes */}
-        </Routes>
-        <Footer />
-      </Suspense>
-    </Router>
+    <LoadingContext.Provider value={{ loading, setLoading }}>
+      {loading && <LoadingIndicator />}
+      <ARoutesStatic context={context} />
+    </LoadingContext.Provider>
   );
 }
 export default appStatic;

package/src/Static/indexStatic.js

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router";
 import App from "./appStatic";
 
 const asggen = ReactDOM.createRoot(document.getElementById("asggen"));
 asggen.render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

package/src/Utils/LoadingContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const LoadingContext = createContext();
+
+export default LoadingContext;

package/src/index.js

@@ -12,18 +12,14 @@ if (process.env.NODE_ENV === "production") {
   // Use `hydrateRoot` for production
   hydrateRoot(
     container,
-    <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
-    </React.StrictMode>
   );
 } else {
   root.render(
-    <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
-    </React.StrictMode>
   );
 }

package/webpack.build-prod.js

@@ -13,6 +13,7 @@ module.exports = {
   output: {
     filename: "static/js/[name]-[contenthash].js",
     path: path.resolve(__dirname, "build-prod-static"),
+    publicPath: "/",
     clean: true,
   },
   module: {
@@ -39,6 +40,7 @@ module.exports = {
               modules: {
                 localIdentName: "asggen-[hash:base64:7]",
               },
+              sourceMap: true,
             },
           },
         ],
@@ -70,6 +72,9 @@ module.exports = {
     minimizer: [
       new TerserWebpackPlugin({
         terserOptions: {
+          compress: {
+            drop_console: false,
+          },
           format: {
             comments: false, // Remove all comments
           },
@@ -85,6 +90,12 @@ module.exports = {
       template: "./dev/index.html",
       buildTag: `prod-[contenthash]`,
       hash: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        minifyCSS: true,
+        minifyJS: true,
+      },
       templateParameters: (compilation, options) => {
         const hash = crypto.createHash("sha1");
         hash.update(compilation.hash);
@@ -110,6 +121,8 @@ module.exports = {
         { from: "dev/manifest.json", to: "manifest.json" }, // Copy manifest
         { from: "dev/style.css", to: "style.css" },
         { from: "dev/robots.txt", to: "robots.txt" },
+        { from: "dev/service-worker.js", to: "service-worker.js" },
+        { from: "dev/offline.html", to: "offline.html" },
       ],
     }),
   ],

package/webpack.dev.js

@@ -3,10 +3,12 @@ const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserWebpackPlugin = require("terser-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const crypto = require("crypto");
 
 module.exports = {
   mode: "development",
   entry: "./src/index.js",
+  devtool: "cheap-module-source-map",
   devServer: {
     static: {
       directory: path.join(__dirname, "dev"),
@@ -18,6 +20,7 @@ module.exports = {
   output: {
     filename: "[name].bundle.js",
     path: `${__dirname}/dev`,
+    publicPath: "/",
     clean: true,
   },
   module: {
@@ -89,6 +92,21 @@ module.exports = {
     new htmlWebpackPlugin({
       title: "AFront",
       template: `${__dirname}/dev/index.html`,
+      filename: "index.html",
+      hash: true, // This will add the hash in the injected scripts
+      templateParameters: (compilation) => {
+        const hash = crypto.createHash("sha1");
+        hash.update(compilation.hash);
+        const sha1Hash = hash.digest("hex");
+        return {
+          htmlWebpackPlugin: {
+            options: {
+              title: "AFront",
+              buildTag: `dev-${sha1Hash}`, // Set the build tag with the hash for dev
+            },
+          },
+        };
+      },
     }),
   ],
 };

package/webpack.prod.js

@@ -12,6 +12,7 @@ module.exports = {
   output: {
     filename: "static/js/[name]-[contenthash].js",
     path: path.resolve(__dirname, "build-prod"),
+    publicPath: "/",
     clean: true,
   },
   module: {
@@ -72,6 +73,9 @@ module.exports = {
     minimizer: [
       new TerserWebpackPlugin({
         terserOptions: {
+          compress: {
+            drop_console: false,
+          },
           format: {
             comments: false,
           },
@@ -80,6 +84,9 @@ module.exports = {
       }),
       new CssMinimizerPlugin(),
     ],
+    splitChunks: {
+      chunks: "all", // Automatically split vendor and app code
+    },
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -90,6 +97,8 @@ module.exports = {
       minify: {
         removeComments: true,
         collapseWhitespace: true,
+        minifyCSS: true,
+        minifyJS: true,
       },
       templateParameters: (compilation) => {
         const hash = crypto.createHash("sha1");
@@ -116,12 +125,12 @@ module.exports = {
         { from: "dev/manifest.json", to: "manifest.json" },
         { from: "dev/style.css", to: "style.css" },
         { from: "dev/robots.txt", to: "robots.txt" },
+        { from: "dev/service-worker.js", to: "service-worker.js" },
+        { from: "dev/offline.html", to: "offline.html" },
       ],
     }),
   ],
   performance: {
     hints: "warning",
-    maxEntrypointSize: 400000,
-    maxAssetSize: 400000,
   },
 };

package/webpack.ssr.prod.js

@@ -10,6 +10,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "build-prod-ssr"),
     filename: "ssr.prod.js",
+    publicPath: "/",
     clean: true,
     libraryTarget: "commonjs2",
   },
@@ -72,6 +73,9 @@ module.exports = {
     minimizer: [
       new TerserWebpackPlugin({
         terserOptions: {
+          compress: {
+            drop_console: false,
+          },
           format: {
             comments: false,
           },

package/build-prod/static/css/main-7f7c4e72ce002df48179.css

@@ -1 +0,0 @@
-@import url(https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap);.asggen-khZCOtF{align-items:center;display:flex;height:100vh;justify-content:center}.asggen-DnF_4DH{height:auto;width:150px}:root{--light:#fff;--dark:#000;--color-white-100:#fff;--color-white-200:#e4e6e7;--color-white-300:#c9cccf;--color-white-400:#a1a6aa;--color-white-500:#798086;--color-black-100:#14191f;--color-black-200:#101419;--color-black-300:#0c0f13;--color-black-400:#0c0f13;--color-black-500:#080a0c;--color-black-600:#060709;--color-black-700:#040506;--color-black-800:#020303;--color-blue-100:#dcebfe;--color-blue-200:#bedbfe;--color-blue-300:#91c3fd;--color-blue-400:#61a6fa;--color-blue-500:#3c83f6;--color-blue-600:#2463eb;--color-blue-700:#1d4fd7;--color-blue-800:#1e3fae;--color-blue-900:#1e3b8a;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 16px 32px -16px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.1);--base__color-2__rgb:32,32,32;--shadow-small:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);--shadow-medium:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-large:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}*,:after,:before{box-sizing:border-box;list-style:none;list-style-type:none;margin:0;padding:0;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html{box-sizing:inherit;font-size:100%;scroll-behavior:smooth}body,html{height:-webkit-fill-available}body{font-family:Rubik,sans-serif;font-size:clamp(1rem,2vw,1.125rem);font-weight:400;line-height:1.5;min-width:320px}main{overflow:hidden}a,button{background:none;border:none;box-shadow:none;cursor:pointer;outline:none;text-decoration:none;user-select:none}a{color:var(--color-black-400)}img,video{display:block;height:auto;max-width:100%;object-fit:cover}.asggen-vCnhqcW{margin:0 auto;padding:6rem 0 8rem}.asggen-yYmSvug{height:auto;margin:0 auto;max-width:75rem}.asggen-k7ux6uU{margin-bottom:1rem;text-align:center;vertical-align:middle}.asggen-GSXjAs2{font-size:clamp(2.648rem,6vw,4.241rem)}.asggen-GSXjAs2,.asggen-I9IojjR{font-family:inherit;font-weight:700;letter-spacing:-1px;line-height:1.15}.asggen-I9IojjR{font-size:clamp(2.179rem,5vw,3.176rem)}.asggen-FDKWcrI{font-family:inherit;font-size:clamp(1.794rem,4vw,2.379rem);font-weight:700;letter-spacing:-1px;line-height:1.25}.asggen-SbGaSDq{font-size:clamp(1.476rem,3vw,1.782rem);font-weight:600}.asggen-SbGaSDq,.asggen-kc5w7ZM{font-family:inherit;line-height:1.5}.asggen-kc5w7ZM{font-size:clamp(1.215rem,2vw,1.335rem);font-weight:500}.asggen-ypntYRK{font-family:inherit;font-size:clamp(1rem,2vw,1.125rem);text-wrap:balance}.asggen-XT_r9I4{border:none;border-radius:.75rem;display:inline-block;font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5;outline:none;text-align:center;text-transform:unset;user-select:none;vertical-align:middle;white-space:nowrap}.asggen-ik053am{align-items:center;column-gap:.5rem;display:inline-flex;justify-content:center}.asggen-e3fixws.asggen-YFITMpr{align-items:center;background-color:var(--color-black-200);border-bottom:none;display:flex;height:2.7rem;justify-content:center;line-height:0;margin-left:0;padding:.75rem 2rem}.asggen-bremE3g{fill:#fff;height:1rem;margin-left:1rem}.asggen-e3fixws.asggen-YFITMpr:hover{border-bottom:2px solid var(--color-blue-600)}.asggen-iNmPF4j{background-color:var(--color-white-100);box-shadow:var(--shadow-medium);color:var(--color-black-500);padding:.75rem 2rem}.asggen-FaJ4Ou8{height:auto;left:0;margin:0 auto;position:fixed;top:0;transition:all .3s ease;width:100%;z-index:100}.asggen-FaJ4Ou8.asggen-zfxwI26{background:var(--light);background-color:rgba(var(--light),.2);box-shadow:var(--shadow-medium)}.asggen-FaJ4Ou8.asggen-zfxwI26,.asggen-QfNYU76{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-blue-800)}.asggen-QfNYU76{background-color:rgba(#ffffff,.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.asggen-b2RQ1kV{align-items:center;column-gap:1.25rem;display:flex;flex-direction:row;height:4.25rem;justify-content:flex-start;margin:0 auto;width:100%}.asggen-EVWqcuk{font-family:inherit;font-size:1.6rem;font-weight:600;letter-spacing:-1px;line-height:1.5;margin-bottom:0}.asggen-b2RQ1kV.asggen-yYmSvug{margin-bottom:0;padding:0 1.25rem}.asggen-b2RQ1kV.asggen-yYmSvug a:hover{border-bottom:2px solid var(--color-black-800)}.asggen-DIqmOCa.asggen-uIPgGK7{padding:.5rem 1.5rem}.asggen-DIqmOCa.asggen-uIPgGK7:hover{background-color:rgba(35,39,47,.05);border-bottom:none!important;border-radius:3rem}.asggen-F6t44Vy{background-color:var(--light);box-shadow:var(--shadow-medium);height:auto;left:0;position:fixed;top:-100%;width:100%}.asggen-F6t44Vy.asggen-E8o0IXn{border-top:1px solid var(--color-blue-800);height:100vh;top:68px;width:100%}.asggen-F6t44Vy.asggen-E8o0IXn .asggen-yMiHRly{border-bottom:.75px solid #000;gap:.2rem;padding:1rem}.asggen-F6t44Vy.asggen-hcpN3fG{opacity:0;transition:opacity .4s ease-in-out;visibility:hidden}.asggen-yMiHRly{display:flex;justify-content:space-around;overflow-x:auto;row-gap:1.25rem;-ms-overflow-style:none;scrollbar-width:none}.asggen-yMiHRly::-webkit-scrollbar{display:none}.asggen-DIqmOCa{font-size:1rem;line-height:1.5;text-transform:uppercase}.asggen-DIqmOCa,.asggen-YFITMpr{font-family:inherit;font-weight:500;margin-bottom:0}.asggen-YFITMpr{background-color:var(--color-blue-600);border-radius:.75rem;box-shadow:var(--shadow-medium);color:var(--light);display:inline-block;font-size:.875rem;line-height:1.25;margin-left:auto;padding:.65rem 1.5rem;text-align:center;text-transform:capitalize;user-select:none;white-space:nowrap}@media only screen and (min-width:48rem){.asggen-F6t44Vy{background:none;box-shadow:none;height:auto;margin-left:auto;padding:0;position:relative;top:0;transition:none;width:auto}.asggen-F6t44Vy.asggen-hcpN3fG{opacity:1;transition:opacity .4s ease-in-out;visibility:visible}.asggen-yMiHRly{column-gap:2rem;display:flex;flex-direction:row;margin:0 auto}.asggen-DIqmOCa{text-transform:capitalize}.asggen-YFITMpr{margin-left:2rem}}.asggen-LsM7ZjZ{background:none;border:none;cursor:pointer;display:block;height:1.15rem;order:-1;outline:none;position:relative;transform:rotate(0deg);transition:.35s ease;user-select:none;visibility:visible;width:1.6rem;z-index:10}@media only screen and (min-width:48rem){.asggen-LsM7ZjZ{display:none;visibility:hidden}}.asggen-_Tz4jNZ{background-color:var(--color-black-800);border:none;border-radius:1rem;display:block;height:2px;left:0;opacity:1;outline:none;position:absolute;transform:rotate(0deg);transition:.25s ease-in-out;width:100%}.asggen-_Tz4jNZ:first-child{top:0}.asggen-_Tz4jNZ:nth-child(2){top:.5rem;width:70%}.asggen-_Tz4jNZ:nth-child(3){top:1rem}.asggen-LsM7ZjZ.asggen-E8o0IXn .asggen-_Tz4jNZ:first-child{top:.5rem;transform:rotate(135deg)}.asggen-LsM7ZjZ.asggen-E8o0IXn .asggen-_Tz4jNZ:nth-child(2){opacity:0;visibility:hidden}.asggen-LsM7ZjZ.asggen-E8o0IXn .asggen-_Tz4jNZ:nth-child(3){top:.5rem;transform:rotate(-135deg)}.asggen-Y2cbpWB{align-items:center;display:grid;padding:0 1rem;position:relative;row-gap:3rem}@media only screen and (min-width:48rem){.asggen-Y2cbpWB{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}}@media only screen and (min-width:64rem){.asggen-Y2cbpWB{column-gap:4rem;grid-template-columns:1fr max-content;margin-top:3rem}}@keyframes asggen-tnBiLe1{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.asggen-lxgipYD{display:block;height:18rem;justify-self:center;margin-top:2rem;max-width:18rem;object-fit:cover}@media only screen and (min-width:48rem){.asggen-lxgipYD{height:20rem;max-width:20rem;order:1}}@media only screen and (min-width:64rem){.asggen-lxgipYD{height:25rem;margin-right:1rem;max-width:25rem}}.asggen-Dz7DCBs{align-items:flex-start;display:flex;flex-direction:column;row-gap:1.75rem}.asggen-vOcQaWi{background-color:#fff;color:#333;overflow:hidden;padding:2.5rem 0;position:relative}.asggen-vOcQaWi:before{color:rgba(0,0,0,.05);content:"AFront";font-size:20rem;left:50%;pointer-events:none;position:absolute;top:70%;transform:translate(-50%,-50%);white-space:nowrap;z-index:0}.asggen-Kou5AQf{align-items:flex-start;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:75rem;padding:0 1.25rem;position:relative;z-index:1}.asggen-qKHdMcH{flex:1;margin-bottom:2rem}.asggen-slMjjDc{color:var(--color-black-400);font-size:1.5rem;font-weight:700;text-decoration:none}.asggen-cazhRP1{color:#8b8b8b;font-size:.875rem;margin-top:.625rem}.asggen-a78uDCQ{display:flex;flex:2;flex-wrap:wrap;justify-content:space-between}.asggen-_UtUx79{flex:1;margin-bottom:2rem;min-width:12rem}.asggen-N07cS94{color:#777;font-size:1rem;margin-bottom:.625rem}.asggen-vfO0fUG{list-style:none;padding:0}.asggen-iRs41ng{color:#909090;display:block;font-size:.875rem;margin-bottom:.5rem;text-decoration:none;transition:color .3s ease}.asggen-iRs41ng:hover{color:#3a3a3a}.asggen-w3fUm2Q{color:#777;font-size:.875rem;margin-top:2.5rem;text-align:center}.asggen-FTFjC4T{margin-bottom:.625rem}.asggen-HczpTuP{display:flex;flex-wrap:wrap;justify-content:center}.asggen-rUwKNuA{color:#909090;font-size:1.125rem;margin:0 .625rem;text-decoration:none;transition:color .3s ease}.asggen-rUwKNuA:hover{color:#3a3a3a}@media (max-width:768px){.asggen-Kou5AQf,.asggen-a78uDCQ{align-items:center;flex-direction:column}.asggen-a78uDCQ{text-align:center}.asggen-_UtUx79{margin-bottom:1.5rem}.asggen-FTFjC4T{font-size:.75rem}.asggen-HczpTuP{margin-top:1rem}.asggen-rUwKNuA{font-size:1rem;margin:0 .5rem}.asggen-vOcQaWi:before{content:"AFront";font-size:5rem;top:82%}}

package/build-prod/static/js/3-985f8801e97b3b2025e2.js

@@ -1 +0,0 @@
-(self.webpackChunkafront=self.webpackChunkafront||[]).push([[3],{572:(e,t,a)=>{const{useEffect:n}=a(540);function s(e,t){if(t){let a=document.querySelector(`meta[name="${e}"]`);a?a.setAttribute("content",t):(a=document.createElement("meta"),a.setAttribute("name",e),a.setAttribute("content",t),document.head.appendChild(a))}}e.exports=function({title:e,description:t,keywords:a,context:r}){n((()=>{"undefined"!=typeof document&&(document.title=e,s("title",e),s("description",t),s("keywords",a))}),[e,t,a]),r&&(r.title=e,r.description=t,r.keywords=a)}},210:(e,t,a)=>{"use strict";a.d(t,{A:()=>r});var n=a(540),s="asggen-UsaK2zv";const r=function(e){var t=e.children;return n.createElement("div",{className:"asggen-y0_CWMe"},n.createElement("div",{className:"asggen-wv3xAF6"},n.createElement("div",{className:"".concat(s," ").concat("asggen-F7uI_Qg")}),n.createElement("div",{className:"".concat(s," ").concat("asggen-HPCM5Cq")}),n.createElement("div",{className:"".concat(s," ").concat("asggen-oGWLGVI")}),n.createElement("div",{className:"".concat(s," ").concat("asggen-hpj3_CH")})),t)}},3:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>m});var n=a(540),s=a(572),r=a.n(s),c="asggen-fs7zTHj",o="asggen-kTCHPjF",l="asggen-ZHWXW17",i=a(210);const m=function(e){var t=e.context;return r()({title:"Support - AFront",description:"Get support for AFront, a front-end JavaScript library for seamless server-side rendering.",keywords:"support, AFront, server-side rendering, JavaScript",context:t}),n.createElement(i.A,null,n.createElement("div",{className:"asggen-kJBmVCe"},n.createElement("h1",{className:"asggen-xhjDCMD"},"Need Assistance?"),n.createElement("p",{className:"asggen-RwTbVGb"},"AFront is a cutting-edge front-end JavaScript library designed for seamless server-side rendering (SSR). We're committed to providing you with top-notch support to ensure your experience is smooth and productive."),n.createElement("div",{className:"asggen-_9xGCTU"},n.createElement("div",{className:c},n.createElement("h2",{className:l},"Technical Assistance"),n.createElement("p",{className:o},"Our dedicated technical support team is available around the clock to resolve any issues you may face with AFront. Connect with us through email or our support portal for prompt assistance.")),n.createElement("div",{className:c},n.createElement("h2",{className:l},"Product Information"),n.createElement("p",{className:o},"Curious about AFront’s capabilities? Reach out to our sales team for detailed insights on features, benefits, and how our library can enhance your web development projects.")),n.createElement("div",{className:c},n.createElement("h2",{className:l},"Community and Forums"),n.createElement("p",{className:o},"Join our vibrant community forums to discuss AFront with fellow developers, exchange tips, and troubleshoot common issues collaboratively."))),n.createElement("div",{className:"asggen-pmghQyO"},n.createElement("h2",{className:l},"Frequently Asked Questions"),n.createElement("ul",{className:"asggen-F8poZey"},n.createElement("li",null,"What is AFront and how does it work?"),n.createElement("li",null,"How do I get started with AFront?"),n.createElement("li",null,"Where can I find documentation and tutorials?"),n.createElement("li",null,"How can I report a bug or request a feature?"))),n.createElement("a",{href:"/",className:"asggen-cwDmzqU"},"Back to Homepage")))}}}]);

package/build-prod/static/js/41-a66fae84fd39cfb1e349.js

@@ -1 +0,0 @@
-(self.webpackChunkafront=self.webpackChunkafront||[]).push([[41],{572:(e,t,n)=>{const{useEffect:a}=n(540);function c(e,t){if(t){let n=document.querySelector(`meta[name="${e}"]`);n?n.setAttribute("content",t):(n=document.createElement("meta"),n.setAttribute("name",e),n.setAttribute("content",t),document.head.appendChild(n))}}e.exports=function({title:e,description:t,keywords:n,context:s}){a((()=>{"undefined"!=typeof document&&(document.title=e,c("title",e),c("description",t),c("keywords",n))}),[e,t,n]),s&&(s.title=e,s.description=t,s.keywords=n)}},210:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var a=n(540),c="asggen-UsaK2zv";const s=function(e){var t=e.children;return a.createElement("div",{className:"asggen-y0_CWMe"},a.createElement("div",{className:"asggen-wv3xAF6"},a.createElement("div",{className:"".concat(c," ").concat("asggen-F7uI_Qg")}),a.createElement("div",{className:"".concat(c," ").concat("asggen-HPCM5Cq")}),a.createElement("div",{className:"".concat(c," ").concat("asggen-oGWLGVI")}),a.createElement("div",{className:"".concat(c," ").concat("asggen-hpj3_CH")})),t)}},488:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});var a=n(540),c=n(210);const s=n.p+"static/media/52f06bb716d4ecad087a.png",r=n.p+"static/media/adeaead125c45715106d.svg";var l=n(572),o=n.n(l),m=n(833);const i=function(e){var t=e.context;return o()({title:"AFront by Asggen Inc.",description:"Home for all AFront products and services.",keywords:"Home, Afront, help",context:t}),a.createElement(c.A,null,a.createElement("main",null,a.createElement("section",{className:m.uW},a.createElement("div",{className:"".concat(m.kL," ").concat(m.vd)},a.createElement("img",{className:m._e,src:s,alt:"banner"}),a.createElement("div",{className:m.B4},a.createElement("h1",{className:m.nX},"Empower Your Front-End with AFront"),a.createElement("p",{className:m.FY},"AFront streamlines front-end development with robust tools and",a.createElement("b",null," seamless server-side rendering (SSSR)"),". Build dynamic, high-performance web experiences effortlessly."),a.createElement("div",null,a.createElement("a",{href:"/",className:"".concat(m.OK," ").concat(m.DG)},"Get Started"," ",a.createElement("img",{className:m.h_,src:r}))))))))}}}]);

package/build-prod/static/js/573-f7791eb491c75b0ccfb7.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkafront=self.webpackChunkafront||[]).push([[573],{573:(e,a,s)=>{s.r(a),s.d(a,{default:()=>n});var t=s(540);const n=function(){return t.createElement("div",{className:"asggen-CTEvvlo"},t.createElement("h2",{className:"asggen-FVOWslk"},"Oops! The page you're looking for doesn't exist."),t.createElement("p",{className:"asggen-Bk8OzYB"},"It seems you’ve taken a wrong turn. Let’s get you back on track!"),t.createElement("a",{href:"/",className:"asggen-wbWn6vo"},"Go to Homepage"))}}}]);