redesign the homepage

2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
@@ -0,0 +1,161 @@
+import { StatusBadge } from '@/components/foundation/StatusBadge';
+import { DemoTrigger } from '@/components/integrations/DemoTrigger';
+import { localizedPath, type Locale } from '@/lib/localization/config';
+import type { ShellMessages } from '@/lib/localization/messages';
+import styles from './SiteFooter.module.css';
+
+function signInUrl(locale: Locale): string {
+  return localizedPath('sign-in', locale);
+}
+
+interface SiteFooterProps {
+  locale: Locale;
+  messages: ShellMessages;
+  demoEnabled: boolean;
+}
+
+function HashLink({ locale, hash, children }: { locale: Locale; hash: string; children: string }) {
+  return <a href={`${localizedPath('home', locale)}#${hash}`}>{children}</a>;
+}
+
+function PendingRouteLink({
+  locale,
+  routeId,
+  label,
+  pending,
+}: {
+  locale: Locale;
+  routeId: 'sign-in' | 'forgot-password' | 'privacy' | 'terms' | 'accessibility';
+  label: string;
+  pending: string;
+}) {
+  return (
+    <a className={styles.legalLink} href={localizedPath(routeId, locale)}>
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </a>
+  );
+}
+
+function PendingItem({ label, pending }: { label: string; pending: string }) {
+  return (
+    <span className={styles.pendingItem} aria-disabled="true">
+      <span>{label}</span>
+      <StatusBadge>{pending}</StatusBadge>
+    </span>
+  );
+}
+
+export function SiteFooter({ locale, messages, demoEnabled }: SiteFooterProps) {
+  const footer = messages.footer;
+  const year = new Date().getUTCFullYear();
+
+  return (
+    <footer className={styles.footer} aria-label={footer.landmarkLabel}>
+      <div className={styles.inner}>
+        <div className={styles.brandColumn}>
+          <div className={styles.brand}>
+            <span aria-hidden="true" className={styles.mark}>
+              RDG
+            </span>
+            <span>RentalDriveGo</span>
+          </div>
+          <p className={styles.tagline}>{footer.tagline}</p>
+          <p className={styles.releaseNotice}>{footer.releaseNotice}</p>
+        </div>
+
+        <div className={styles.groups}>
+          <section className={styles.group} aria-labelledby="footer-product">
+            <h2 id="footer-product">{footer.groups.product}</h2>
+            <ul>
+              <li>
+                <HashLink locale={locale} hash="workflow">
+                  {footer.links.workflow}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="modules">
+                  {footer.links.modules}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="pricing">
+                  {footer.links.pricing}
+                </HashLink>
+              </li>
+              <li>
+                <HashLink locale={locale} hash="faq">
+                  {footer.links.faq}
+                </HashLink>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-company">
+            <h2 id="footer-company">{footer.groups.company}</h2>
+            <ul>
+              <li>
+                <PendingItem label={footer.links.contact} pending={footer.pending} />
+              </li>
+              <li>
+                <DemoTrigger
+                  label={footer.links.demo}
+                  source="footer"
+                  size="small"
+                  disabledReason={demoEnabled ? undefined : messages.header.demoUnavailable}
+                />
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-account">
+            <h2 id="footer-account">{footer.groups.account}</h2>
+            <ul>
+              <li>
+                <a href={signInUrl(locale)}>
+                  {footer.links.login}
+                </a>
+              </li>
+            </ul>
+          </section>
+
+          <section className={styles.group} aria-labelledby="footer-legal">
+            <h2 id="footer-legal">{footer.groups.legal}</h2>
+            <ul>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="privacy"
+                  label={footer.links.privacy}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="terms"
+                  label={footer.links.terms}
+                  pending={footer.pending}
+                />
+              </li>
+              <li>
+                <PendingRouteLink
+                  locale={locale}
+                  routeId="accessibility"
+                  label={footer.links.accessibility}
+                  pending={footer.pending}
+                />
+              </li>
+            </ul>
+          </section>
+        </div>
+
+        <div className={styles.bottom}>
+          <span>
+            {footer.copyrightPrefix} {year} RentalDriveGo
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}