Skip to content

Commit 6514272

Browse files
RieranthonyRieranthony
committed
feat: better footer ASCII
1 parent 84d5e72 commit 6514272

6 files changed

Lines changed: 38 additions & 1409 deletions

File tree

‎apps/web/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@
3636
"@radix-ui/react-toggle": "^1.1.10",
3737
"@radix-ui/react-toggle-group": "^1.1.11",
3838
"@radix-ui/react-tooltip": "^1.2.8",
39-
"@react-three/drei": "^10.7.7",
40-
"@react-three/fiber": "^9.5.0",
4139
"@tanstack/react-query": "^5.90.20",
4240
"@tanstack/react-query-devtools": "^5.91.2",
4341
"@tanstack/react-table": "^8.21.3",

‎apps/web/src/app/(lander-docs)/components/docs/docs-toc.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function DocsTableOfContents({
107107

108108
return (
109109
<div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
110-
<p className="sticky top-0 h-6 bg-background font-medium text-primary/80 text-xs uppercase">
110+
<p className="sticky top-0 h-6 bg-background font-medium text-primary/80 text-xs">
111111
On this page
112112
</p>
113113
{toc.map((item) => (
@@ -120,7 +120,7 @@ export function DocsTableOfContents({
120120
>
121121
{item.url === `#${activeHeading}` && (
122122
<motion.div className="-left-7 absolute" layoutId="logo">
123-
<Logo className="size-4 text-cossistant-green" />
123+
<Logo className="size-4 text-cossistant-orange" />
124124
</motion.div>
125125
)}
126126
{item.title}

‎apps/web/src/app/(lander-docs)/components/footer.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Link from "next/link";
22
import { ThemeToggle } from "@/components/theme-toggle";
3-
import { Logo } from "@/components/ui/logo";
3+
import { Background } from "@/components/ui/background";
4+
import { Logo, LogoText, LogoTextSVG } from "@/components/ui/logo";
45
import { ThreeLogo } from "@/components/ui/three-logo";
56
import { DISCORD_INVITE, X_URL } from "@/constants";
67
import { GitHubLink } from "./github-link";
@@ -101,8 +102,8 @@ export function Footer() {
101102
</div>
102103
</div>
103104
<div className="flex flex-col items-center justify-between border-t border-dashed md:items-start">
104-
<div className="container-wrapper mx-auto flex flex-col items-center justify-between gap-6 px-4 pt-4 pb-20 md:flex-row md:items-start md:gap-0">
105-
<div className="flex flex-col gap-4">
105+
<div className="container-wrapper relative mx-auto">
106+
<div className="absolute inset-x-0 top-0 z-50 flex justify-between gap-4 p-4">
106107
<p className="px-6 text-center font-mono text-foreground/60 text-sm md:text-left lg:px-0">
107108
© 2025 cossistant. open source under GPL-3.0 license.
108109
</p>
@@ -127,12 +128,22 @@ export function Footer() {
127128
>
128129
Security
129130
</a>
131+
<ThemeToggle />
130132
</div>
131133
</div>
132-
<ThemeToggle />
133-
</div>
134-
<div className="container-wrapper mx-auto flex flex-col items-center justify-between gap-6 px-4 pt-4 pb-20 md:flex-row md:items-start md:gap-0">
135-
<ThreeLogo className="mx-auto max-w-[180px] opacity-55 sm:max-w-[200px] md:max-w-[220px]" />
134+
<div className="pointer-events-none h-100 min-h-100 w-full" />
135+
<Background
136+
asciiOpacity={1}
137+
className="absolute inset-0 z-0"
138+
fieldOpacity={0.06}
139+
interactive={true}
140+
pointerTrail={true}
141+
resolution={0.13}
142+
/>
143+
144+
<div className="pointer-events-none absolute inset-x-0 top-0 z-0 h-40 w-full bg-linear-to-b from-background to-transparent" />
145+
<div className="pointer-events-none absolute inset-x-0 top-0 z-0 h-20 w-full bg-linear-to-b from-background to-transparent" />
146+
<LogoTextSVG className="pointer-events-none absolute inset-x-0 bottom-20 z-50 w-full text-background" />
136147
</div>
137148
</div>
138149
</footer>

‎apps/web/src/components/ui/logo.tsx‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,18 @@ type Props = {
44
className?: string;
55
};
66

7-
export const LOGO_ICON_WIDTH = 350;
8-
export const LOGO_ICON_HEIGHT = 286;
9-
export const LOGO_ICON_ASPECT_RATIO = LOGO_ICON_WIDTH / LOGO_ICON_HEIGHT;
10-
export const LOGO_ICON_VIEWBOX = `0 0 ${LOGO_ICON_WIDTH} ${LOGO_ICON_HEIGHT}`;
11-
export const LOGO_ICON_PATH =
12-
"M349.071 60.9512V286H65.5293L.508789 225.719V60.9512L65.5293 0H284.051l65.02 60.9512Zm-267.9558 37.33c-3.8102.0002-7.4549 1.5574-10.0888 4.3108l-11.2569 11.767c-2.5097 2.624-3.8991 6.122-3.873 9.752l.1826 25.368H81.043l-.2237-13.446c0-9.826 2.3423-11.681 12.751-11.681h22.8487c10.409 0 11.96 1.855 11.96 12.457v12.67h25.218v-25.373c0-3.627-1.412-7.112-3.937-9.717l-11.497-11.863c-2.63-2.7131-6.247-4.2447-10.026-4.2448H81.1152Zm125.6658 0c-3.81 0-7.455 1.5571-10.09 4.3108l-11.256 11.767c-2.51 2.624-3.9 6.122-3.873 9.752l.182 25.368h24.965l-.224-13.446c0-9.826 2.343-11.681 12.751-11.681h22.849c10.408 0 11.959 1.855 11.959 12.457v12.67h25.219v-25.373c0-3.627-1.413-7.112-3.938-9.717l-11.497-11.863c-2.63-2.713-6.247-4.2448-10.026-4.2448h-47.021Z";
13-
14-
export function getLogoIconSvgMarkup(fill = "currentColor") {
15-
return `
16-
<svg fill="none" viewBox="${LOGO_ICON_VIEWBOX}" xmlns="http://www.w3.org/2000/svg">
17-
<title>Cossistant Logo</title>
18-
<path clip-rule="evenodd" d="${LOGO_ICON_PATH}" fill="${fill}" fill-rule="evenodd" />
19-
</svg>
20-
`;
21-
}
22-
237
export function Logo({ className }: Props) {
248
return (
259
<svg
2610
className={cn("size-5", className)}
2711
fill="none"
28-
viewBox={LOGO_ICON_VIEWBOX}
12+
viewBox="0 0 350 286"
2913
xmlns="http://www.w3.org/2000/svg"
3014
>
3115
<title>Cossistant Logo</title>
3216
<path
3317
clipRule="evenodd"
34-
d={LOGO_ICON_PATH}
18+
d="M349.071 60.9512V286H65.5293L.508789 225.719V60.9512L65.5293 0H284.051l65.02 60.9512Zm-267.9558 37.33c-3.8102.0002-7.4549 1.5574-10.0888 4.3108l-11.2569 11.767c-2.5097 2.624-3.8991 6.122-3.873 9.752l.1826 25.368H81.043l-.2237-13.446c0-9.826 2.3423-11.681 12.751-11.681h22.8487c10.409 0 11.96 1.855 11.96 12.457v12.67h25.218v-25.373c0-3.627-1.412-7.112-3.937-9.717l-11.497-11.863c-2.63-2.7131-6.247-4.2447-10.026-4.2448H81.1152Zm125.6658 0c-3.81 0-7.455 1.5571-10.09 4.3108l-11.256 11.767c-2.51 2.624-3.9 6.122-3.873 9.752l.182 25.368h24.965l-.224-13.446c0-9.826 2.343-11.681 12.751-11.681h22.849c10.408 0 11.959 1.855 11.959 12.457v12.67h25.219v-25.373c0-3.627-1.413-7.112-3.938-9.717l-11.497-11.863c-2.63-2.713-6.247-4.2448-10.026-4.2448h-47.021Z"
3519
fill="currentColor"
3620
fillRule="evenodd"
3721
/>
@@ -66,19 +50,19 @@ export function LogoTextSVG({ className }: Props) {
6650
<title>Cossistant</title>
6751
<path
6852
d="M343.357 82.2021V116.814H320.283V98.0664C320.283 85.9523 312.207 79.0293 300.093 79.0293H275.865C262.597 79.0293 255.098 86.8175 255.098 99.7969V169.597C255.098 182.576 262.597 190.364 275.865 190.364H300.093C312.207 190.364 320.283 183.442 320.283 171.328V153.156H343.357V187.191L321.148 209.689H253.944L231.734 187.191V82.2021L253.944 59.7051H321.148L343.357 82.2021ZM485.31 87.6826V181.711L459.351 209.689H388.396L362.149 181.711V87.6826L388.396 59.7051H459.351L485.31 87.6826ZM614.289 82.2021V111.622H590.926V97.4893C590.926 85.6636 583.138 78.4531 571.312 78.4531H545.354C533.528 78.4533 526.317 85.6638 526.317 96.624V109.315L614.289 149.983V187.191L592.08 209.689H525.164L503.243 187.191V158.349H526.317V171.904C526.317 183.73 534.105 190.941 545.931 190.941H571.89C583.715 190.941 590.926 183.73 590.926 172.77V160.944L503.243 120.275V82.2021L525.164 59.7051H592.08L614.289 82.2021ZM746.542 82.2021V111.622H723.18V97.4893C723.18 85.6637 715.392 78.4532 703.566 78.4531H677.607C665.782 78.4531 658.571 85.6637 658.571 96.624V109.315L746.542 149.983V187.191L724.333 209.689H657.417L635.496 187.191V158.349H658.571V171.904C658.571 183.73 666.359 190.941 678.185 190.941H704.143C715.968 190.941 723.18 183.73 723.18 172.77V160.944L635.496 120.275V82.2021L657.417 59.7051H724.333L746.542 82.2021ZM791.672 209.689H768.598V59.7051H791.672V209.689ZM924.567 82.2021V111.622H901.204V97.4893C901.204 85.6636 893.416 78.4531 881.591 78.4531H855.633C843.807 78.4531 836.596 85.6637 836.596 96.624V109.315L924.567 149.983V187.191L902.358 209.689H835.442L813.521 187.191V158.349H836.596V171.904C836.596 183.73 844.383 190.941 856.209 190.941H882.168C893.994 190.941 901.204 183.73 901.204 172.77V160.944L813.521 120.275V82.2021L835.442 59.7051H902.358L924.567 82.2021ZM968.238 59.7051H1006.02V79.0303H968.238V165.848C968.238 181.423 976.026 189.787 990.159 189.787H1008.04V209.689H968.815L945.164 185.749V79.0303L945.163 59.7051L945.164 29.708H968.238V59.7051ZM1132.48 82.2021V209.689H1120.36L1112.58 196.421L1099.31 209.689H1043.64L1021.43 187.191V143.927L1043.64 121.718H1109.4V98.9316C1109.4 86.2407 1101.62 78.4532 1088.64 78.4531H1065.56C1053.74 78.4531 1045.95 85.6636 1045.95 97.4893V111.334H1022.58V82.2021L1044.79 59.7051H1110.56L1132.48 82.2021ZM1174.34 72.9727L1187.89 59.7051H1244.14L1270.38 87.6826V209.689H1247.31V107.584C1247.31 89.4132 1236.64 78.7414 1220.77 78.7412H1204.04C1188.18 78.7413 1177.51 89.4131 1177.51 107.584V209.689H1154.43V59.7051H1166.26L1174.34 72.9727ZM1314.49 59.7051H1352.28V79.0303H1314.49V165.848C1314.49 181.423 1322.28 189.787 1336.41 189.787H1354.3V209.689H1315.07L1291.42 185.749V79.0303L1291.42 59.7051L1291.42 29.708H1314.49V59.7051ZM1064.12 139.312C1051.72 139.312 1044.79 145.658 1044.79 156.618V173.059C1044.79 184.019 1051.43 190.941 1062.96 190.941H1083.73C1099.31 190.941 1109.4 180.845 1109.4 163.828V139.312H1064.12ZM414.067 79.0293C396.762 79.0293 385.513 89.9901 385.513 108.161V161.81C385.513 179.692 396.762 190.364 414.067 190.364H433.681C450.986 190.364 462.235 179.692 462.235 161.81V108.161C462.235 89.9901 450.986 79.0294 433.681 79.0293H414.067ZM800.036 19.6133L780.135 39.8037L759.944 19.6133L780.135 0L800.036 19.6133Z"
69-
fill="white"
53+
fill="currentColor"
7054
/>
7155
<path
7256
d="M0.268813 91.3819L34.5395 59.2561L149.718 59.2561L183.988 91.3819L183.988 210L149.718 210L34.5395 210L0.268809 178.228L0.268813 91.3819Z"
73-
fill="white"
57+
fill="currentColor"
7458
/>
7559
<path
7660
d="M95.6992 124.672L95.7955 138.043H108.954L108.836 130.956C108.836 125.777 110.07 124.799 115.556 124.799H127.599C133.086 124.799 133.903 125.777 133.903 131.364V138.043H147.195V124.669C147.195 122.757 146.451 120.92 145.12 119.547L139.06 113.295C137.674 111.865 135.767 111.057 133.775 111.057H108.992C106.983 111.057 105.062 111.878 103.674 113.33L97.7406 119.532C96.4177 120.914 95.6854 122.758 95.6992 124.672Z"
77-
fill="black"
61+
fill="transparent"
7862
/>
7963
<path
8064
d="M29.4619 124.672L29.5581 138.043H42.7162L42.5985 130.956C42.5985 125.777 43.8328 124.799 49.3191 124.799H61.362C66.8483 124.799 67.6657 125.777 67.6657 131.364V138.043H80.9576V124.669C80.9576 122.757 80.2134 120.92 78.8827 119.547L72.8228 113.295C71.4366 111.865 69.5299 111.057 67.5381 111.057H42.7545C40.746 111.057 38.8248 111.878 37.4364 113.33L31.5033 119.532C30.1804 120.914 29.4481 122.758 29.4619 124.672Z"
81-
fill="black"
65+
fill="transparent"
8266
/>
8367
</svg>
8468
);

‎apps/web/src/components/ui/three-logo.tsx‎

Lines changed: 0 additions & 196 deletions
This file was deleted.

0 commit comments

Comments
 (0)