Skip to content

Commit 9d5b184

Browse files
mehdibhamehdibha
committed
feat: enhance ui
1 parent ef4ecd6 commit 9d5b184

File tree

22 files changed

+413
-154
lines changed

22 files changed

+413
-154
lines changed

‎src/app/(docs)/layout.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { DocsSidebar } from "@/components/docs-sidebar";
2+
import { SearchCommand } from "@/components/search-command";
23
import { ScrollArea } from "@/components/ui/scroll-area";
34
import { docsConfig } from "@/config/docs-config";
45

@@ -10,8 +11,9 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
1011
return (
1112
<div className="border-b">
1213
<div className="container items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 ">
13-
<aside className="z-30 hidden md:sticky md:top-0 md:block">
14-
<ScrollArea className="h-screen pb-8 pr-2">
14+
<aside className="z-30 hidden pt-6 md:sticky md:top-0 md:block">
15+
<SearchCommand />
16+
<ScrollArea className="mt-1 h-screen pb-8 pr-2">
1517
<DocsSidebar items={docsConfig.sidebarNav} />
1618
</ScrollArea>
1719
</aside>

‎src/app/page.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Brands } from "@/components/marketing/brands";
22
import { CallToAction } from "@/components/marketing/cta";
3-
import { Features } from "@/components/marketing/features";
3+
import { Explore } from "@/components/marketing/explore";
44
import { Hero } from "@/components/marketing/hero";
55

