✨ feat: add tweet card and more (#6)

* ✨ feat: add tweet card and more * 🐛 fix: change date
magicuidesign · Oct 17, 2023 · 5518b91 · 5518b91
1 parent 17f1bdd
commit 5518b91
Show file tree

Hide file tree

Showing 32 changed files with 865 additions and 311 deletions.
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -25,15 +25,13 @@ export default function LoginPage() {
           Back
         </>
       </Link>
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
+      <div className="mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]">
+        <div className="flex flex-col gap-2 text-center">
           <Icons.logo className="mx-auto h-6 w-6" />
           <h1 className="text-2xl font-semibold tracking-tight">
             Welcome back
           </h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your email to sign in to your account
-          </p>
+          <p className="text-sm text-muted-foreground">Login to your account</p>
         </div>
         <UserAuthForm />
         <p className="px-8 text-center text-sm text-muted-foreground">

diff --git a/app/(docs)/components/[slug]/page.tsx b/app/(docs)/components/[slug]/page.tsx
@@ -4,11 +4,8 @@ import Twitter from "@/components/icons/twitter";
 import { Mdx } from "@/components/mdx-components";
 import { DashboardTableOfContents } from "@/components/toc";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { getCurrentUser } from "@/lib/session";
-import { getUserPayments } from "@/lib/stripe-utils";
 import { getTableOfContents } from "@/lib/toc";
 import { absoluteUrl, cn, constructMetadata } from "@/lib/utils";
-import { Payment } from "@prisma/client";
 import { allComponents } from "contentlayer/generated";
 import { ChevronRight } from "lucide-react";
 import type { Metadata } from "next";
@@ -80,13 +77,6 @@ interface Props {
 }
 
 export default async function Component({ params }: Props) {
-  const user = await getCurrentUser();
-  const { payments } = await getUserPayments(user?.id!);
-
-  const paid = payments.some(
-    (payment: Payment) => payment.status === "succeeded",
-  );
-
   const component = allComponents.find(
     (component) => component.slugAsParams === params.slug,
   );
@@ -98,17 +88,16 @@ export default async function Component({ params }: Props) {
 
   return (
     <main
-      className={cn(
-        "relative py-6 lg:gap-10 lg:py-8 xl:grid ",
-        "xl:grid-cols-[1fr_300px]",
-      )}
+      className={cn("relative py-6 lg:gap-10 lg:py-8 xl:grid ", {
+        "xl:grid-cols-[1fr_300px]": component.toc,
+      })}
     >
       <div className="mx-auto w-full">
         {/* Breadcrumb */}
         <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
           <Link
             href="/components"
-            className="transition-colors  hover:text-foreground/80"
+            className="transition-colors hover:text-foreground/80"
           >
             <div className="overflow-hidden text-ellipsis whitespace-nowrap">
               Components

diff --git a/app/(docs)/templates/page.tsx b/app/(docs)/templates/page.tsx
@@ -1,6 +1,14 @@
 import { Component } from "@/.contentlayer/generated";
 import { constructMetadata } from "@/lib/utils";
 import FadeIn from "@/registry/components/magicui/fade-in";
+import HeroVideo, {
+  HeroVideoAction,
+} from "@/registry/components/magicui/hero-video";
+import {
+  MagicCard,
+  MagicContainer,
+} from "@/registry/components/magicui/magic-card";
+import ShimmerButton from "@/registry/components/magicui/shimmer-button";
 import Link from "next/link";
 
 export const metadata = constructMetadata({
@@ -24,6 +32,48 @@ export default async function TemplatePage() {
         </div>
       </div>
       <hr className="my-8" />
+
+      <MagicContainer>
+        <MagicCard className="flex flex-col items-center justify-center p-4">
+          <h2>this is a test card</h2>
+          <ShimmerButton>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="h-6 w-6 dark:text-white"
+            >
+              <path
+                fillRule="evenodd"
+                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"
+                clipRule="evenodd"
+              />
+            </svg>
+          </ShimmerButton>
+        </MagicCard>
+      </MagicContainer>
+      <HeroVideo
+        title="Magic UI Demo"
+        image="https://cdn.dribbble.com/userupload/4145843/file/original-c7a2c9a768450460259f232259d103d2.png?resize=1600x1200"
+        video="https://cdn.magicuikit.com/globe.mp4"
+      >
+        <HeroVideoAction>
+          <ShimmerButton>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="h-6 w-6 dark:text-white"
+            >
+              <path
+                fillRule="evenodd"
+                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"
+                clipRule="evenodd"
+              />
+            </svg>
+          </ShimmerButton>
+        </HeroVideoAction>
+      </HeroVideo>
       {posts?.length ? (
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           {posts.map((post, index) => (

diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -6,6 +6,7 @@ export default async function Home() {
     <>
       <Hero />
       <Testimonials />
+      {/* <FeatureSections /> */}
       {/* <Faq /> */}
     </>
   );

diff --git a/app/(marketing)/pricing/page.tsx b/app/(marketing)/pricing/page.tsx
@@ -34,9 +34,9 @@ export default function Buy() {
             </p>
           </FadeIn>
         </div>
-        <MagicContainer className="mx-auto mt-16 w-full max-w-[400px]">
+        <MagicContainer className="mx-auto mt-16 grid w-full grid-cols-1 place-items-center gap-8">
           {plans.map((item, idx) => (
-            <PriceCard key={idx} item={item} />
+            <PriceCard key={idx} item={item} className="max-w-[400px]" />
           ))}
         </MagicContainer>
       </div>

diff --git a/app/(marketing)/not-found.tsx → app/not-found.tsx b/app/(marketing)/not-found.tsx → app/not-found.tsx
diff --git a/components.json b/components.json
@@ -5,7 +5,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
     "cssVariables": true
   },
   "aliases": {

diff --git a/components/component-source.tsx b/components/component-source.tsx
@@ -9,6 +9,14 @@ interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string;
 }
 
+const Preview = ({ className }: { className?: string }) => {
+  return (
+    <>
+      <PreOrder />
+    </>
+  );
+};
+
 export function ComponentSource({
   children,
   className,
@@ -21,11 +29,11 @@ export function ComponentSource({
   );
 
   if (status === "loading") return null;
-  if (status === "unauthenticated") return <PreOrder />;
+  if (status === "unauthenticated") return <Preview />;
   if (isLoading) return null;
 
   // TODO: Make this cleaner
-  if (data?.user?.customer.payments.length === 0) return <PreOrder />;
+  if (data?.user?.customer.payments.length === 0) return <Preview />;
 
   return (
     <CodeBlockWrapper

diff --git a/components/component-wrapper.tsx b/components/component-wrapper.tsx
@@ -8,7 +8,7 @@ const ComponentWrapper = ({ className, children }: ComponentWrapperProps) => {
   return (
     <div
       className={cn(
-        "not-prose max-w-screen relative flex flex-col items-center justify-center rounded-xl border bg-background p-8 md:p-20",
+        "not-prose max-w-screen relative flex flex-col items-center justify-center rounded-xl border bg-background p-8 md:p-16",
         className,
       )}
     >

diff --git a/components/landing/feature-sections.tsx b/components/landing/feature-sections.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { Icons } from "@/components/icons";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { List } from "lucide-react";
+import Link from "next/link";
+
+const features = [
+  {
+    id: "feature-openai",
+    header: "Analyze",
+    name: "Advanced OpenAI API Dashboard",
+    description:
+      "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.",
+    // icon: Icons.openai,
+    video: "https://cdn.llm.report/openai-demo.mp4",
+    cta: "Get Started",
+    href: "/login",
+    reverse: false,
+  },
+  {
+    id: "feature-logs",
+    header: "Optimize",
+    name: "Log your prompts and completions",
+    description:
+      "Change 1 line in your code and start logging your API requests. Optimize your token usage and start saving money.",
+    icon: List,
+    video: "https://cdn.llm.report/logs-demo.mp4",
+    cta: "Get Started",
+    href: "/login",
+    reverse: true,
+  },
+  {
+    id: "feature-users",
+    header: "Minimize",
+    name: "Measure Cost Per User",
+    description:
+      "Analyze your cost per user and adjust your pricing to maximize revenue.",
+    icon: Icons.user,
+    video: "https://cdn.llm.report/users-demo.mp4",
+    cta: "Get Started",
+    href: "/login",
+    reverse: false,
+  },
+];
+
+const FeatureSections = () => {
+  return (
+    <>
+      {features.map((feature) => (
+        <section id={feature.id} key={feature.id} className="container mx-auto">
+          <div className="mx-auto px-6 py-6 sm:py-20">
+            <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">
+              <div
+                className={cn("m-auto lg:col-span-2", {
+                  "lg:order-last": feature.reverse,
+                })}
+              >
+                <h2 className="text-base font-semibold leading-7 text-orange-600">
+                  {feature.header}
+                </h2>
+                <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
+                  {feature.name}
+                </p>
+                <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400">
+                  {feature.description}
+                </p>
+                <Link
+                  className={cn(
+                    buttonVariants({
+                      variant: "default",
+                      size: "lg",
+                    }),
+                    "mt-8",
+                  )}
+                  href={feature.href}
+                >
+                  {feature.cta}
+                </Link>
+              </div>
+              <video
+                src={feature.video}
+                autoPlay
+                loop
+                muted
+                className="m-auto rounded-xl border shadow-2xl lg:col-span-3"
+              />
+            </div>
+          </div>
+        </section>
+      ))}
+    </>
+  );
+};
+
+export default FeatureSections;
diff --git a/components/preorder.tsx b/components/preorder.tsx
@@ -20,7 +20,7 @@ export default function PreOrder() {
   }
 
   return (
-    <MagicContainer className="not-prose w-full">
+    <MagicContainer className="not-prose mx-auto max-w-[400px]">
       {plans.map((item, idx) => (
         <PriceCard key={idx} item={item} />
       ))}

diff --git a/components/price-card.tsx b/components/price-card.tsx
@@ -7,7 +7,6 @@ import DotPattern from "@/registry/components/magicui/dot-pattern";
 import FadeIn from "@/registry/components/magicui/fade-in";
 import { MagicCard } from "@/registry/components/magicui/magic-card";
 import Meteors from "@/registry/components/magicui/meteors";
-import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 
 const RegularButton = () => (
@@ -20,7 +19,6 @@ const RegularButton = () => (
     )}
   >
     Get Lifetime Access
-    <ExternalLinkIcon className="ml-2 h-4 w-4" />
   </Link>
 );
 
@@ -49,7 +47,7 @@ export const PriceCard = ({
     <FadeIn delay={0.3} className={className}>
       <MagicCard
         spotlight={false}
-        className="relative flex flex-col gap-8 overflow-hidden p-8"
+        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"
       >
         <div className="z-10 flex flex-col space-y-4">
           <span className="font-medium text-foreground">{item.name}</span>
@@ -68,31 +66,33 @@ export const PriceCard = ({
           {!hasApplePay() && <RegularButton />}
           {hasApplePay() && <ApplePayButton />}
         </div>
-        <ul className="z-10 space-y-3">
-          <li className="pb-2 font-medium text-foreground">
-            <p>Features</p>
-          </li>
-          {item.features.map((featureItem: any, idx: any) => (
-            <li
-              key={idx}
-              className="flex items-center gap-5 text-sm text-foreground"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5 text-foreground"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  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"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              {featureItem}
+        {item.features.length > 0 && (
+          <ul className="z-10 space-y-3">
+            <li className="pb-2 font-medium text-foreground">
+              <p>Features</p>
             </li>
-          ))}
-        </ul>
+            {item.features.map((featureItem: any, idx: any) => (
+              <li
+                key={idx}
+                className="flex items-center gap-5 text-sm text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 text-foreground"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    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"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                {featureItem}
+              </li>
+            ))}
+          </ul>
+        )}
 
         <Meteors />
         <DotPattern

diff --git a/components/user-auth-form.tsx b/components/user-auth-form.tsx
@@ -58,7 +58,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
     <div className={cn("grid gap-6", className)} {...props}>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="grid gap-2">
+          <div className="grid gap-4">
             <FormField
               control={form.control}
               name="email"