Skip to content

Commit 43b8071

Browse files
ken-matsuiken-matsui
authored
chore: improve top UI (#1042)
1 parent 1946024 commit 43b8071

File tree

4 files changed

+382
-106
lines changed

4 files changed

+382
-106
lines changed

‎app/_components/footer.tsx‎

Lines changed: 104 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,116 @@
11
import { faGithub } from "@fortawesome/free-brands-svg-icons";
2-
import { faBookOpen, faHeart } from "@fortawesome/free-solid-svg-icons";
2+
import {
3+
faBookOpen,
4+
faHeart,
5+
faHouseChimneyWindow,
6+
} from "@fortawesome/free-solid-svg-icons";
37
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
48
import { Button, Divider, Link } from "@heroui/react";
59

610
export function Footer() {
711
return (
8-
<footer className="container mx-auto max-w-7xl pb-12 px-12">
9-
<div className="flex flex-col justify-center items-center gap-4">
10-
{/* Mobile navigation - only shown on small screens */}
11-
<div className="flex sm:hidden gap-4">
12-
<Button
13-
as={Link}
14-
href="https://docs.cabinpkg.com"
15-
isExternal
16-
variant="light"
17-
size="sm"
18-
className="text-default-600 hover:text-primary transition-colors"
19-
startContent={
20-
<FontAwesomeIcon
21-
icon={faBookOpen}
22-
className="text-sm"
23-
/>
24-
}
25-
>
26-
Docs
27-
</Button>
28-
<Button
29-
as={Link}
30-
href="https://github.com/cabinpkg"
31-
isExternal
32-
variant="light"
33-
size="sm"
34-
className="text-default-600 hover:text-primary transition-colors"
35-
startContent={
36-
<FontAwesomeIcon
37-
icon={faGithub}
38-
className="text-sm"
39-
/>
40-
}
41-
>
42-
GitHub
43-
</Button>
44-
<Button
45-
as={Link}
46-
href="https://github.com/sponsors/ken-matsui"
47-
isExternal
48-
color="danger"
49-
variant="flat"
50-
size="sm"
51-
className="font-medium shadow-sm hover:shadow-md transition-shadow"
52-
startContent={
53-
<FontAwesomeIcon
54-
icon={faHeart}
55-
className="text-sm animate-pulse"
56-
/>
57-
}
58-
>
59-
Sponsor
60-
</Button>
61-
</div>
12+
<footer className="bg-gradient-to-t from-default-100/50 to-background border-t border-divider">
13+
<div className="container mx-auto max-w-7xl px-6 py-16">
14+
<div className="flex flex-col items-center text-center space-y-8">
15+
{/* Logo and tagline */}
16+
<div className="flex flex-col items-center space-y-4">
17+
<div className="flex items-center gap-3">
18+
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg shadow-sm">
19+
<FontAwesomeIcon
20+
icon={faHouseChimneyWindow}
21+
className="text-white text-sm"
22+
/>
23+
</div>
24+
<h3 className="text-2xl font-bold bg-gradient-to-r from-primary-600 to-secondary-600 bg-clip-text text-transparent">
25+
Cabin
26+
</h3>
27+
</div>
28+
<p className="text-default-600 max-w-md">
29+
Modern, intuitive, and lightning-fast package
30+
manager for C++ developers.
31+
</p>
32+
</div>
33+
34+
{/* Mobile navigation - only shown on small screens */}
35+
<div className="flex sm:hidden flex-wrap justify-center gap-3">
36+
<Button
37+
as={Link}
38+
href="https://docs.cabinpkg.com"
39+
isExternal
40+
variant="flat"
41+
size="sm"
42+
className="text-default-600 hover:text-primary bg-default-100 hover:bg-primary/10 transition-all"
43+
startContent={
44+
<FontAwesomeIcon
45+
icon={faBookOpen}
46+
className="text-sm"
47+
/>
48+
}
49+
>
50+
Documentation
51+
</Button>
52+
<Button
53+
as={Link}
54+
href="https://github.com/cabinpkg"
55+
isExternal
56+
variant="flat"
57+
size="sm"
58+
className="text-default-600 hover:text-primary bg-default-100 hover:bg-primary/10 transition-all"
59+
startContent={
60+
<FontAwesomeIcon
61+
icon={faGithub}
62+
className="text-sm"
63+
/>
64+
}
65+
>
66+
GitHub
67+
</Button>
68+
<Button
69+
as={Link}
70+
href="https://github.com/sponsors/ken-matsui"
71+
isExternal
72+
color="danger"
73+
variant="flat"
74+
size="sm"
75+
className="font-medium shadow-sm hover:shadow-md transition-shadow"
76+
startContent={
77+
<FontAwesomeIcon
78+
icon={faHeart}
79+
className="text-sm animate-pulse"
80+
/>
81+
}
82+
>
83+
Sponsor
84+
</Button>
85+
</div>
6286

63-
{/* Divider for mobile */}
64-
<Divider className="sm:hidden" />
87+
{/* Divider */}
88+
<div className="w-full max-w-xs">
89+
<Divider className="bg-gradient-to-r from-transparent via-default-300 to-transparent" />
90+
</div>
6591

66-
{/* Copyright */}
67-
<p className="text-sm text-default-400 text-center">
68-
© 2018-{new Date().getFullYear()}{" "}
69-
<Link
70-
isExternal
71-
aria-label="Ken Matsui"
72-
className="text-sm text-default-400"
73-
href="https://github.com/ken-matsui"
74-
>
75-
Ken Matsui
76-
</Link>
77-
</p>
92+
{/* Copyright and links */}
93+
<div className="flex flex-col items-center space-y-3">
94+
<p className="text-sm text-default-500">
95+
Built by{" "}
96+
<Link
97+
isExternal
98+
href="https://github.com/ken-matsui"
99+
className="text-primary hover:text-primary-600 transition-colors font-medium"
100+
>
101+
Ken Matsui
102+
</Link>
103+
</p>
104+
<p className="text-xs text-default-400">
105+
© 2018-{new Date().getFullYear()} Cabin. All rights
106+
reserved.
107+
</p>
108+
</div>
109+
</div>
78110
</div>
111+
112+
{/* Background decoration */}
113+
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[400px] h-[200px] bg-gradient-to-t from-primary/5 to-transparent rounded-full blur-3xl -z-10" />
79114
</footer>
80115
);
81116
}

0 commit comments

Comments
 (0)