66
export default function HomePage() {
77
return (
8-
<main className="container pb-36 pt-24">
8+
<main className="container pb-36 pt-16">
99
<Hero />
1010
<Brands className="mt-24" />
11-
<Features className="mt-32" />
11+
<Explore className="mx-auto mt-24 max-w-6xl" />
1212
<CallToAction className="mt-40" />
1313
</main>
1414
);

‎src/assets/images/brands/framer.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import * as React from "react";
33
export const FramerLogo = (
44
props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
55
) => (
6-
<svg xmlns="http:www.w3.org/2000/svg" viewBox="0 0 14 21" {...props}>
7-
<path fill="currentColor" d="M0 0h14v7H7zm0 7h7l7 7H7v7l-7-7z" />
6+
<svg
7+
xmlns="http:www.w3.org/2000/svg"
8+
viewBox="0 0 14 21"
9+
fill="currentColor"
10+
{...props}
11+
>
12+
<path d="M0 0h14v7H7zm0 7h7l7 7H7v7l-7-7z" />
813
</svg>
914
);

‎src/components/docs-sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function DocsSidebar({ items }: DocsSidebarProps) {
2020
const pathname = usePathname();
2121

2222
return items.length > 0 ? (
23-
<div className="w-full space-y-4 pb-10 pt-6 text-sm">
23+
<div className="w-full space-y-4 pb-10 pr-4 pt-4 text-sm">
2424
{items.map((item, index) => (
2525
<Category
2626
key={index}

‎src/components/header.tsx

+12-39
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import Image from "next/image";
55
import Link from "next/link";
66
import { usePathname } from "next/navigation";
77
import { motion, useAnimate } from "framer-motion";
8-
import { MenuIcon, SearchIcon } from "lucide-react";
9-
import { SearchDialog } from "@/components/search-command";
8+
import { MenuIcon } from "lucide-react";
9+
import { GitHubIcon, TwitterIcon } from "@/components/icons";
1010
import { Button } from "@/components/ui/button";
1111
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
1212
import { useScroll } from "@/hooks/use-scroll";
@@ -17,9 +17,7 @@ const config = siteConfig.header;
1717

1818
export const Header = () => {
1919
const { scrolled } = useScroll();
20-
const [searchOpen, setSearchOpen] = React.useState(false);
2120
const [refLogo, animate] = useAnimate();
22-
const [refCTA] = useAnimate();
2321

2422
React.useEffect(() => {
2523
void animate(
@@ -30,14 +28,6 @@ export const Header = () => {
3028
},
3129
{ duration: 0.3 }
3230
);
33-
void animate(
34-
refCTA.current,
35-
{
36-
x: scrolled ? 120 : 180,
37-
opacity: scrolled ? 1 : 0,
38-
},
39-
{ duration: 0.3 }
40-
);
4131
// eslint-disable-next-line react-hooks/exhaustive-deps
4232
}, [scrolled]);
4333

@@ -81,7 +71,7 @@ export const Header = () => {
8171
<div
8272
suppressHydrationWarning
8373
className={cn("relative transition-all duration-300", {
84-
"ml-[38px] mr-[120px]": scrolled,
74+
"ml-[38px]": scrolled,
8575
})}
8676
>
8777
<motion.div
@@ -100,22 +90,6 @@ export const Header = () => {
10090
</Link>
10191
</motion.div>
10292
<Nav items={config.nav.links} />
103-
<motion.div
104-
ref={refCTA}
105-
className="absolute right-0"
106-
initial={{ x: 0, y: -28, opacity: 0 }}
107-
>
108-
<Button
109-
size="sm"
110-
variant="secondary"
111-
onClick={() => {
112-
setSearchOpen(true);
113-
}}
114-
>
115-
<SearchIcon size={18} className="mr-2" />
116-
<span>Search</span>
117-
</Button>
118-
</motion.div>
11993
</div>
12094
</div>
12195
</div>
@@ -129,21 +103,20 @@ export const Header = () => {
129103
)}
130104
>
131105
<div className="flex items-center space-x-2">
132-
<Button
133-
size="sm"
134-
variant="secondary"
135-
onClick={() => {
136-
setSearchOpen(true);
137-
}}
138-
>
139-
<SearchIcon size={18} className="mr-2" />
140-
<span>Search</span>
106+
<Button asChild size="icon" variant="ghost" className="h-8 w-8">
107+
<Link href={siteConfig.links.github} target="_blank">
108+
<GitHubIcon size={18} />
109+
</Link>
110+
</Button>
111+
<Button asChild size="icon" variant="ghost" className="h-8 w-8">
112+
<Link href={siteConfig.links.twitter} target="_blank">
113+
<TwitterIcon size={18} />
114+
</Link>
141115
</Button>
142116
</div>
143117
</div>
144118
<MobileNav />
145119
</div>
146-
<SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
147120
</header>
148121
);
149122
};

‎src/components/icons/github-icon.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { type SVGProps } from "react";
2+
3+
interface IconProps extends Partial<SVGProps<SVGSVGElement>> {
4+
size?: string | number;
5+
}
6+
7+
export const GitHubIcon = ({ color = "currentColor", size = 24, ...rest }: IconProps) => {
8+
return (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 24 24"
12+
width={size}
13+
height={size}
14+
fill={color}
15+
{...rest}
16+
>
17+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
18+
</svg>
19+
);
20+
};

‎src/components/icons/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { GitHubIcon } from "./github-icon";
2+
export { TwitterIcon } from "./twitter-icon";

‎src/components/icons/twitter-icon.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { type SVGProps } from "react";
2+
3+
interface IconProps extends Partial<SVGProps<SVGSVGElement>> {
4+
size?: string | number;
5+
}
6+
7+
export const TwitterIcon = ({
8+
color = "currentColor",
9+
size = 24,
10+
...rest
11+
}: IconProps) => {
12+
return (
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 0 24 24"
16+
width={size}
17+
height={size}
18+
fill={color}
19+
{...rest}
20+
>
21+
<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
22+
</svg>
23+
);
24+
};

‎src/components/marketing/brands.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ import { UseHooksLogo } from "@/assets/images/brands/usehooks";
99
export const Brands = ({ className }: { className?: string }) => {
1010
return (
1111
<div className={cn("flex flex-wrap items-center justify-center gap-8 ", className)}>
12-
<TailwindLogo className="h-6 fill-muted-foreground md:h-8" />
13-
<NextjsLogo className="h-5 fill-muted-foreground md:h-7" />
14-
<div className="flex items-center space-x-3">
15-
<FramerLogo className="h-6 fill-muted-foreground md:h-8" />
12+
<TailwindLogo className="h-4 fill-muted-foreground md:h-6" />
13+
<NextjsLogo className="h-4 fill-muted-foreground md:h-6" />
14+
<FramerLogo className="h-4 fill-muted-foreground md:h-6" />
15+
<ShadcnLogo className="h-4 fill-muted-foreground md:h-6" />
16+
{/* <div className="flex items-center space-x-3">
1617
<span className="font-display text-2xl font-bold tracking-tighter text-muted-foreground">
1718
Motion
1819
</span>
1920
</div>
2021
<div className="flex items-center space-x-2">
21-
<ShadcnLogo className="h-6 fill-muted-foreground md:h-8" />
2222
<span className="font-sans text-3xl font-bold text-muted-foreground">
2323
shadcn/ui
2424
</span>
25-
</div>
26-
<UseHooksLogo className="h-5 fill-muted-foreground md:h-7" />
25+
</div> */}
26+
<UseHooksLogo className="h-4 fill-muted-foreground md:h-6" />
2727
</div>
2828
);
2929
};

‎src/components/marketing/cta.tsx

+29-8
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,46 @@
11
import React from "react";
2-
import { Button } from "@/components/ui/button";
2+
import Link from "next/link";
33
import { cn } from "@/utils/classes";
4+
import { siteConfig } from "@/config";
5+
import { GitHubIcon } from "../icons";
46

57
interface CallToActionProps {
68
className?: string;
79
}
810

911
export const CallToAction = (props: CallToActionProps) => {
1012
const { className } = props;
13+
const stars = 3; // TODO: make this dynamic
14+
1115
return (
12-
<section className={cn("px-6 text-center", className)}>
13-
<h2 className="mx-auto mt-8 max-w-2xl text-4xl font-bold tracking-tight lg:text-5xl">
14-
Proudly open source
16+
<section className={cn("mx-auto max-w-2xl px-6 text-center", className)}>
17+
<h2 className="mx-auto mt-8 max-w-2xl text-3xl font-bold tracking-tighter lg:text-5xl">
18+
Proudly open-source
1519
</h2>
1620
<p className="mt-4 text-lg text-muted-foreground">
17-
rCopy is open source and free. The code is available on GitHub.
21+
Our source code is available on GitHub - feel free to read, review, or contribute
22+
to it however you want!
1823
</p>
1924
<div className="mt-10 flex justify-center space-x-2">
20-
<Button variant="secondary" size="lg">
21-
Star on GitHub
22-
</Button>
25+
{stars && (
26+
<Link
27+
href={siteConfig.links.github}
28+
target="_blank"
29+
rel="noreferrer"
30+
className="group flex"
31+
>
32+
<div className="flex h-10 items-center justify-center space-x-2 rounded-md bg-secondary px-4 text-secondary-foreground group-hover:bg-secondary/80">
33+
<GitHubIcon size={18} />
34+
<span>Star us on GitHub</span>
35+
</div>
36+
<div className="flex items-center">
37+
<div className="h-4 w-4 border-y-8 border-l-0 border-r-8 border-solid border-secondary border-y-transparent group-hover:border-secondary/80 group-hover:border-y-transparent " />
38+
<div className="flex h-10 items-center rounded-md bg-secondary px-4 font-medium text-secondary-foreground group-hover:bg-secondary/80">
39+
{stars}
40+
</div>
41+
</div>
42+
</Link>
43+
)}
2344
</div>
2445
</section>
2546
);

‎src/components/marketing/explore.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
export const Explore = ({ className }: { className: string }) => {
2+
return (
3+
<div className={className}>
4+
<h2 className="text-3xl font-semibold">Explore</h2>
5+
<div className="mt-6 -space-y-2">
6+
<div>
7+
<h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
8+
components
9+
</h3>
10+
<div className="border-l border-muted pb-8 pl-6 pt-4">
11+
<GridItems />
12+
</div>
13+
</div>
14+
<div>
15+
<h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
16+
hooks
17+
</h3>
18+
<div className="border-l border-muted pb-8 pl-6 pt-4">
19+
<GridItems />
20+
</div>
21+
</div>
22+
<div>
23+
<h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
24+
blocks
25+
</h3>
26+
<div className="border-l border-muted pb-8 pl-6 pt-4">
27+
<GridItems />
28+
</div>
29+
</div>
30+
<div>
31+
<h3 className="category-xl pl-6 font-mono text-xl tracking-widest text-muted-foreground">
32+
Animations
33+
</h3>
34+
<div className="border-l border-muted pb-1 pl-6 pt-4">
35+
<GridItems />
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
const GridItems = () => {
44+
return (
45+
<div className="grid grid-cols-6 items-center gap-4">
46+
{Array.from({ length: 6 }).map((_, index) => (
47+
<div key={index} className="flex h-44 rounded-lg bg-card">
48+
<span className="text-sm"></span>
49+
</div>
50+
))}
51+
</div>
52+
);
53+
};

0 commit comments

Comments
 (0)