@alphasquad/saleor-template-advance 0.1.0

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M11.048 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.89a1 1 0 00-.364 1.118l1.518 4.674c.3.922-.755 1.688-1.54 1.118l-3.976-2.89a1 1 0 00-1.176 0l-3.976 2.89c-.784.57-1.838-.196-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118l-3.976-2.89c-.783-.57-.38-1.81.588-1.81h4.915a1 1 0 00.95-.69l1.518-4.674z"/>
+</svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/scripts/seo-audit/generate-checklist.mjs

@@ -0,0 +1,156 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const repoRoot = path.resolve(import.meta.dirname, "../..");
+const auditPath = path.join(repoRoot, "docs", "SEO-Audit-Critical.md");
+const outPath = path.join(repoRoot, "SEO_AUDIT_CHECKLIST_STATUS.md");
+
+const input = fs.readFileSync(auditPath, "utf8");
+
+/**
+ * Status legend:
+ * ✅ Pass, ❌ Fail, ⚠️ Partial, ⏭️ N/A (or requires external tooling/deployment), ⬜ Not tested yet
+ */
+const statusOverrides = {
+  // Crawlability & indexation
+  "C-001": { status: "✅", notes: "robots.txt route exists at /robots.txt" },
+  "C-002": { status: "⚠️", notes: "Localhost blocks crawling; production should allow." },
+  "C-003": { status: "✅", notes: "robots references /sitemap.xml" },
+  "C-005": { status: "✅", notes: "Non-prod (localhost) blocks crawling." },
+
+  "C-008": { status: "✅", notes: "Sitemap served at /sitemap.xml" },
+  "C-009": { status: "✅", notes: "Valid XML output from Next metadata route" },
+  "C-010": { status: "⚠️", notes: "Includes key indexable routes; dynamic coverage depends on API data." },
+  "C-011": { status: "✅", notes: "Noindex routes excluded (cart/checkout/auth/account/search/etc)." },
+  "C-012": { status: "✅", notes: "Redirects dropped by template requirement." },
+  "C-013": { status: "⚠️", notes: "Dynamic URLs can go stale if upstream slugs change." },
+  "C-014": { status: "✅", notes: "Sitemap loc uses NEXT_PUBLIC_SITE_URL" },
+  "C-019": { status: "✅", notes: "Products included via dynamic sitemap." },
+  "C-020": { status: "✅", notes: "Categories included via dynamic sitemap." },
+  "C-021": { status: "✅", notes: "Blog/content pages included via dynamic sitemap." },
+  "C-022": { status: "✅", notes: "Transactional pages excluded." },
+  "C-023": { status: "✅", notes: "Auth pages excluded." },
+  "C-024": { status: "✅", notes: "Account pages excluded." },
+
+  "C-026": { status: "✅", notes: "Cart noindex/nofollow via metadata." },
+  "C-027": { status: "✅", notes: "Checkout noindex/nofollow via metadata." },
+  "C-028": { status: "✅", notes: "Account subtree noindex/nofollow." },
+  "C-029": { status: "✅", notes: "Order confirmation noindex/nofollow." },
+  "C-030": { status: "✅", notes: "Search results default noindex/nofollow." },
+  "C-034": { status: "✅", notes: "Payment callback/success pages noindex/nofollow." },
+
+  "C-025": { status: "✅", notes: "Indexable pages default to index,follow." },
+  "C-038": { status: "✅", notes: "metadataBase configured in root layout." },
+
+  "C-035": { status: "⚠️", notes: "Canonicals added on major indexable routes; verify full coverage as routes evolve." },
+  "C-036": { status: "⚠️", notes: "Generally self-referencing; validate on edge-case templates." },
+  "C-037": { status: "✅", notes: "Canonicals render as absolute URLs via metadataBase." },
+
+  // Redirects (template requirement)
+  "C-046": { status: "⏭️", notes: "Redirects intentionally removed from template." },
+  "C-047": { status: "⏭️", notes: "Redirects intentionally removed from template." },
+  "C-048": { status: "⏭️", notes: "Redirects intentionally removed from template." },
+  "C-049": { status: "⏭️", notes: "Redirects intentionally removed from template." },
+  "C-050": { status: "⏭️", notes: "Handled at hosting (Vercel) / deployment layer." },
+  "C-051": { status: "⏭️", notes: "Handled at hosting (Vercel) / deployment layer." },
+
+  // Status codes
+  "T-009": { status: "✅", notes: "Dynamic routes call notFound() for invalid slugs." },
+  "T-010": { status: "✅", notes: "Custom app/not-found.tsx present." },
+  "T-012": { status: "✅", notes: "Soft-404s fixed for key dynamic routes." },
+  "T-001": { status: "⚠️", notes: "Key pages include SSR fallbacks; interactive/catalog content still enhanced client-side." },
+  "T-002": { status: "⚠️", notes: "Key catalog + PDP pages include visible SSR content without JS." },
+  "T-003": { status: "⚠️", notes: "Reduced client-only SEO content by adding SSR fallbacks and server-side schema." },
+  "T-027": { status: "⚠️", notes: "Removed explicit force-dynamic on key pages; some routes remain dynamic due to searchParams/fetch." },
+
+  // On-page SEO
+  "O-007": { status: "✅", notes: "PDP title uses product name via generateMetadata." },
+  "O-008": { status: "✅", notes: "Category titles include category name." },
+  "O-010": { status: "✅", notes: "generateMetadata used for key dynamic routes." },
+  "O-019": { status: "⚠️", notes: "One H1 on key audited pages; continue spot checks across all routes." },
+
+  // Structured data
+  "S-001": { status: "✅", notes: "Organization JSON-LD in root layout." },
+  "S-002": { status: "✅", notes: "Organization JSON-LD is site-wide." },
+  "S-003": { status: "✅", notes: "WebSite + SearchAction JSON-LD in root layout." },
+  "S-007": { status: "✅", notes: "Product JSON-LD rendered server-side on PDP." },
+  "S-019": { status: "✅", notes: "Offer nested under Product." },
+  "S-021": { status: "⚠️", notes: "BreadcrumbList present on many key pages; not guaranteed on every route yet." },
+  "S-022": { status: "⚠️", notes: "Breadcrumb URLs validated on major routes; continue spot checks." },
+  "S-024": { status: "⚠️", notes: "Breadcrumb hierarchy matches visible UI on major routes." },
+  "S-027": { status: "✅", notes: "BlogPosting JSON-LD on blog/content posts." },
+  "S-031": { status: "⏭️", notes: "Requires Google Rich Results Test." },
+  "S-032": { status: "⏭️", notes: "Requires Search Console." },
+  "S-034": { status: "✅", notes: "JSON-LD used for schema." },
+
+  // Social
+  "SOC-001": { status: "⚠️", notes: "og:title is present; ensure all routes override defaults when needed." },
+  "SOC-002": { status: "⚠️", notes: "og:description is present; ensure all routes override defaults when needed." },
+  "SOC-003": { status: "✅", notes: "og:image present (defaults + per-page overrides)." },
+  "SOC-004": { status: "⚠️", notes: "og:url present; validate correctness across all routes." },
+
+  "SOC-009": { status: "⚠️", notes: "twitter:card present on major routes." },
+  "SOC-010": { status: "⚠️", notes: "twitter:title present on major routes." },
+  "SOC-011": { status: "⚠️", notes: "twitter:description present on major routes." },
+  "SOC-012": { status: "⚠️", notes: "twitter:image present on major routes." },
+
+  // Mobile
+  "M-002": { status: "✅", notes: "Viewport meta tag present." },
+
+  // Security
+  "SEC-001": { status: "⏭️", notes: "Requires HTTPS deployment." },
+  "SEC-002": { status: "⏭️", notes: "Requires HTTPS deployment." },
+  "SEC-003": { status: "⏭️", notes: "Requires HTTPS deployment + browser checks." },
+  "SEC-004": { status: "⚠️", notes: "HSTS header set in next.config.ts for production only." },
+
+  // Analytics
+  "A-001": { status: "⏭️", notes: "Template leaves GA/Tag Manager to project integration." },
+  "A-006": { status: "⏭️", notes: "Requires Search Console verification." },
+  "A-007": { status: "⏭️", notes: "Requires Search Console submission." },
+};
+
+function isTableRow(line) {
+  return /^\|\s*[A-Z]+-\d+/.test(line);
+}
+
+function parseRow(line) {
+  const parts = line
+    .split("|")
+    .map((s) => s.trim())
+    .filter(Boolean);
+
+  // Expected: [ID, Check, Priority, Status, Notes]
+  const [id, check, priority] = parts;
+  if (!id || !check || !priority) return null;
+  return { id, check, priority };
+}
+
+const rows = [];
+for (const line of input.split("\n")) {
+  if (!isTableRow(line)) continue;
+  if (line.includes("-----")) continue;
+  const row = parseRow(line);
+  if (!row) continue;
+  rows.push(row);
+}
+
+const now = new Date();
+const ymd = now.toISOString().slice(0, 10);
+
+let out = "";
+out += "# SEO Audit Checklist Status (Advance Template)\n\n";
+out += `Generated: ${ymd}\n\n`;
+out += "Legend: ✅ Pass, ❌ Fail, ⚠️ Partial, ⏭️ N/A or requires external tooling/deployment, ⬜ Not tested yet\n\n";
+out += "| ID | Priority | Status | Check | Notes |\n";
+out += "| --- | --- | --- | --- | --- |\n";
+
+for (const r of rows) {
+  const ov = statusOverrides[r.id];
+  const status = ov?.status || "⬜";
+  const notes = ov?.notes || "";
+  const check = r.check.replace(/\s+/g, " ").trim();
+  out += `| ${r.id} | ${r.priority} | ${status} | ${check} | ${notes} |\n`;
+}
+
+fs.writeFileSync(outPath, out, "utf8");
+console.log(`Wrote ${path.relative(repoRoot, outPath)} (${rows.length} checks)`);

