Skip to content

Commit 5518b91

Browse files
dillionvermadillionverma
authored
✨ feat: add tweet card and more (magicuidesign#6)
* ✨ feat: add tweet card and more * 🐛 fix: change date
1 parent 17f1bdd commit 5518b91

32 files changed

+865
-311
lines changed

Diff for: ‎app/(auth)/login/page.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,13 @@ export default function LoginPage() {
2525
Back
2626
</>
2727
</Link>
28-
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
29-
<div className="flex flex-col space-y-2 text-center">
28+
<div className="mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]">
29+
<div className="flex flex-col gap-2 text-center">
3030
<Icons.logo className="mx-auto h-6 w-6" />
3131
<h1 className="text-2xl font-semibold tracking-tight">
3232
Welcome back
3333
</h1>
34-
<p className="text-sm text-muted-foreground">
35-
Enter your email to sign in to your account
36-
</p>
34+
<p className="text-sm text-muted-foreground">Login to your account</p>
3735
</div>
3836
<UserAuthForm />
3937
<p className="px-8 text-center text-sm text-muted-foreground">

Diff for: ‎app/(docs)/components/[slug]/page.tsx

+4-15
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@ import Twitter from "@/components/icons/twitter";
44
import { Mdx } from "@/components/mdx-components";
55
import { DashboardTableOfContents } from "@/components/toc";
66
import { ScrollArea } from "@/components/ui/scroll-area";
7-
import { getCurrentUser } from "@/lib/session";
8-
import { getUserPayments } from "@/lib/stripe-utils";
97
import { getTableOfContents } from "@/lib/toc";
108
import { absoluteUrl, cn, constructMetadata } from "@/lib/utils";
11-
import { Payment } from "@prisma/client";
129
import { allComponents } from "contentlayer/generated";
1310
import { ChevronRight } from "lucide-react";
1411
import type { Metadata } from "next";
@@ -80,13 +77,6 @@ interface Props {
8077
}
8178

8279
export default async function Component({ params }: Props) {
83-
const user = await getCurrentUser();
84-
const { payments } = await getUserPayments(user?.id!);
85-
86-
const paid = payments.some(
87-
(payment: Payment) => payment.status === "succeeded",
88-
);
89-
9080
const component = allComponents.find(
9181
(component) => component.slugAsParams === params.slug,
9282
);
@@ -98,17 +88,16 @@ export default async function Component({ params }: Props) {
9888

9989
return (
10090
<main
101-
className={cn(
102-
"relative py-6 lg:gap-10 lg:py-8 xl:grid ",
103-
"xl:grid-cols-[1fr_300px]",
104-
)}
91+
className={cn("relative py-6 lg:gap-10 lg:py-8 xl:grid ", {
92+
"xl:grid-cols-[1fr_300px]": component.toc,
93+
})}
10594
>
10695
<div className="mx-auto w-full">
10796
{/* Breadcrumb */}
10897
<div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
10998
<Link
11099
href="/components"
111-
className="transition-colors hover:text-foreground/80"
100+
className="transition-colors hover:text-foreground/80"
112101
>
113102
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
114103
Components

Diff for: ‎app/(docs)/templates/page.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import { Component } from "@/.contentlayer/generated";
22
import { constructMetadata } from "@/lib/utils";
33
import FadeIn from "@/registry/components/magicui/fade-in";
4+
import HeroVideo, {
5+
HeroVideoAction,
6+
} from "@/registry/components/magicui/hero-video";
7+
import {
8+
MagicCard,
9+
MagicContainer,
10+
} from "@/registry/components/magicui/magic-card";
11+
import ShimmerButton from "@/registry/components/magicui/shimmer-button";
412
import Link from "next/link";
513

614
export const metadata = constructMetadata({
@@ -24,6 +32,48 @@ export default async function TemplatePage() {
2432
</div>
2533
</div>
2634
<hr className="my-8" />
35+
36+
<MagicContainer>
37+
<MagicCard className="flex flex-col items-center justify-center p-4">
38+
<h2>this is a test card</h2>
39+
<ShimmerButton>
40+
<svg
41+
xmlns="http://www.w3.org/2000/svg"
42+
viewBox="0 0 24 24"
43+
fill="currentColor"
44+
className="h-6 w-6 dark:text-white"
45+
>
46+
<path
47+
fillRule="evenodd"
48+
d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
49+
clipRule="evenodd"
50+
/>
51+
</svg>
52+
</ShimmerButton>
53+
</MagicCard>
54+
</MagicContainer>
55+
<HeroVideo
56+
title="Magic UI Demo"
57+
image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
58+
video="https://cdn.magicuikit.com/globe.mp4"
59+
>
60+
<HeroVideoAction>
61+
<ShimmerButton>
62+
<svg
63+
xmlns="http://www.w3.org/2000/svg"
64+
viewBox="0 0 24 24"
65+
fill="currentColor"
66+
className="h-6 w-6 dark:text-white"
67+
>
68+
<path
69+
fillRule="evenodd"
70+
d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
71+
clipRule="evenodd"
72+
/>
73+
</svg>
74+
</ShimmerButton>
75+
</HeroVideoAction>
76+
</HeroVideo>
2777
{posts?.length ? (
2878
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
2979
{posts.map((post, index) => (

Diff for: ‎app/(marketing)/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default async function Home() {
66
<>
77
<Hero />
88
<Testimonials />
9+
{/* <FeatureSections /> */}
910
{/* <Faq /> */}
1011
</>
1112
);

Diff for: ‎app/(marketing)/pricing/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default function Buy() {
3434
</p>
3535
</FadeIn>
3636
</div>
37-
<MagicContainer className="mx-auto mt-16 w-full max-w-[400px]">
37+
<MagicContainer className="mx-auto mt-16 grid w-full grid-cols-1 place-items-center gap-8">
3838
{plans.map((item, idx) => (
39-
<PriceCard key={idx} item={item} />
39+
<PriceCard key={idx} item={item} className="max-w-[400px]" />
4040
))}
4141
</MagicContainer>
4242
</div>

Diff for: ‎app/(marketing)/not-found.tsx renamed to ‎app/not-found.tsx

File renamed without changes.

Diff for: ‎components.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"tailwind": {
66
"config": "tailwind.config.js",
77
"css": "app/globals.css",
8-
"baseColor": "slate",
8+
"baseColor": "neutral",
99
"cssVariables": true
1010
},
1111
"aliases": {

Diff for: ‎components/component-source.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
99
src: string;
1010
}
1111

12+
const Preview = ({ className }: { className?: string }) => {
13+
return (
14+
<>
15+
<PreOrder />
16+
</>
17+
);
18+
};
19+
1220
export function ComponentSource({
1321
children,
1422
className,
@@ -21,11 +29,11 @@ export function ComponentSource({
2129
);
2230

2331
if (status === "loading") return null;
24-
if (status === "unauthenticated") return <PreOrder />;
32+
if (status === "unauthenticated") return <Preview />;
2533
if (isLoading) return null;
2634

2735
// TODO: Make this cleaner
28-
if (data?.user?.customer.payments.length === 0) return <PreOrder />;
36+
if (data?.user?.customer.payments.length === 0) return <Preview />;
2937

3038
return (
3139
<CodeBlockWrapper

Diff for: ‎components/component-wrapper.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const ComponentWrapper = ({ className, children }: ComponentWrapperProps) => {
88
return (
99
<div
1010
className={cn(
11-
"not-prose max-w-screen relative flex flex-col items-center justify-center rounded-xl border bg-background p-8 md:p-20",
11+
"not-prose max-w-screen relative flex flex-col items-center justify-center rounded-xl border bg-background p-8 md:p-16",
1212
className,
1313
)}
1414
>

Diff for: ‎components/landing/feature-sections.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import { Icons } from "@/components/icons";
4+
import { buttonVariants } from "@/components/ui/button";
5+
import { cn } from "@/lib/utils";
6+
import { List } from "lucide-react";
7+
import Link from "next/link";
8+
9+
const features = [
10+
{
11+
id: "feature-openai",
12+
header: "Analyze",
13+
name: "Advanced OpenAI API Dashboard",
14+
description:
15+
"Just enter your OpenAI API key, and we fetch your data from the OpenAI API directly to create a dashboard. No need to install anything.",
16+
// icon: Icons.openai,
17+
video: "https://cdn.llm.report/openai-demo.mp4",
18+
cta: "Get Started",
19+
href: "/login",
20+
reverse: false,
21+
},
22+
{
23+
id: "feature-logs",
24+
header: "Optimize",
25+
name: "Log your prompts and completions",
26+
description:
27+
"Change 1 line in your code and start logging your API requests. Optimize your token usage and start saving money.",
28+
icon: List,
29+
video: "https://cdn.llm.report/logs-demo.mp4",
30+
cta: "Get Started",
31+
href: "/login",
32+
reverse: true,
33+
},
34+
{
35+
id: "feature-users",
36+
header: "Minimize",
37+
name: "Measure Cost Per User",
38+
description:
39+
"Analyze your cost per user and adjust your pricing to maximize revenue.",
40+
icon: Icons.user,
41+
video: "https://cdn.llm.report/users-demo.mp4",
42+
cta: "Get Started",
43+
href: "/login",
44+
reverse: false,
45+
},
46+
];
47+
48+
const FeatureSections = () => {
49+
return (
50+
<>
51+
{features.map((feature) => (
52+
<section id={feature.id} key={feature.id} className="container mx-auto">
53+
<div className="mx-auto px-6 py-6 sm:py-20">
54+
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
55+
<div
56+
className={cn("m-auto lg:col-span-2", {
57+
"lg:order-last": feature.reverse,
58+
})}
59+
>
60+
<h2 className="text-base font-semibold leading-7 text-orange-600">
61+
{feature.header}
62+
</h2>
63+
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
64+
{feature.name}
65+
</p>
66+
<p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">
67+
{feature.description}
68+
</p>
69+
<Link
70+
className={cn(
71+
buttonVariants({
72+
variant: "default",
73+
size: "lg",
74+
}),
75+
"mt-8",
76+
)}
77+
href={feature.href}
78+
>
79+
{feature.cta}
80+
</Link>
81+
</div>
82+
<video
83+
src={feature.video}
84+
autoPlay
85+
loop
86+
muted
87+
className="m-auto rounded-xl border shadow-2xl lg:col-span-3"
88+
/>
89+
</div>
90+
</div>
91+
</section>
92+
))}
93+
</>
94+
);
95+
};
96+
97+
export default FeatureSections;

Diff for: ‎components/preorder.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function PreOrder() {
2020
}
2121

2222
return (
23-
<MagicContainer className="not-prose w-full">
23+
<MagicContainer className="not-prose mx-auto max-w-[400px]">
2424
{plans.map((item, idx) => (
2525
<PriceCard key={idx} item={item} />
2626
))}

Diff for: ‎components/price-card.tsx

+27-27
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import DotPattern from "@/registry/components/magicui/dot-pattern";
77
import FadeIn from "@/registry/components/magicui/fade-in";
88
import { MagicCard } from "@/registry/components/magicui/magic-card";
99
import Meteors from "@/registry/components/magicui/meteors";
10-
import { ExternalLinkIcon } from "lucide-react";
1110
import Link from "next/link";
1211

1312
const RegularButton = () => (
@@ -20,7 +19,6 @@ const RegularButton = () => (
2019
)}
2120
>
2221
Get Lifetime Access
23-
<ExternalLinkIcon className="ml-2 h-4 w-4" />
2422
</Link>
2523
);
2624

@@ -49,7 +47,7 @@ export const PriceCard = ({
4947
<FadeIn delay={0.3} className={className}>
5048
<MagicCard
5149
spotlight={false}
52-
className="relative flex flex-col gap-8 overflow-hidden p-8"
50+
className="relative flex flex-col gap-8 overflow-hidden bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),#ffaa40_0,#9c40ff_50%,transparent_100%)] p-8"
5351
>
5452
<div className="z-10 flex flex-col space-y-4">
5553
<span className="font-medium text-foreground">{item.name}</span>
@@ -68,31 +66,33 @@ export const PriceCard = ({
6866
{!hasApplePay() && <RegularButton />}
6967
{hasApplePay() && <ApplePayButton />}
7068
</div>
71-
<ul className="z-10 space-y-3">
72-
<li className="pb-2 font-medium text-foreground">
73-
<p>Features</p>
74-
</li>
75-
{item.features.map((featureItem: any, idx: any) => (
76-
<li
77-
key={idx}
78-
className="flex items-center gap-5 text-sm text-foreground"
79-
>
80-
<svg
81-
xmlns="http://www.w3.org/2000/svg"
82-
className="h-5 w-5 text-foreground"
83-
viewBox="0 0 20 20"
84-
fill="currentColor"
85-
>
86-
<path
87-
fillRule="evenodd"
88-
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
89-
clipRule="evenodd"
90-
></path>
91-
</svg>
92-
{featureItem}
69+
{item.features.length > 0 && (
70+
<ul className="z-10 space-y-3">
71+
<li className="pb-2 font-medium text-foreground">
72+
<p>Features</p>
9373
</li>
94-
))}
95-
</ul>
74+
{item.features.map((featureItem: any, idx: any) => (
75+
<li
76+
key={idx}
77+
className="flex items-center gap-5 text-sm text-foreground"
78+
>
79+
<svg
80+
xmlns="http://www.w3.org/2000/svg"
81+
className="h-5 w-5 text-foreground"
82+
viewBox="0 0 20 20"
83+
fill="currentColor"
84+
>
85+
<path
86+
fillRule="evenodd"
87+
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
88+
clipRule="evenodd"
89+
></path>
90+
</svg>
91+
{featureItem}
92+
</li>
93+
))}
94+
</ul>
95+
)}
9696

9797
<Meteors />
9898
<DotPattern

Diff for: ‎components/user-auth-form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
5858
<div className={cn("grid gap-6", className)} {...props}>
5959
<Form {...form}>
6060
<form onSubmit={form.handleSubmit(onSubmit)}>
61-
<div className="grid gap-2">
61+
<div className="grid gap-4">
6262
<FormField
6363
control={form.control}
6464
name="email"

0 commit comments

Comments
 (0)