@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/saas/app/(auth)/signup/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 export default function SignupPage() {
   return (
     <>
-      <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
+      <h1 className="mt-10 text-[26px] font-semibold tracking-[-0.025em] text-zinc-950">
         Create an account
       </h1>
       <p className="mt-1 text-[13px] text-zinc-500">

package/templates/saas/app/(marketing)/layout.tsx

@@ -1,30 +1,28 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
+import { ChevronDown, Menu } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import { PRODUCTS } from "@/lib/products";
 import { SOLUTIONS, RESOURCES, COMPANY, COMPARISONS } from "@/lib/site";
 import { siteConfig } from "@/lib/site.config";
 
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps
-// only the pages inside the group — the marketing nav up top, a fat footer
-// below. The other sections bring their own layouts: `(auth)` the split-screen
-// frame, `dashboard/` the sidebar shell.
+// only the pages inside the group with the marketing nav and footer. The
+// other sections bring their own layouts: `(auth)` the split-screen frame,
+// `dashboard/` the sidebar shell.
 //
-// A layout receives the page props plus `children`. `auth.user_id` is null for
-// anonymous visitors and the signed-in user's id otherwise — resolved
-// server-side from the session cookie before any HTML is sent, so the nav
-// renders the right links on the first byte (no flash, no client fetch).
+// `auth.user_id` is resolved on the server from the session cookie before any
+// HTML is sent, so the nav renders the right buttons on the first byte.
 interface LayoutProps {
   children: React.ReactNode;
   auth: PageAuth;
 }
 
-// Dropdown menu data. Each item is icon + title + blurb + anchor. Swap the
-// hrefs for real routes as you add pages.
-type MenuItem = { icon: string; title: string; desc: string; href: string };
+type MenuItem = { icon: LucideIcon; title: string; desc: string; href: string };
 
-// Derived from the shared product list so the menu and the /products/[slug]
-// pages can never drift. Each item deep-links to that product's own page.
+// Derived from the product list, so the menu and the /products/[slug] pages
+// can't drift.
 const PRODUCT_MENU: MenuItem[] = PRODUCTS.map((p) => ({
   icon: p.icon,
   title: p.title,
@@ -32,46 +30,36 @@ const PRODUCT_MENU: MenuItem[] = PRODUCTS.map((p) => ({
   href: `/products/${p.slug}`,
 }));
 
-const RESOURCES_MENU: MenuItem[] = [
-  { icon: "▢", title: "Docs", desc: `Set up and use ${siteConfig.brand.name}.`, href: "/resources/docs" },
-  { icon: "✎", title: "Guides", desc: "Playbooks and walkthroughs.", href: "/resources/guides" },
-  { icon: "✦", title: "Changelog", desc: `What's new in ${siteConfig.brand.name}.`, href: "/resources/changelog" },
-  { icon: "⌘", title: "API reference", desc: `Build on the ${siteConfig.brand.name} API.`, href: "/resources/api" },
-  { icon: "◈", title: "Compare", desc: `See how ${siteConfig.brand.name} stacks up.`, href: `/compare/${COMPARISONS[0].slug}` },
-];
+const RESOURCES_MENU: MenuItem[] = siteConfig.resourcesMenu;
 
-// A hover/focus dropdown — pure CSS via `group`, so the nav stays a server
-// component (no client JS). The panel opens on hover and on keyboard focus.
+// A hover/focus dropdown in pure CSS (`group`), so the nav stays a server
+// component with no client JS.
 function NavDropdown({ label, items }: { label: string; items: MenuItem[] }) {
   return (
     <div className="group relative">
       <button
         type="button"
         aria-haspopup="menu"
-        className="flex items-center gap-1 text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-900 group-hover:text-zinc-900"
+        className="flex items-center gap-1 rounded-full px-3 py-1.5 text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-950 group-hover:text-zinc-950"
       >
         {label}
-        <Chevron />
+        <ChevronDown className="size-3.5 text-zinc-400 transition-transform duration-200 group-hover:rotate-180" />
       </button>
-      {/* `pt-3` (padding, not margin) bridges the gap so hover doesn't drop. */}
-      <div className="invisible absolute left-0 top-full z-40 w-[340px] translate-y-1 pt-3 opacity-0 transition-all duration-150 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100">
-        <div className="rounded-2xl border border-zinc-200 bg-white p-2 shadow-[0_24px_60px_-25px_rgba(0,0,0,0.25)]">
+      {/* `pt-2` (padding, not margin) bridges the gap so hover doesn't drop. */}
+      <div className="invisible absolute left-0 top-full z-40 w-[340px] translate-y-1 pt-2 opacity-0 transition-all duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:visible group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 group-focus-within:opacity-100">
+        <div className="rounded-2xl bg-white p-1.5 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_24px_60px_-20px_rgba(0,0,0,0.25)]">
           {items.map((it) => (
             <a
               key={it.title}
               href={it.href}
-              className="flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-zinc-50"
+              className="flex items-start gap-3 rounded-xl p-2.5 transition-colors hover:bg-zinc-50"
             >
-              <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-brand-soft text-[13px] text-brand">
-                {it.icon}
+              <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-white text-zinc-700 shadow-[0_0_0_1px_rgba(0,0,0,0.07)]">
+                <it.icon className="size-4" strokeWidth={1.75} />
               </span>
               <span className="min-w-0">
-                <span className="block text-[13.5px] font-medium text-zinc-900">
-                  {it.title}
-                </span>
-                <span className="block text-[12.5px] leading-snug text-zinc-500">
-                  {it.desc}
-                </span>
+                <span className="block text-[13.5px] font-medium text-zinc-900">{it.title}</span>
+                <span className="block text-[12.5px] leading-snug text-zinc-500">{it.desc}</span>
               </span>
             </a>
           ))}
@@ -81,68 +69,50 @@ function NavDropdown({ label, items }: { label: string; items: MenuItem[] }) {
   );
 }
 
-function Chevron() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 10 10"
-      fill="none"
-      aria-hidden
-      className="text-zinc-400 transition-transform duration-200 group-hover:rotate-180"
-    >
-      <path
-        d="M2 3.5L5 6.5L8 3.5"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-// Mobile menu — the desktop nav is `hidden md:flex`, so on phones this is the
-// only way to reach Product / Resources / Pricing. Pure-CSS via native
-// `<details>` (no client JS, same pattern as the FAQ + user menu); plain `<a>`
-// links do a full navigation, which closes the open panel. md:hidden so it
-// never shows alongside the desktop nav.
+// Below md the desktop nav is hidden and this menu is the way to reach the
+// pages. Native `<details>`, so it needs no client JS; a link click does a
+// full navigation, which closes it.
 function MobileNav({ signedIn }: { signedIn: boolean }) {
   return (
     <details className="md:hidden">
       <summary
         aria-label="Open menu"
-        className="flex size-9 cursor-pointer select-none list-none items-center justify-center rounded-md text-zinc-700 transition-colors marker:hidden hover:bg-zinc-100 [&::-webkit-details-marker]:hidden"
+        className="flex size-9 cursor-pointer select-none list-none items-center justify-center rounded-full text-zinc-700 transition-colors marker:hidden hover:bg-zinc-100 [&::-webkit-details-marker]:hidden"
       >
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
-          <path d="M3 6h18M3 12h18M3 18h18" />
-        </svg>
+        <Menu className="size-[18px]" strokeWidth={1.75} />
       </summary>
-      <div className="fixed inset-x-0 top-14 z-40 max-h-[calc(100vh-3.5rem)] overflow-y-auto border-b border-zinc-200 bg-white shadow-[0_24px_48px_-24px_rgba(0,0,0,0.25)]">
-        <div className="mx-auto max-w-5xl space-y-6 px-6 py-6">
+      <div className="fixed inset-x-0 top-14 z-40 max-h-[calc(100dvh-3.5rem)] overflow-y-auto border-b border-zinc-200 bg-white shadow-[0_24px_48px_-24px_rgba(0,0,0,0.25)]">
+        <div className="mx-auto max-w-6xl space-y-6 px-4 py-6">
           <MobileGroup title="Product" items={PRODUCT_MENU} />
           <MobileGroup title="Resources" items={RESOURCES_MENU} />
-          <div className="flex flex-col">
-            <a href="/#pricing" className="rounded-lg px-2 py-2 text-[14px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50">
-              Pricing
-            </a>
-            <a href="/#customers" className="rounded-lg px-2 py-2 text-[14px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50">
-              Customers
-            </a>
-          </div>
+          <a
+            href="/pricing"
+            className="block rounded-lg px-2 py-2 text-[15px] font-medium text-zinc-800 transition-colors hover:bg-zinc-50"
+          >
+            Pricing
+          </a>
           <div className="flex flex-col gap-2 border-t border-zinc-100 pt-5">
             {signedIn ? (
-              <a href="/dashboard" className="inline-flex h-10 items-center justify-center rounded-full bg-zinc-900 text-[14px] font-medium text-white transition-colors hover:bg-zinc-700">
+              <a
+                href="/dashboard"
+                className="inline-flex h-11 items-center justify-center rounded-full bg-zinc-950 text-[14px] font-medium text-white"
+              >
                 Open dashboard
               </a>
             ) : (
               <>
-                <a href="/login" className="inline-flex h-10 items-center justify-center rounded-full border border-zinc-300 text-[14px] font-medium text-zinc-900 transition-colors hover:bg-zinc-50">
-                  Log in
-                </a>
-                <a href="/signup" className="inline-flex h-10 items-center justify-center rounded-full bg-zinc-900 text-[14px] font-medium text-white transition-colors hover:bg-zinc-700">
+                <a
+                  href="/signup"
+                  className="inline-flex h-11 items-center justify-center rounded-full bg-zinc-950 text-[14px] font-medium text-white"
+                >
                   Get started
                 </a>
+                <a
+                  href="/login"
+                  className="inline-flex h-11 items-center justify-center rounded-full text-[14px] font-medium text-zinc-900 ring-1 ring-zinc-200"
+                >
+                  Log in
+                </a>
               </>
             )}
           </div>
@@ -155,19 +125,15 @@ function MobileNav({ signedIn }: { signedIn: boolean }) {
 function MobileGroup({ title, items }: { title: string; items: MenuItem[] }) {
   return (
     <div>
-      <div className="mb-1.5 px-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
-        {title}
-      </div>
+      <div className="mb-1 px-2 text-[13px] font-medium text-zinc-400">{title}</div>
       <div className="flex flex-col">
         {items.map((it) => (
           <a
             key={it.href}
             href={it.href}
-            className="flex items-center gap-3 rounded-lg px-2 py-2 text-[14px] text-zinc-700 transition-colors hover:bg-zinc-50"
+            className="flex items-center gap-3 rounded-lg px-2 py-2 text-[15px] text-zinc-800 transition-colors hover:bg-zinc-50"
           >
-            <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-brand-soft text-[12px] text-brand">
-              {it.icon}
-            </span>
+            <it.icon className="size-4 text-zinc-500" strokeWidth={1.75} />
             {it.title}
           </a>
         ))}
@@ -176,66 +142,62 @@ function MobileGroup({ title, items }: { title: string; items: MenuItem[] }) {
   );
 }
 
-// `<main>` is full-bleed — each page owns its own container so the landing
-// page can run edge-to-edge while inner pages stay centered. Rebrand "Acme"
-// to your product.
+function Logo() {
+  return (
+    <Link href="/" className="flex items-center gap-2">
+      <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-950 text-[13px] font-bold text-white">
+        {siteConfig.brand.letter}
+      </span>
+      <span className="text-[15px] font-semibold tracking-tight text-zinc-950">{siteConfig.brand.name}</span>
+    </Link>
+  );
+}
+
+// `<main>` is full-bleed; each page owns its container.
 export default function MarketingLayout({ children, auth }: LayoutProps) {
   const signedIn = Boolean(auth?.user_id);
   return (
     <>
-      <header className="sticky top-0 z-30 bg-white/80 backdrop-blur">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
-          <div className="flex items-center gap-8">
-            <Link href="/" className="flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {siteConfig.brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {siteConfig.brand.name}
-              </span>
-            </Link>
-            <nav className="hidden items-center gap-6 md:flex">
+      <header className="sticky top-0 z-30 border-b border-zinc-950/[0.06] bg-white/75 backdrop-blur-xl">
+        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 sm:px-6">
+          <div className="flex items-center gap-6">
+            <Logo />
+            <nav className="hidden items-center md:flex">
               <NavDropdown label="Product" items={PRODUCT_MENU} />
               <NavDropdown label="Resources" items={RESOURCES_MENU} />
               <Link
                 href="/pricing"
-                className="text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-900"
+                className="rounded-full px-3 py-1.5 text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-950"
               >
                 Pricing
               </Link>
-              <Link
-                href="/#customers"
-                className="text-[13.5px] text-zinc-600 transition-colors hover:text-zinc-900"
-              >
-                Customers
-              </Link>
             </nav>
           </div>
-          <nav className="flex items-center gap-2">
-            <MobileNav signedIn={signedIn} />
+          <nav className="flex items-center gap-1.5">
             {signedIn ? (
               <Link
                 href="/dashboard"
-                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+                className="inline-flex h-8 items-center rounded-full bg-zinc-950 px-3.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-800"
               >
-                Dashboard
+                Open dashboard
               </Link>
             ) : (
               <>
                 <Link
                   href="/login"
-                  className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
+                  className="hidden h-8 items-center rounded-full px-3 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-950 sm:inline-flex"
                 >
                   Log in
                 </Link>
                 <Link
                   href="/signup"
-                  className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+                  className="inline-flex h-8 items-center rounded-full bg-zinc-950 px-3.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-800"
                 >
                   Get started
                 </Link>
               </>
             )}
+            <MobileNav signedIn={signedIn} />
           </nav>
         </div>
       </header>
@@ -247,165 +209,77 @@ export default function MarketingLayout({ children, auth }: LayoutProps) {
   );
 }
 
-// Footer link groups, derived from the same data the pages use so every link
-// resolves to a real route. Each link carries a small icon (except Compare).
-type FooterLink = { label: string; href: string; icon?: string };
-type FooterGroupData = { title: string; links: FooterLink[] };
-
-const SOLUTION_ICONS = ["◆", "◈", "▣", "◎"];
-const RESOURCE_ICONS: Record<string, string> = {
-  docs: "▢",
-  guides: "✎",
-  changelog: "✦",
-  api: "⌘",
-  status: "◉",
-};
-const COMPANY_ICONS = ["◍", "≣", "◆", "✉", "▢"];
+// Footer link groups, derived from the same data the pages use, so every
+// link resolves to a real route.
+type FooterGroupData = { title: string; links: { label: string; href: string }[] };
 
-const PRODUCT_GROUP: FooterGroupData = {
-  title: "Product",
-  links: [
-    ...PRODUCTS.map((p) => ({
-      label: p.title,
-      href: `/products/${p.slug}`,
-      icon: p.icon,
-    })),
-    { label: "Pricing", href: "/#pricing", icon: "◷" },
-  ],
-};
-const SOLUTIONS_GROUP: FooterGroupData = {
-  title: "Solutions",
-  links: SOLUTIONS.map((s, i) => ({
-    label: s.navLabel,
-    href: `/solutions/${s.slug}`,
-    icon: SOLUTION_ICONS[i] ?? "◆",
-  })),
-};
-const RESOURCES_GROUP: FooterGroupData = {
-  title: "Resources",
-  links: RESOURCES.map((r) => ({
-    label: r.navLabel,
-    href: `/resources/${r.slug}`,
-    icon: RESOURCE_ICONS[r.slug] ?? "▢",
-  })),
-};
-const COMPANY_GROUP: FooterGroupData = {
-  title: "Company",
-  links: COMPANY.map((c, i) => ({
-    label: c.navLabel,
-    href: `/company/${c.slug}`,
-    icon: COMPANY_ICONS[i] ?? "◍",
-  })),
-};
-const COMPARE_GROUP: FooterGroupData = {
-  title: "Compare",
-  links: COMPARISONS.map((c) => ({
-    label: c.navLabel,
-    href: `/compare/${c.slug}`,
-  })),
-};
-
-function FooterGroup({
-  group,
-  className = "",
-}: {
-  group: FooterGroupData;
-  className?: string;
-}) {
-  return (
-    <div className={className}>
-      <div className="text-[11px] font-semibold uppercase tracking-wider text-zinc-900">
-        {group.title}
-      </div>
-      <div className="mt-4 flex flex-col gap-2.5">
-        {group.links.map((l) => (
-          <Link
-            key={l.href}
-            href={l.href}
-            className="group flex items-center gap-2 text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
-          >
-            {l.icon ? (
-              <span className="flex w-3.5 justify-center text-[11px] text-zinc-400 transition-colors group-hover:text-zinc-600">
-                {l.icon}
-              </span>
-            ) : null}
-            {l.label}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-}
+const FOOTER_GROUPS: FooterGroupData[] = [
+  {
+    title: "Product",
+    links: [
+      ...PRODUCTS.map((p) => ({ label: p.title, href: `/products/${p.slug}` })),
+      { label: "Pricing", href: "/pricing" },
+    ],
+  },
+  {
+    title: "Solutions",
+    links: [
+      ...SOLUTIONS.map((s) => ({ label: s.navLabel, href: `/solutions/${s.slug}` })),
+      ...COMPARISONS.map((c) => ({ label: c.navLabel, href: `/compare/${c.slug}` })),
+    ],
+  },
+  {
+    title: "Resources",
+    links: RESOURCES.map((r) => ({ label: r.navLabel, href: `/resources/${r.slug}` })),
+  },
+  {
+    title: "Company",
+    links: COMPANY.map((c) => ({ label: c.navLabel, href: `/company/${c.slug}` })),
+  },
+];
 
 function SiteFooter() {
   return (
     <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-5xl px-6 py-16">
-        {/* Brand block */}
+      <div className="mx-auto grid max-w-6xl gap-12 px-4 py-14 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
         <div className="max-w-xs">
-          <Link href="/" className="inline-flex items-center gap-2">
-            <span className="flex size-7 items-center justify-center rounded-lg bg-zinc-900 text-sm font-bold text-white">
-              {siteConfig.brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-              {siteConfig.brand.name}
-            </span>
-          </Link>
-          <p className="mt-4 text-[13px] leading-relaxed text-zinc-500">
-            {siteConfig.brand.footerBlurb}
-          </p>
+          <Logo />
+          <p className="mt-4 text-[13.5px] leading-relaxed text-zinc-500">{siteConfig.brand.footerBlurb}</p>
           <div className="mt-5 flex items-center gap-4">
             {siteConfig.brand.socials.map((s) => (
               <a
                 key={s.label}
                 href={s.href}
                 aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
+                className="text-zinc-400 transition-colors hover:text-zinc-950"
               >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                   <path d={s.path} />
                 </svg>
               </a>
             ))}
-            <a
-              href={`mailto:${siteConfig.brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
-            </a>
-          </div>
-        </div>
-
-        {/* Link columns */}
-        <div className="mt-12 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
-          <div>
-            <FooterGroup group={PRODUCT_GROUP} />
-            <FooterGroup group={SOLUTIONS_GROUP} className="mt-10" />
-          </div>
-          <div>
-            <FooterGroup group={RESOURCES_GROUP} />
-            <FooterGroup group={COMPANY_GROUP} className="mt-10" />
-          </div>
-          <div>
-            <FooterGroup group={COMPARE_GROUP} />
           </div>
         </div>
-
-        <div className="mt-14 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400">
-          <span>© {new Date().getFullYear()} {siteConfig.brand.copyrightName}</span>
+        <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
+          {FOOTER_GROUPS.map((g) => (
+            <div key={g.title}>
+              <div className="text-[13px] font-medium text-zinc-950">{g.title}</div>
+              <ul className="mt-3.5 space-y-2.5">
+                {g.links.map((l) => (
+                  <li key={l.href}>
+                    <Link href={l.href} className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-950">
+                      {l.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
         </div>
       </div>
+      <div className="mx-auto max-w-6xl border-t border-zinc-200/70 px-4 py-6 text-[12.5px] text-zinc-400 sm:px-6">
+        © {new Date().getFullYear()} {siteConfig.brand.copyrightName}
+      </div>
     </footer>
   );
 }