feat: updated plug card

nolly-studio · Jun 16, 2024 · 391c9b9 · 391c9b9
1 parent 39b0a88
commit 391c9b9
Show file tree

Hide file tree

Showing 4 changed files with 749 additions and 20 deletions.
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
@@ -37,7 +37,8 @@ export default function IndexPage() {
                 weight="bold"
                 className="text-center text-xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]"
               >
-                Components crafted for <br /> Design Engineers
+                Components crafted for <br className="hidden md:block" /> Design
+                Engineers
               </GradientHeading>
             </FadeIn>
 
@@ -81,15 +82,18 @@ export default function IndexPage() {
             </FadeIn>
           </PageHeader>
 
-          <section className="w-full md:block">
-            <FadeIn>
-              <div className=" mx-auto  w-full  max-w-7xl ">
+          <FadeIn>
+            <section className="w-full md:block">
+              <div className=" mx-auto   max-w-7xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-[44px]">
+                <PlugCardGrid />
+              </div>
+              <div className=" mx-auto  mt-4 w-full max-w-7xl ">
                 <div className="relative flex w-full flex-col rounded-[24px] border border-black/5 p-2 shadow-sm md:flex-row md:items-center md:gap-24 md:rounded-[44px] md:p-6">
                   <Badge
                     variant="outline"
                     className="absolute left-4 top-6 rounded-[14px] border border-black/10 text-base md:left-6"
                   >
-                    <SparklesIcon className="  fill-[#D2F583] stroke-1 text-neutral-800" />{" "}
+                    <SparklesIcon className="  fill-[#EEBDE0] stroke-1 text-neutral-800" />{" "}
                     Latest component
                   </Badge>
                   <div className="flex flex-col justify-center pb-2 pl-2 pt-16 md:items-center">
@@ -124,11 +128,11 @@ export default function IndexPage() {
                 </div>
               </div>
 
-              <div className=" mx-auto  mt-4 max-w-7xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-[44px]">
+              {/* <div className=" mx-auto  mt-4 max-w-7xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-[44px]">
                 <PlugCardGrid />
-              </div>
-            </FadeIn>
-          </section>
+              </div> */}
+            </section>
+          </FadeIn>
         </div>
         <section className=" mt-12 hidden w-full md:block">
           <FadeIn>

diff --git a/apps/www/components/landing/plug-grid.tsx b/apps/www/components/landing/plug-grid.tsx
@@ -11,20 +11,20 @@ import { Badge } from "../ui/badge"
 
 export function PlugCardGrid() {
   const cards = [
-    {
-      title: "Free SEO Improvement Tool",
-      description:
-        "Quickly evaluate your website's SEO performance for free. AI improvements + Open graph preview.",
-      href: "https://www.newcult.co/templates/cult-seo",
-      img: "/seo.webp",
-    },
     {
       title: "Full Stack Shadcn Templates",
       description:
         "Comprehensive Next.js + Supabase templates built with Tailwind CSS, Cult components, and shadcn.",
       href: "https://www.newcult.co/templates/cult-offline-travel-stash",
       img: "/newcult-landing.png",
     },
+    {
+      title: "Free SEO Improvement Tool",
+      description:
+        "Quickly evaluate your website's SEO performance for free. AI improvements + Open graph preview.",
+      href: "https://www.newcult.co/templates/cult-seo",
+      img: "/seo.webp",
+    },
     {
       title: "Design Engineering Directory",
       description:
@@ -40,8 +40,8 @@ export function PlugCardGrid() {
         variant="outline"
         className="absolute left-4 top-4 rounded-[14px] border border-black/10 text-base md:left-6"
       >
-        <StickerIcon className="mr-1 fill-[#EEBDE0] stroke-1 text-neutral-800" />{" "}
-        Additional design engineering tools
+        <StickerIcon className="mr-1  fill-[#D2F583] stroke-1 text-neutral-800" />{" "}
+        Additional tools
       </Badge>
       <div className="   flex flex-col justify-center  space-y-4 rounded-[34px]   p-3 pt-12">
         <div className="relative grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ">
@@ -52,12 +52,12 @@ export function PlugCardGrid() {
               rel="noopener noreferrer"
               href={card.href}
             >
-              <MinimalCard>
+              <MinimalCard className="bg-transparent">
                 <MinimalCardImage src={card.img} alt={card.title} />
                 <MinimalCardTitle className="text-neutral-800">
                   {card.title}
                 </MinimalCardTitle>
-                <MinimalCardDescription className="text-neutral-600">
+                <MinimalCardDescription className="text-neutral-900">
                   {card.description}
                 </MinimalCardDescription>
               </MinimalCard>

diff --git a/apps/www/registry/default/example/timeline-demo.tsx b/apps/www/registry/default/example/timeline-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+
+import { GradientHeading } from "../ui/gradient-heading"
+
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent
+    const isSmall = window.matchMedia("(max-width: 768px)").matches
+    const isMobile = Boolean(
+      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.exec(
+        userAgent
+      )
+    )
+
+    const isDev = process.env.NODE_ENV !== "production"
+    if (isDev) setIsMobile(isSmall || isMobile)
+
+    setIsMobile(isSmall && isMobile)
+  }, [])
+
+  return isMobile
+}
+
+const PricingTimeline = () => {
+  const isMobile = useIsMobile()
+  const usedEvents = isMobile
+    ? events.slice(events.length - 5, events.length - 1)
+    : events
+
+  return (
+    <div className="py-8 pt-24 flex flex-col items-center justify-center overflow-hidden">
+      <GradientHeading>Previous Releases</GradientHeading>
+      <div className="md:flex flex-col items-center justify-center md:py-8 pt-20 w-full">
+        <div className="md:py-8">
+          <div className="h-full md:flex flex-col items-start justify-center w-full">
+            <Timeline events={usedEvents} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}