package/src/app/(auth)/account/forgot-password/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Forgot Password - ${getStoreName()}`,
+  description: "Reset your password securely. Enter your email address and we'll send you instructions to create a new password.",
+  robots: { index: false, follow: false },
+}
+
+export default function ForgotPasswordLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/(auth)/account/forgot-password/page.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useMutation } from '@apollo/client';
+import { REQUEST_PASSWORD_RESET_MUTATION, type RequestPasswordResetData, type RequestPasswordResetVariables } from '@/graphql/mutations/requestPasswordReset';
+import Input from '@/app/components/reuseableUI/input';
+import PrimaryButton from '@/app/components/reuseableUI/primaryButton';
+import { SpinnerIcon } from '@/app/utils/svgs/spinnerIcon';
+import { ErrorTag } from '@/app/components/reuseableUI/errorTag';
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState<string | null>(null);
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [fieldError, setFieldError] = useState('');
+  const [requestReset, { loading }] = useMutation<RequestPasswordResetData, RequestPasswordResetVariables>(REQUEST_PASSWORD_RESET_MUTATION);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage(null);
+    setApiError(null);
+    setFieldError('');
+
+    if (!email.trim()) {
+      setFieldError('Email is required.');
+      return;
+    } else if (!/^\S+@\S+\.\S+$/.test(email)) {
+      setFieldError('Invalid email address.');
+      return;
+    }
+
+    try {
+      const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || (typeof window !== 'undefined' ? window.location.origin : '');
+      const redirectUrl = `${siteUrl}/account/reset-password`;
+
+      const { data } = await requestReset({
+        variables: { email, redirectUrl },
+      });
+
+      const errs = data?.requestPasswordReset.errors || [];
+      if (errs.length) {
+        setApiError(errs[0]?.message || 'Unable to send reset email.');
+        return;
+      }
+
+      setMessage('If an account exists for this email, a password reset link has been sent. Please check your inbox and spam folder.');
+    } catch (err) {
+      console.error('Request password reset error', err);
+      setApiError('Unable to send reset email. Please try again.');
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-white px-4 md:px-6 py-12 md:py-16 lg:py-24">
+      <div className="flex w-full max-w-[756px] flex-col justify-center items-start gap-6">
+        {/* Title */}
+        <div className="flex flex-col items-start gap-1 md:gap-2 self-stretch">
+          <h1 className="text-lg md:text-xl font-semibold tracking-[-0.05px] uppercase mb-1">
+            FORGOT PASSWORD
+          </h1>
+          <p
+            style={{ color: "var(--color-secondary-600)" }}
+            className="text-sm mb-6"
+          >
+            Please enter the email linked to your account, and we&apos;ll send
+            you a code to reset your password.
+          </p>
+        </div>
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-6 w-full">
+          {/* Email Field */}
+          <div className="w-full">
+            <Input
+              label="EMAIL"
+              type="email"
+              name="email"
+              placeholder="jamescharles@gmail.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1.5 border border-[var(--color-secondary-200)] leading-5"
+              hasError={!!fieldError}
+            />
+            {fieldError && (
+              <div
+                style={{ color: "var(--color-primary-600)" }}
+                className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+              >
+                {fieldError}
+              </div>
+            )}
+            {message && (
+              <div
+                style={{ color: "var(--color-secondary-700)" }}
+                className="mb-2 text-xs md:text-sm mt-2"
+                role="status"
+              >
+                {message}
+              </div>
+            )}
+          </div>
+          {apiError && <ErrorTag message={apiError} />}
+          {/* Buttons */}
+          <div className="flex gap-3">
+            <Link
+              href="/account/login"
+              style={{
+                backgroundColor: "var(--color-secondary-200)",
+                color: "var(--color-secondary-700)",
+              }}
+              className="w-1/2 text-center text-sm lg:text-base py-2.5 md:py-3 px-4 font-semibold uppercase"
+            >
+              Cancel
+            </Link>
+
+            <PrimaryButton
+              type="submit"
+              disabled={loading}
+              content={
+                loading ? (
+                  <span className="flex items-center justify-center w-full">
+                    {SpinnerIcon}
+                  </span>
+                ) : (
+                  "Send Email"
+                )
+              }
+              className="w-1/2 text-sm lg:text-base py-2.5 md:py-3 px-4 font-semibold  "
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/app/(auth)/account/login/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Login - ${getStoreName()}`,
+  description: "Sign in to your account to access order history, saved addresses, and faster checkout. New customers can create an account.",
+  robots: { index: false, follow: false },
+}
+
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/(auth)/account/login/page.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import React, { Suspense, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useGlobalStore } from "@/store/useGlobalStore";
+import { useMutation } from "@apollo/client";
+import {
+  SIGN_IN_MUTATION,
+  type SignInData,
+  type SignInVariables,
+} from "@/graphql/mutations/signIn";
+import client from "@/graphql/client";
+import AccountTabs from "@/app/components/account/AccountTabs";
+import Input from "@/app/components/reuseableUI/input";
+import PrimaryButton from "@/app/components/reuseableUI/primaryButton";
+import { SpinnerIcon } from "@/app/utils/svgs/spinnerIcon";
+import { ErrorTag } from "@/app/components/reuseableUI/errorTag";
+import { useRecaptcha } from "@/hooks/useRecaptcha";
+import ReCAPTCHA from "react-google-recaptcha";
+import { useAppConfiguration } from "@/app/components/providers/ServerAppConfigurationProvider";
+
+function LoginInner() {
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+  });
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState({
+    email: "",
+    password: "",
+    recaptcha: "",
+  });
+  const [recaptchaValue, setRecaptchaValue] = useState<string | null>(null);
+
+  const searchParams = useSearchParams();
+  const sessionExpired = searchParams.get("sessionExpired") === "true";
+
+  const router = useRouter();
+  const { login } = useGlobalStore();
+  const { recaptchaRef, resetRecaptcha } = useRecaptcha();
+  const config = useAppConfiguration();
+  const [signIn, { loading }] = useMutation<SignInData, SignInVariables>(
+    SIGN_IN_MUTATION
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setApiError(null);
+    setFieldErrors({ email: "", password: "", recaptcha: "" });
+    const errors = { email: "", password: "", recaptcha: "" };
+
+    let hasError = false;
+
+    if (!formData.email.trim()) {
+      errors.email = "Email is required.";
+      hasError = true;
+    }
+    if (!formData.password.trim()) {
+      errors.password = "Password is required.";
+      hasError = true;
+    }
+
+    // Only validate reCAPTCHA if enabled for login
+    if (config.isRecaptchaEnabledFor('login') && !recaptchaValue) {
+      errors.recaptcha = "Please complete the reCAPTCHA verification.";
+      hasError = true;
+    }
+
+    if (hasError) {
+      setFieldErrors(errors);
+      return;
+    }
+
+    try {
+      const { data } = await signIn({
+        variables: {
+          email: formData.email,
+          password: formData.password,
+        },
+      });
+
+      const result = data?.tokenCreate;
+      if (!result) {
+        setApiError("Unexpected error. Please try again.");
+        return;
+      }
+
+      if (result.errors && result.errors.length > 0) {
+        // Prefer first error message
+        setApiError(
+          result.errors[0]?.message ||
+            "Seems like your entered Incorrect Email or Password. Please try again."
+        );
+        return;
+      }
+
+      // Save tokens for subsequent requests
+      if (result.token) localStorage.setItem("token", result.token);
+      if (result.refreshToken)
+        localStorage.setItem("refreshToken", result.refreshToken);
+      // Set HttpOnly cookies via API for middleware/SSR
+      try {
+        await fetch("/api/auth/set", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            token: result.token,
+            refreshToken: result.refreshToken,
+          }),
+        });
+      } catch {}
+
+      // Update global user state
+      if (result.user) {
+        const { id, email, firstName, lastName } = result.user;
+        const displayName =
+          [firstName, lastName].filter(Boolean).join(" ") || email;
+        login({ id, email, name: displayName });
+      }
+
+      // IMPORTANT: clear Apollo cache so user-specific queries (e.g., me) don't show stale data
+      try {
+        await client.clearStore();
+      } catch (e) {
+        // non-fatal; proceed with navigation
+        console.warn("Apollo clearStore failed", e);
+      }
+
+      const next = searchParams.get("next") || "/";
+      router.push(next);
+    } catch (err) {
+      console.error("Sign-in error", err);
+      setApiError("Unable to sign in. Please try again.");
+      
+      // Reset reCAPTCHA on error
+      if (config.isRecaptchaEnabledFor('login')) {
+        setRecaptchaValue(null);
+        resetRecaptcha();
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen w-full px-4 md:px-6 py-12 md:py-16 lg:py-24 ">
+      <div className="flex w-full max-w-[756px] flex-col justify-center items-start gap-6">
+        {/* Session expired message */}
+        {sessionExpired && (
+          <div className="w-full p-4 mb-4 text-red-700 bg-red-100 rounded-md">
+            Your session has expired. Please log in again to continue.
+          </div>
+        )}
+
+        {/* Tabs */}
+        <AccountTabs />
+        {/* Form */}
+        <form
+          onSubmit={handleSubmit}
+          className="flex flex-col items-start gap-4 md:gap-5 self-stretch"
+        >
+          <div className="w-full">
+            <Input
+              label="EMAIL"
+              type="email"
+              name="email"
+              placeholder="jamescharles@gmail.com"
+              value={formData.email}
+              onChange={handleChange}
+              hasError={!!fieldErrors.email}
+              className="mt-1.5 py-3 px-4 text-sm leading-5 tracking-[-0.035px]"
+            />
+            {fieldErrors.email && (
+              <div
+                style={{ color: "var(--color-primary-600)" }}
+                className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+              >
+                {fieldErrors.email}
+              </div>
+            )}
+          </div>
+          <div className="w-full relative">
+            <Input
+              label="PASSWORD"
+              type="password"
+              name="password"
+              placeholder="********"
+              value={formData.password}
+              onChange={handleChange}
+              hasError={!!fieldErrors.password}
+              className="w-full mt-1.5 py-3 px-4 text-sm leading-5 tracking-[-0.035px]"
+            />
+            {fieldErrors.password && (
+              <div
+                style={{ color: "var(--color-primary-600)" }}
+                className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+              >
+                {fieldErrors.password}
+              </div>
+            )}
+          </div>
+          <div className="text-right w-full">
+            <Link
+              href="/account/forgot-password"
+              style={{ color: "var(--color-secondary-800)" }}
+              className="font-secondary text-xs md:text-sm font-semibold leading-5 tracking-[-0.035px]"
+            >
+              FORGOT PASSWORD?
+            </Link>
+          </div>
+
+          {/* Conditional reCAPTCHA for login */}
+          {config.isRecaptchaEnabledFor('login') && (
+            <div className="w-full flex flex-col items-start">
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey={config.getGoogleRecaptchaConfig()?.site_key || ''}
+                theme="light"
+                size="normal"
+                onChange={(value) => {
+                  setRecaptchaValue(value);
+                  // Clear recaptcha error when user completes it
+                  if (value && fieldErrors.recaptcha) {
+                    setFieldErrors(prev => ({
+                      ...prev,
+                      recaptcha: ""
+                    }));
+                  }
+                }}
+                onExpired={() => {
+                  setRecaptchaValue(null);
+                  resetRecaptcha();
+                }}
+                onError={() => {
+                  setRecaptchaValue(null);
+                  resetRecaptcha();
+                }}
+              />
+              {fieldErrors.recaptcha && (
+                <div
+                  style={{ color: "var(--color-primary-600)" }}
+                  className="text-sm leading-5 tracking-[-0.035px] mt-1.5"
+                >
+                  {fieldErrors.recaptcha}
+                </div>
+              )}
+            </div>
+          )}
+
+           {apiError && (
+            <ErrorTag message={apiError } />
+          )}
+          <PrimaryButton
+            type="submit"
+            disabled={loading}
+            content={
+              loading ? (
+                <span className="flex items-center justify-center w-full">
+                  {SpinnerIcon}
+                </span>
+              ) : (
+                "Login"
+              )
+            }
+            className="w-full text-sm lg:text-base font-semibold leading-[24px] tracking-[-0.04px] py-2 md:py-3 px-4 mt-1"
+          />
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense
+      fallback={<div className="max-w-7xl mx-auto px-4 py-8">Loading...</div>}
+    >
+      <LoginInner />
+    </Suspense>
+  );
+}