feat: hoverVideoPlayer loadingCarousel logoColumn

nolly-studio · Dec 12, 2024 · e04eadd · e04eadd
1 parent 24b2b58
commit e04eadd
Show file tree

Hide file tree

Showing 102 changed files with 3,009 additions and 132 deletions.
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -313,6 +313,39 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "logo-carousel": {
+      name: "logo-carousel",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/logo-carousel")),
+      source: "",
+      files: ["registry/default/ui/logo-carousel.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "loading-carousel": {
+      name: "loading-carousel",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/loading-carousel")),
+      source: "",
+      files: ["registry/default/ui/loading-carousel.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "hover-video-player": {
+      name: "hover-video-player",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/hover-video-player")),
+      source: "",
+      files: ["registry/default/ui/hover-video-player.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "text-animate-demo": {
       name: "text-animate-demo",
       type: "components:example",
@@ -621,6 +654,39 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "logo-carousel-demo": {
+      name: "logo-carousel-demo",
+      type: "components:example",
+      registryDependencies: ["logo-carousel","gradient-heading"],
+      component: React.lazy(() => import("@/registry/default/example/logo-carousel-demo")),
+      source: "",
+      files: ["registry/default/example/logo-carousel-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "loading-carousel-demo": {
+      name: "loading-carousel-demo",
+      type: "components:example",
+      registryDependencies: ["loading-carousel"],
+      component: React.lazy(() => import("@/registry/default/example/loading-carousel-demo")),
+      source: "",
+      files: ["registry/default/example/loading-carousel-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "hover-video-player-demo": {
+      name: "hover-video-player-demo",
+      type: "components:example",
+      registryDependencies: ["hover-video-player"],
+      component: React.lazy(() => import("@/registry/default/example/hover-video-player-demo")),
+      source: "",
+      files: ["registry/default/example/hover-video-player-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "authentication-01": {
       name: "authentication-01",
       type: "components:block",

diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
@@ -5,7 +5,6 @@ import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { buttonVariants } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
 import { Announcement } from "@/components/announcement"
 import { FadeIn } from "@/components/fade-in"
 import {
@@ -15,63 +14,48 @@ import {
   TypeScriptIcon,
 } from "@/components/icons"
 import { FeaturesSection } from "@/components/landing/feature-section"
-import {
-  FeaturedComponent,
-  LatestComponent,
-} from "@/components/landing/featured-component"
+import { LatestComponentVertical } from "@/components/landing/featured-component"
 import { PlugCardGrid } from "@/components/landing/plug-grid"
 import { TemplateGrid } from "@/components/landing/template-grid"
 import { PageActions, PageHeader } from "@/components/page-header"
-import BgNoiseWrapper from "@/components/texture-wrapper"
-import DockAnimation from "@/registry/default/example/dock-demo"
-import ShaderBlurDemo from "@/registry/default/example/shader-lens-blur-demo"
-import CanvasFractalGrid from "@/registry/default/ui/canvas-fractal-grid"
 import { GradientHeading } from "@/registry/default/ui/gradient-heading"
 
 export default function IndexPage() {
   return (
     <div className=" isolate min-h-screen overflow-hidden  pb-8 sm:pb-12 md:pb-0">
-      <div className="container relative pt-12">
-        {/* <ShaderAnimation /> */}
-
-        {/* <ShaderBlurDemo /> */}
-        {/* <Card className="mt-12 max-w-2xl">
-          <CardContent className="flex flex-col gap-4 items-center justify-center p-12">
-            <ImprovedShaderAnimation
-              initialVariation={2}
-              color1="#ff0000"
-              color2="#00ff00"
-              className="my-custom-class"
-              enableHover={true}
-            />
-          </CardContent>
-        </Card> */}
-      </div>
+      {/* <div className="container relative pt-12"></div> */}
 
       {/* <BgNoiseWrapper url="/egg-shell-noise.png"> */}
-      <div className="container relative pt-12">
+      <div className="container relative pt-8">
         <PageHeader>
           <FadeIn>
             <Announcement />
           </FadeIn>
           <FadeIn>
-            <GradientHeading
-              size="xl"
-              weight="bold"
-              className="text-center text-xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]"
-            >
-              Components crafted for <br className="hidden md:block" /> Design
-              Engineers
-            </GradientHeading>
+            <div>
+              <GradientHeading
+                weight="bold"
+                className="text-center text-xl font-bold leading-tight tracking-tighter md:text-5xl "
+              >
+                Components crafted for
+              </GradientHeading>
+              <GradientHeading
+                size="xll"
+                weight="bold"
+                className="text-center text-xl font-bold  tracking-tighter  leading-[0.5rem] lg:leading-[0.5rem] "
+              >
+                <br className="hidden md:block" /> Design Engineers
+              </GradientHeading>
+            </div>
           </FadeIn>
 
           <FadeIn>
-            <div className="flex flex-wrap items-center justify-center gap-1 text-center text-base  leading-3  text-foreground md:text-2xl md:font-normal md:leading-6">
+            <div className=" max-w-2xl flex flex-wrap items-center justify-center gap-1 text-left text-base  leading-3  text-foreground md:text-xl md:font-normal md:leading-6 pt-8">
               <span>Ready-to-use</span>
               <div className="hidden -rotate-45 rounded-full border border-black/10 p-1 shadow-lg md:block">
                 <ReactIcon className=" h-6 w-6   " aria-hidden="true" />
               </div>
-              <span> components for your React apps.</span>
+              <span> components for your react apps.</span>
 
               <span>Shadcn compatible.</span>
               <div className="rounded-full border border-black/10 p-1 shadow-lg">
@@ -81,7 +65,7 @@ export default function IndexPage() {
               <div className="hidden -rotate-45 rounded-full border border-black/10 p-1 shadow-lg md:block ">
                 <TailwindCSSIcon className="h-6 w-6  " aria-hidden="true" />
               </div>
-              <span className="">Copy and paste. Open Source. Typed. </span>
+              <span className="">Copy and paste, open source, typed. </span>
               <div className="rounded-xs hidden border border-black/10 p-1 shadow-lg md:block">
                 <TypeScriptIcon className="h-6 w-6 " aria-hidden="true" />
               </div>
@@ -109,7 +93,7 @@ export default function IndexPage() {
           <section className="w-full space-y-4 md:block">
             {/* <div className=" mx-auto   max-w-7xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-[44px] bg-black"> */}
             <div className=" mx-auto   w-full max-w-4xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-t-[44px]">
-              <LatestComponent />
+              <LatestComponentVertical />
               {/* <FeaturedComponent /> */}
             </div>
 

diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
@@ -8,7 +8,7 @@ import { Style, styles } from "@/registry/styles"
 
 import "@/styles/mdx.css"
 import "public/registry/themes.css"
-import { AnimatePresence } from "framer-motion"
+import { AnimatePresence } from "motion/react"
 
 import { BlockChunk } from "@/components/block-chunk"
 import { BlockWrapper } from "@/components/block-wrapper"

diff --git a/apps/www/components/animate/animated-number.tsx b/apps/www/components/animate/animated-number.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { MotionValue, motion, useSpring, useTransform } from "framer-motion"
 import { Minus, Plus } from "lucide-react"
+import { MotionValue, motion, useSpring, useTransform } from "motion/react"
 import { toast } from "sonner"
 
 import { GradientHeading } from "@/registry/default/ui/gradient-heading"

diff --git a/apps/www/components/animate/fade-in.tsx b/apps/www/components/animate/fade-in.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { createContext, useContext } from "react"
-import { motion, useReducedMotion } from "framer-motion"
+import { motion, useReducedMotion } from "motion/react"
 
 const FadeInStaggerContext = createContext(false)
 

diff --git a/apps/www/components/animate/feature-card.tsx b/apps/www/components/animate/feature-card.tsx
@@ -10,7 +10,7 @@ import {
   useMotionValue,
   type MotionStyle,
   type MotionValue,
-} from "framer-motion"
+} from "motion/react"
 import Balancer from "react-wrap-balancer"
 
 import { cn } from "@/lib/utils"

diff --git a/apps/www/components/animate/list.tsx b/apps/www/components/animate/list.tsx
@@ -2,14 +2,14 @@
 
 // https://blog.maximeheckel.com/posts/framer-motion-layout-animations/
 import React, { useCallback, useState } from "react"
+import { CogIcon, Plus, RepeatIcon, Trash, XIcon } from "lucide-react"
 import {
   AnimatePresence,
   LayoutGroup,
   Reorder,
   motion,
   useDragControls,
-} from "framer-motion"
-import { CogIcon, Plus, RepeatIcon, Trash, XIcon } from "lucide-react"
+} from "motion/react"
 import useMeasure from "react-use-measure"
 import { toast } from "sonner"
 

diff --git a/apps/www/components/animate/type-animate.tsx b/apps/www/components/animate/type-animate.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { animate, motion, useMotionValue, useTransform } from "framer-motion"
+import { animate, motion, useMotionValue, useTransform } from "motion/react"
 
 export interface ITextAnimationProps {
   delay: number

diff --git a/apps/www/components/background-guides.tsx b/apps/www/components/background-guides.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "motion/react"
 
 type AnimationDirection = "top-to-bottom" | "bottom-to-top" | "both" | "random"
 type AnimationEasing = "linear" | "easeIn" | "easeOut" | "easeInOut" | "spring"

diff --git a/apps/www/components/block-chunk.tsx b/apps/www/components/block-chunk.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "motion/react"
 
 import { cn } from "@/lib/utils"
 import { useLiftMode } from "@/hooks/use-lift-mode"

diff --git a/apps/www/components/block-wrapper.tsx b/apps/www/components/block-wrapper.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence, motion } from "motion/react"
 
 import { useLiftMode } from "@/hooks/use-lift-mode"
 import { Block } from "@/registry/schema"

diff --git a/apps/www/components/fade-in.tsx b/apps/www/components/fade-in.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { createContext, useContext } from "react"
-import { motion, useReducedMotion } from "framer-motion"
+import { motion, useReducedMotion } from "motion/react"
 
 const FadeInStaggerContext = createContext(false)
 

diff --git a/apps/www/components/landing/featured-component.tsx b/apps/www/components/landing/featured-component.tsx
@@ -1,10 +1,12 @@
 import Link from "next/link"
 import { ArrowRight, SparklesIcon } from "lucide-react"
 
+import LogoCarouselDemo from "@/registry/default/example/logo-carousel-demo"
 import { ContactFormExample } from "@/registry/default/example/popover-form-demo"
 import ShaderLensBlurDemo from "@/registry/default/example/shader-lens-blur-demo"
 import { GradientHeading } from "@/registry/default/ui/gradient-heading"
 import { LightBoard } from "@/registry/default/ui/lightboard"
+import LogoCarousel from "@/registry/default/ui/logo-carousel"
 import ShaderLensBlur from "@/registry/default/ui/shader-lens-blur"
 
 import { Badge } from "../ui/badge"
@@ -127,3 +129,40 @@ export function LatestComponent() {
     </div>
   )
 }
+
+export function LatestComponentVertical() {
+  return (
+    // <div className=" relative flex w-full flex-col rounded-[24px] border border-black/5 bg-neutral-800/10 p-2 shadow-sm md:flex-row md:items-center md:gap-24 md:rounded-t-[40px] md:p-2 mx-auto">
+    <div className=" relative mx-auto flex w-full flex-col rounded-[24px] border border-black/5 bg-neutral-800/5 p-2 shadow-sm  md:items-start md:gap-8 md:rounded-b-[20px] md:rounded-t-[40px] md:p-2">
+      <Badge
+        variant="outline"
+        className="absolute left-4 top-6 rounded-[14px] border border-black/10 text-base md:left-6"
+      >
+        <SparklesIcon className="  fill-[#EEBDE0] stroke-1 text-neutral-800" />{" "}
+        Latest component
+      </Badge>
+      <div className="flex flex-col justify-center pb-2 pl-4 pt-14 md:items-center">
+        <div className="flex  gap-2">
+          <div>
+            <GradientHeading>Logo Carousel</GradientHeading>
+            <Link
+              href="/docs/components/popover-form"
+              className="flex items-center gap-1 "
+            >
+              Headless logo carousel animation.
+              {/* <ArrowRight className="hidden h-4 w-4 md:block" /> */}
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* <div className=" mt-4 flex max-w-xl grow flex-col items-center justify-center space-y-0 rounded-[14px] border border-dashed border-black/10  bg-neutral-300/20 p-4 md:mt-0 md:rounded-md md:rounded-br-[20px] md:rounded-tr-[35px]"> */}
+      <div className="mx-auto w-full ">
+        <div className="w-full py-8 lg:pb-8 lg:pt-3 max-w-screen-lg mx-auto flex flex-col items-center space-y-8">
+          <LogoCarousel columnCount={3} />
+        </div>
+      </div>
+      {/* </div> */}
+    </div>
+  )
+}
diff --git a/apps/www/components/landing/plug-grid.tsx b/apps/www/components/landing/plug-grid.tsx
@@ -3,14 +3,20 @@ import { StickerIcon } from "lucide-react"
 import {
   MinimalCard,
   MinimalCardDescription,
-  MinimalCardImage,
   MinimalCardTitle,
 } from "@/registry/default/ui/minimal-card"
 
 import { Badge } from "../ui/badge"
 
 export function PlugCardGrid() {
   const cards = [
+    {
+      title: "Free AI Marketing ",
+      description:
+        "An AI Cofounder that knows your brand. Start creating marketing copy that converts.",
+      href: "https://www.newcopy.ai",
+      img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXFpaG1vaG83YTgxdTdxc2ZreHNtaGphYjF4aXd6c3JvbXNodW9ubSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7bzrBMHEsgPb20T3C5/giphy.gif",
+    },
     {
       title: "Free SEO Improvement Tool",
       description:
@@ -25,13 +31,6 @@ export function PlugCardGrid() {
       href: "https://www.newcult.co",
       img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3p0Nm1xcnE2eDNkOTJ6NndxaTJlejFodGozZ3RpcXc4MW80OHkwYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AdRaGoL5xT1SdI6J5v/giphy.gif",
     },
-    {
-      title: "Open Source Directory Template",
-      description:
-        "Curated bookmarks for design engineers: design tools, JavaScript resources, React.js libraries, and more.",
-      href: "https://github.com/nolly-studio/cult-directory-template",
-      img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXFpaG1vaG83YTgxdTdxc2ZreHNtaGphYjF4aXd6c3JvbXNodW9ubSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7bzrBMHEsgPb20T3C5/giphy.gif",
-    },
   ]
 
   return (
@@ -53,7 +52,6 @@ export function PlugCardGrid() {
               href={card.href}
             >
               <MinimalCard className="bg-transparent">
-                {/* <MinimalCardImage src={card.img} alt={card.title} /> */}
                 <MinimalCardTitle className="text-base text-neutral-800">
                   {card.title}
                 </MinimalCardTitle>