first
This commit is contained in:
Илья Шалонин
commit
8538ab969a
434 changed files with 44051 additions and 0 deletions
60
apps/web/modules/marketing/shared/components/ContentMenu.tsx
Normal file
60
apps/web/modules/marketing/shared/components/ContentMenu.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { LocaleLink } from "@i18n/routing";
|
||||
import type { ContentStructureItem } from "@shared/lib/content";
|
||||
|
||||
function ContentMenuItem({
|
||||
label,
|
||||
path,
|
||||
isPage,
|
||||
children,
|
||||
activePath,
|
||||
}: ContentStructureItem & { activePath: string }) {
|
||||
return (
|
||||
<>
|
||||
{isPage ? (
|
||||
<LocaleLink
|
||||
key={path}
|
||||
className={`block rounded-full px-4 py-1 ${path === activePath ? "bg-primary/5 font-bold" : ""}`}
|
||||
href={`/docs/${path}`}
|
||||
>
|
||||
{label}
|
||||
</LocaleLink>
|
||||
) : (
|
||||
<span key={path} className="block px-4 py-1">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{children && (
|
||||
<div className="-mr-4 pl-4">
|
||||
{children.map((subItem) => (
|
||||
<ContentMenuItem
|
||||
key={subItem.path}
|
||||
{...subItem}
|
||||
activePath={activePath}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContentMenu({
|
||||
items,
|
||||
activePath,
|
||||
}: {
|
||||
items: ContentStructureItem[];
|
||||
activePath: string;
|
||||
}) {
|
||||
return (
|
||||
<ul className="-mx-4 list-none space-y-2 pr-4">
|
||||
{items.map((item) => (
|
||||
<ContentMenuItem
|
||||
key={item.path}
|
||||
{...item}
|
||||
activePath={activePath}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
46
apps/web/modules/marketing/shared/components/Footer.tsx
Normal file
46
apps/web/modules/marketing/shared/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { LocaleLink } from "@i18n/routing";
|
||||
import { config } from "@repo/config";
|
||||
import { Logo } from "@shared/components/Logo";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t py-8 text-foreground/60 text-sm">
|
||||
<div className="container grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div>
|
||||
<Logo className="opacity-70 grayscale" />
|
||||
<p className="mt-3 text-sm opacity-70">
|
||||
© {new Date().getFullYear()} {config.appName}.{" "}
|
||||
<a href="https://supastarter.dev">
|
||||
Built with supastarter
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<LocaleLink href="/blog" className="block">
|
||||
Blog
|
||||
</LocaleLink>
|
||||
|
||||
<a href="#features" className="block">
|
||||
Features
|
||||
</a>
|
||||
|
||||
<a href="/#pricing" className="block">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<LocaleLink href="/legal/privacy-policy" className="block">
|
||||
Privacy policy
|
||||
</LocaleLink>
|
||||
|
||||
<LocaleLink href="/legal/terms" className="block">
|
||||
Terms and conditions
|
||||
</LocaleLink>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
218
apps/web/modules/marketing/shared/components/NavBar.tsx
Normal file
218
apps/web/modules/marketing/shared/components/NavBar.tsx
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
"use client";
|
||||
|
||||
import { LocaleLink, useLocalePathname } from "@i18n/routing";
|
||||
import { config } from "@repo/config";
|
||||
import { useSession } from "@saas/auth/hooks/use-session";
|
||||
import { ColorModeToggle } from "@shared/components/ColorModeToggle";
|
||||
import { LocaleSwitch } from "@shared/components/LocaleSwitch";
|
||||
import { Logo } from "@shared/components/Logo";
|
||||
import { Button } from "@ui/components/button";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@ui/components/sheet";
|
||||
import { cn } from "@ui/lib";
|
||||
import { MenuIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import NextLink from "next/link";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useDebounceCallback } from "usehooks-ts";
|
||||
|
||||
export function NavBar() {
|
||||
const t = useTranslations();
|
||||
const { user } = useSession();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const localePathname = useLocalePathname();
|
||||
const [isTop, setIsTop] = useState(true);
|
||||
|
||||
const debouncedScrollHandler = useDebounceCallback(
|
||||
() => {
|
||||
setIsTop(window.scrollY <= 10);
|
||||
},
|
||||
150,
|
||||
{
|
||||
maxWait: 150,
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", debouncedScrollHandler);
|
||||
debouncedScrollHandler();
|
||||
return () => {
|
||||
window.removeEventListener("scroll", debouncedScrollHandler);
|
||||
};
|
||||
}, [debouncedScrollHandler]);
|
||||
|
||||
useEffect(() => {
|
||||
setMobileMenuOpen(false);
|
||||
}, [localePathname]);
|
||||
|
||||
const isDocsPage = localePathname.startsWith("/docs");
|
||||
|
||||
const menuItems: {
|
||||
label: string;
|
||||
href: string;
|
||||
}[] = [
|
||||
{
|
||||
label: t("common.menu.pricing"),
|
||||
href: "/#pricing",
|
||||
},
|
||||
{
|
||||
label: t("common.menu.faq"),
|
||||
href: "/#faq",
|
||||
},
|
||||
{
|
||||
label: t("common.menu.blog"),
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
label: t("common.menu.changelog"),
|
||||
href: "/changelog",
|
||||
},
|
||||
...(config.contactForm.enabled
|
||||
? [
|
||||
{
|
||||
label: t("common.menu.contact"),
|
||||
href: "/contact",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
label: t("common.menu.docs"),
|
||||
href: "/docs",
|
||||
},
|
||||
];
|
||||
|
||||
const isMenuItemActive = (href: string) => localePathname.startsWith(href);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed top-0 left-0 z-50 w-full transition-shadow duration-200",
|
||||
!isTop || isDocsPage
|
||||
? "bg-card/80 shadow-sm backdrop-blur-lg"
|
||||
: "shadow-none",
|
||||
)}
|
||||
data-test="navigation"
|
||||
>
|
||||
<div className="container">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-stretch gap-6 transition-[padding] duration-200",
|
||||
!isTop || isDocsPage ? "py-4" : "py-6",
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-1 justify-start">
|
||||
<LocaleLink
|
||||
href="/"
|
||||
className="block hover:no-underline active:no-underline"
|
||||
>
|
||||
<Logo />
|
||||
</LocaleLink>
|
||||
</div>
|
||||
|
||||
<div className="hidden flex-1 items-center justify-center lg:flex">
|
||||
{menuItems.map((menuItem) => (
|
||||
<LocaleLink
|
||||
key={menuItem.href}
|
||||
href={menuItem.href}
|
||||
className={cn(
|
||||
"block px-3 py-2 font-medium text-foreground/80 text-sm",
|
||||
isMenuItemActive(menuItem.href)
|
||||
? "font-bold text-foreground"
|
||||
: "",
|
||||
)}
|
||||
prefetch
|
||||
>
|
||||
{menuItem.label}
|
||||
</LocaleLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-end gap-3">
|
||||
<ColorModeToggle />
|
||||
{config.i18n.enabled && (
|
||||
<Suspense>
|
||||
<LocaleSwitch />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
<Sheet
|
||||
open={mobileMenuOpen}
|
||||
onOpenChange={(open) => setMobileMenuOpen(open)}
|
||||
>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
className="lg:hidden"
|
||||
size="icon"
|
||||
variant="light"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<MenuIcon className="size-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="w-[280px]" side="right">
|
||||
<SheetTitle />
|
||||
<div className="flex flex-col items-start justify-center">
|
||||
{menuItems.map((menuItem) => (
|
||||
<LocaleLink
|
||||
key={menuItem.href}
|
||||
href={menuItem.href}
|
||||
className={cn(
|
||||
"block px-3 py-2 font-medium text-base text-foreground/80",
|
||||
isMenuItemActive(menuItem.href)
|
||||
? "font-bold text-foreground"
|
||||
: "",
|
||||
)}
|
||||
prefetch
|
||||
>
|
||||
{menuItem.label}
|
||||
</LocaleLink>
|
||||
))}
|
||||
|
||||
<NextLink
|
||||
key={user ? "start" : "login"}
|
||||
href={user ? "/app" : "/auth/login"}
|
||||
className="block px-3 py-2 text-base"
|
||||
prefetch={!user}
|
||||
>
|
||||
{user
|
||||
? t("common.menu.dashboard")
|
||||
: t("common.menu.login")}
|
||||
</NextLink>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{config.ui.saas.enabled &&
|
||||
(user ? (
|
||||
<Button
|
||||
key="dashboard"
|
||||
className="hidden lg:flex"
|
||||
asChild
|
||||
variant="secondary"
|
||||
>
|
||||
<NextLink href="/app">
|
||||
{t("common.menu.dashboard")}
|
||||
</NextLink>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
key="login"
|
||||
className="hidden lg:flex"
|
||||
asChild
|
||||
variant="secondary"
|
||||
>
|
||||
<NextLink href="/auth/login" prefetch>
|
||||
{t("common.menu.login")}
|
||||
</NextLink>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
20
apps/web/modules/marketing/shared/components/NotFound.tsx
Normal file
20
apps/web/modules/marketing/shared/components/NotFound.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
"use client";
|
||||
|
||||
import { LocaleLink } from "@i18n/routing";
|
||||
import { Button } from "@ui/components/button";
|
||||
import { UndoIcon } from "lucide-react";
|
||||
|
||||
export function NotFound() {
|
||||
return (
|
||||
<div className="flex h-screen flex-col items-center justify-center">
|
||||
<h1 className="font-bold text-5xl">404</h1>
|
||||
<p className="mt-2 text-2xl">Page not found</p>
|
||||
|
||||
<Button asChild className="mt-4">
|
||||
<LocaleLink href="/">
|
||||
<UndoIcon className="mr-2 size-4" /> Go to homepage
|
||||
</LocaleLink>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function TableOfContents({
|
||||
items,
|
||||
}: {
|
||||
items: { slug: string; content: string; lvl: number }[];
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const scrollToSection = (id: string) => {
|
||||
const scrollOffset = 80;
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
const elementPositionY =
|
||||
element.getBoundingClientRect().top +
|
||||
window.scrollY -
|
||||
scrollOffset;
|
||||
window.scrollTo({ top: elementPositionY, behavior: "smooth" });
|
||||
history.pushState({}, "", `#${id}`);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (location.hash) {
|
||||
scrollToSection(location.hash.substring(1));
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-64 self-start rounded-lg border p-4">
|
||||
<h3 className="mb-2 font-semibold text-base">
|
||||
{t("common.tableOfContents.title")}
|
||||
</h3>
|
||||
<nav className="list-none space-y-2">
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.slug}
|
||||
href={`#${item.slug}`}
|
||||
className={`block text-sm ${`ml-${Math.max(0, item.lvl - 2) * 2}`}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
scrollToSection(item.slug);
|
||||
}}
|
||||
>
|
||||
{item.content}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue