Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 44fc3bb

Browse files
committedJul 7, 2024
feat: add template demos to free repo
1 parent 73e1712 commit 44fc3bb

11 files changed

+285
-0
lines changed
 

‎components/main-nav.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import Link from "next/link";
44
import { usePathname } from "next/navigation";
55
import { ExternalLinkIcon } from "@radix-ui/react-icons";
6+
import posthog from "posthog-js";
67

78
import { docsConfig } from "@/config/docs";
89
import { siteConfig } from "@/config/site";
@@ -27,6 +28,7 @@ export function MainNav() {
2728
<Link
2829
key={item.href}
2930
href={item.href!}
31+
onClick={() => item.event && posthog.capture(item.event)}
3032
target={item.external ? "_blank" : undefined}
3133
className={cn(
3234
"flex items-center justify-center transition-colors hover:text-foreground/80",

‎components/mdx-components.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import {
1111
AccordionTrigger,
1212
} from "@/components/ui/accordion";
1313
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
14+
import RepoDownload from "@/components/repo-download";
1415
import TechStack from "@/components/tech-stack";
16+
import TemplatePreview from "@/components/template-preview";
1517
import TweetCard from "@/registry/components/magicui/tweet-card";
1618

1719
import { ComponentInstallation } from "./component-installation";
@@ -43,6 +45,8 @@ const components = {
4345
AccordionItem,
4446
AccordionTrigger,
4547
TechStack,
48+
RepoDownload,
49+
TemplatePreview,
4650
h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
4751
<h1
4852
className={cn(

‎components/repo-download.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import Link from "next/link";
5+
import { ArrowRightIcon, Download } from "lucide-react";
6+
import { toast } from "sonner";
7+
8+
import { cn } from "@/lib/utils";
9+
import { Button, buttonVariants } from "@/components/ui/button";
10+
import { Icons } from "@/components/icons";
11+
12+
interface RepoDownloadProps {
13+
repo: string;
14+
owner: string;
15+
free?: boolean;
16+
}
17+
18+
export default function RepoDownload({
19+
repo,
20+
owner,
21+
free = false,
22+
}: RepoDownloadProps) {
23+
const [loading, setLoading] = useState(false);
24+
25+
const handleDownload = async () => {
26+
setLoading(true);
27+
28+
try {
29+
const response = await fetch(
30+
`${process.env.NEXT_PUBLIC_APP_URL}/api/repo/download`,
31+
{
32+
method: "POST",
33+
headers: {
34+
"Content-Type": "application/json",
35+
},
36+
body: JSON.stringify({ repo, owner }),
37+
},
38+
);
39+
if (!response.ok) {
40+
throw new Error(`HTTP error! status: ${response.status}`);
41+
}
42+
const data = await response.json();
43+
const downloadUrl = data.downloadUrl;
44+
/* window.open(downloadUrl, "_blank"); */
45+
window.location.href = downloadUrl;
46+
} catch (error) {
47+
toast.error("Error occured while downloading. Please try again.");
48+
console.error("error", error);
49+
} finally {
50+
setLoading(false);
51+
}
52+
};
53+
54+
if (free) {
55+
return (
56+
<Button
57+
onClick={handleDownload}
58+
disabled={loading}
59+
className="not-prose group relative w-full gap-2"
60+
>
61+
{loading ? "Downloading" : "Free Download"}
62+
{!loading && <Download className="size-4" />}
63+
{loading && <Icons.spinner className="size-4 animate-spin" />}
64+
</Button>
65+
);
66+
}
67+
68+
return (
69+
<Link
70+
href="https://pro.magicui.design/pricing"
71+
target="_blank"
72+
className={cn(
73+
buttonVariants({
74+
variant: "default",
75+
}),
76+
"not-prose group relative w-full gap-1",
77+
)}
78+
>
79+
Buy Now
80+
<ArrowRightIcon className="size-4 transition-all duration-300 ease-out group-hover:translate-x-1" />
81+
</Link>
82+
);
83+
}

‎components/sidebar-nav.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
import Link from "next/link";
44
import { usePathname } from "next/navigation";
55
import { SidebarNavItem } from "@/types";
6+
import { ExternalLinkIcon } from "@radix-ui/react-icons";
7+
import posthog from "posthog-js";
68

79
import { cn } from "@/lib/utils";
810

@@ -45,6 +47,7 @@ export function DocsSidebarNavItems({
4547
<Link
4648
key={index}
4749
href={item.href}
50+
onClick={() => item.event && posthog.capture(item.event)}
4851
className={cn(
4952
"group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
5053
item.disabled && "cursor-not-allowed opacity-60",
@@ -61,6 +64,7 @@ export function DocsSidebarNavItems({
6164
{item.label}
6265
</span>
6366
)}
67+
{item.external && <ExternalLinkIcon className="ml-2 size-4" />}
6468
</Link>
6569
) : (
6670
<span

‎components/template-preview.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ReactNode } from "react";
2+
import Link from "next/link";
3+
import { ExternalLinkIcon } from "@radix-ui/react-icons";
4+
5+
import { cn } from "@/lib/utils";
6+
import { buttonVariants } from "@/components/ui/button";
7+
8+
export default function TemplatePreview({
9+
href,
10+
children,
11+
}: {
12+
href: string;
13+
children: ReactNode;
14+
}) {
15+
return (
16+
<Link
17+
className={cn(
18+
buttonVariants({
19+
variant: "outline",
20+
}),
21+
"not-prose group relative w-full gap-2",
22+
)}
23+
href={href}
24+
target="_blank"
25+
>
26+
{children}
27+
<ExternalLinkIcon className="size-4" />
28+
</Link>
29+
);
30+
}

‎config/docs.ts

+36
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const docsConfig: DocsConfig = {
1515
title: "Templates",
1616
href: "https://pro.magicui.design",
1717
external: true,
18+
event: "header_cta_clicked",
1819
},
1920
],
2021
sidebarNav: [
@@ -54,6 +55,41 @@ export const docsConfig: DocsConfig = {
5455
},
5556
],
5657
},
58+
{
59+
title: "Templates",
60+
items: [
61+
{
62+
title: "Portfolio",
63+
href: `/docs/templates/portfolio`,
64+
items: [],
65+
label: "New",
66+
event: "template_portfolio_clicked",
67+
},
68+
{
69+
title: "Startup",
70+
href: `/docs/templates/startup`,
71+
items: [],
72+
label: "",
73+
event: "template_startup_clicked",
74+
},
75+
{
76+
title: "SaaS",
77+
href: `/docs/templates/saas`,
78+
items: [],
79+
disabled: true,
80+
label: "Coming soon",
81+
event: "template_saas_clicked",
82+
},
83+
{
84+
title: "Mobile App",
85+
href: `/docs/templates/app`,
86+
items: [],
87+
disabled: true,
88+
label: "Coming soon",
89+
event: "template_app_clicked",
90+
},
91+
],
92+
},
5793
{
5894
title: "Components",
5995
items: [

‎content/docs/templates/portfolio.mdx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Portfolio Template
3+
date: 2024-06-18
4+
description: A minimal portfolio template to showcase your work and experience
5+
author: dillionverma
6+
published: true
7+
---
8+
9+
<div className="flex max-w-[800px] flex-col gap-4">
10+
<video
11+
autoPlay
12+
loop
13+
muted
14+
src="/portfolio-demo.mp4"
15+
className="w-full rounded-xl border shadow-2xl"
16+
/>
17+
<div className="flex w-full flex-col gap-2 sm:flex-row">
18+
<RepoDownload repo={"portfolio"} owner={"dillionverma"} free />
19+
<TemplatePreview href="https://portfolio-magicui.vercel.app/">
20+
Live Preview{" "}
21+
</TemplatePreview>
22+
</div>
23+
</div>
24+
25+
### What is this?
26+
27+
A complete template to market yourself and your portfolio to the world as a developer
28+
29+
### Why should I use this?
30+
31+
- ✅ Save 100+ hours of work
32+
- ✅ No need to learn advanced animations
33+
- ✅ Easy to configure and change
34+
- ✅ 1-click download and setup.
35+
- ✅ 5 minutes to update the text and images.
36+
- ✅ Deploy live to vercel
37+
38+
### Features
39+
40+
- Hero Section
41+
- About Section
42+
- Work Section
43+
- Education Section
44+
- Projects Section
45+
- Hackathon Section
46+
- Contact Section
47+
- Blog
48+
49+
### Tech Stack
50+
51+
<TechStack
52+
technologies={[
53+
"nextjs",
54+
"react",
55+
"typescript",
56+
"tailwindcss",
57+
"framermotion",
58+
"shadcn",
59+
]}
60+
/>

‎content/docs/templates/startup.mdx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Startup Template
3+
date: 2024-04-12
4+
description: The best landing page template for launching new ideas. Perfect for bootstrappers and pre-PMF VC backed startups.
5+
author: dillionverma
6+
published: true
7+
---
8+
9+
<div className="flex max-w-[800px] flex-col gap-4">
10+
<video
11+
autoPlay
12+
loop
13+
muted
14+
src="/startup-template-demo.mp4"
15+
className="w-full rounded-xl border shadow-2xl"
16+
/>
17+
<div className="flex w-full flex-col gap-2 sm:flex-row">
18+
<RepoDownload repo={"startup-template"} owner={"dillionverma"} />
19+
<TemplatePreview href="https://startup-template-sage.vercel.app/">
20+
Live Preview{" "}
21+
</TemplatePreview>
22+
</div>
23+
</div>
24+
25+
### What is this?
26+
27+
A complete landing page template to launch a new project or idea (frontend only). Uses the latest frontend technologies and best practices to unblock you and delight your customers.
28+
29+
### Who is this for?
30+
31+
You are an indiehacker, bootstrapper, YC startup, solopreneur, VC-backed startup, developer, or student. You are thinking about launching a new idea or already have a prototype. Maybe it's an AI SaaS, a crazy drone robot company, or just a simple digital product. But... you dread the idea of learning react or anything frontend 😩
32+
33+
**This template is exactly what you're looking for.**
34+
35+
### Why should I use this?
36+
37+
- ✅ Save 100+ hours of work
38+
- ✅ No need to learn advanced animations
39+
- ✅ Easy to configure and change
40+
- ✅ 1-click download and setup.
41+
- ✅ 5 minutes to update the text and images.
42+
- ✅ Deploy live to vercel
43+
44+
### Features
45+
46+
- Header Section
47+
- Hero Section
48+
- Social Proof Section
49+
- Pricing Section
50+
- Call To Action Section
51+
- Footer Section
52+
- Mobile Reponsive Navbar
53+
54+
### Tech Stack
55+
56+
<TechStack
57+
technologies={[
58+
"nextjs",
59+
"react",
60+
"typescript",
61+
"tailwindcss",
62+
"framermotion",
63+
"shadcn",
64+
]}
65+
/>

‎public/portfolio-demo.mp4

1.82 MB
Binary file not shown.

‎public/portfolio-template-demo.mp4

-59.6 KB
Binary file not shown.

‎types/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface NavItem {
77
external?: boolean;
88
icon?: keyof typeof Icons;
99
label?: string;
10+
event?: string;
1011
}
1112

1213
export interface NavItemWithChildren extends NavItem {

0 commit comments

Comments
 (0)