Infixstudios WEApp

Hero section :

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

animated-hero.tsx

import { useEffect, useMemo, useState } from "react";

import { motion } from "framer-motion";

import { MoveRight, PhoneCall } from "lucide-react";

import { Button } from "@/components/ui/button";

function Hero() {

const [titleNumber, setTitleNumber] = useState(0);

const titles = useMemo(

() => ["amazing", "new", "wonderful", "beautiful", "smart"],

[]

);

useEffect(() => {

const timeoutId = setTimeout(() => {

if (titleNumber === titles.length - 1) {

setTitleNumber(0);

} else {

setTitleNumber(titleNumber + 1);

}

}, 2000);

return () => clearTimeout(timeoutId);

}, [titleNumber, titles]);

return (

<div>

Read our launch article <MoveRight className="w-4 h-4" />

</Button>

</div>

<span className="text-spektr-cyan-50">This is something</span>

{titles.map((title, index) => (

<motion.span

key={index}

className="absolute font-semibold"

initial={{ opacity: 0, y: "-100" }}

transition={{ type: "spring", stiffness: 50 }}

animate={

titleNumber === index

? {

y: 0,

opacity: 1,

}

: {

y: titleNumber > index ? -150 : 150,

opacity: 0,

}

{title}

</motion.span>

))}

</span>

</h1>

Managing a small business today is already tough. Avoid further

complications by ditching outdated, tedious trade methods. Our

goal is to streamline SMB trade, making it easier and faster than

ever.

</p>

</div>

Jump on a call <PhoneCall className="w-4 h-4" />

</Button>

</Button>

</div>

);

}

export { Hero };

demo.tsx

import { Hero } from "@/components/ui/animated-hero"

function HeroDemo() {

return (

</div>

);

}

export { HeroDemo };

```

Copy-paste these files for dependencies:

```tsx

shadcn/button

import * as React from "react"

import { Slot } from "@radix-ui/react-slot"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(

"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

{

variants: {

variant: {

default: "bg-primary text-primary-foreground hover:bg-primary/90",

destructive:

"bg-destructive text-destructive-foreground hover:bg-destructive/90",

outline:

"border border-input bg-background hover:bg-accent hover:text-accent-foreground",

secondary:

"bg-secondary text-secondary-foreground hover:bg-secondary/80",

ghost: "hover:bg-accent hover:text-accent-foreground",

link: "text-primary underline-offset-4 hover:underline",

size: {

default: "h-10 px-4 py-2",

sm: "h-9 rounded-md px-3",

lg: "h-11 rounded-md px-8",

icon: "h-10 w-10",

defaultVariants: {

variant: "default",

size: "default",

)

export interface ButtonProps

extends React.ButtonHTMLAttributes<HTMLButtonElement>,

VariantProps<typeof buttonVariants> {

asChild?: boolean

}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

({ className, variant, size, asChild = false, ...props }, ref) => {

const Comp = asChild ? Slot : "button"

return (

<Comp

className={cn(buttonVariants({ variant, size, className }))}

ref={ref}

{...props}

)

Button.displayName = "Button"

export { Button, buttonVariants }

```

Install NPM dependencies:

```bash

lucide-react, framer-motion, @radix-ui/react-slot, class-variance-authority

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

Features section :

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

bento-grid.tsx

import { ReactNode } from "react";

import { ArrowRightIcon } from "@radix-ui/react-icons";

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

import { Button } from "@/components/ui/button";

const BentoGrid = ({

children,

className,

}: {

children: ReactNode;

className?: string;

}) => {

return (

<div

className={cn(

"grid w-full auto-rows-[22rem] grid-cols-3 gap-4",

className,

)}

{children}

</div>

);

};

const BentoCard = ({

name,

className,

background,

Icon,

description,

href,

cta,

}: {

className: string;

background: ReactNode;

Icon: any;

description: string;

href: string;

cta: string;

}) => (

<div

key={name}

className={cn(

"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",

// light styles

"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",

// dark styles

"transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",

className,

)}

<div>{background}</div>

{name}

</h3>

<p className="max-w-lg text-neutral-400">{description}</p>

</div>

<div

className={cn(

"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",

)}

{cta}

</a>

</Button>

</div>

</div>

);

export { BentoCard, BentoGrid };

demo.tsx

import {

BellIcon,

CalendarIcon,

FileTextIcon,

GlobeIcon,

InputIcon,

} from "@radix-ui/react-icons";

import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";

const features = [

{

Icon: FileTextIcon,

description: "We automatically save your files as you type.",

href: "/",

cta: "Learn more",

background: <img className="absolute -right-20 -top-20 opacity-60" />,

className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",

{

Icon: InputIcon,

description: "Search through all your files in one place.",

href: "/",

cta: "Learn more",

background: <img className="absolute -right-20 -top-20 opacity-60" />,

className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",

{

Icon: GlobeIcon,

description: "Supports 100+ languages and counting.",

href: "/",

cta: "Learn more",

background: <img className="absolute -right-20 -top-20 opacity-60" />,

className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",

{

Icon: CalendarIcon,

description: "Use the calendar to filter your files by date.",

href: "/",

cta: "Learn more",

background: <img className="absolute -right-20 -top-20 opacity-60" />,

className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",

{

Icon: BellIcon,

description:

"Get notified when someone shares a file or mentions you in a comment.",

href: "/",

cta: "Learn more",

background: <img className="absolute -right-20 -top-20 opacity-60" />,

className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-4",

];

function BentoDemo() {

return (

{features.map((feature) => (

))}

</BentoGrid>

);

}

export { BentoDemo };

```

Copy-paste these files for dependencies:

```tsx

shadcn/button

import * as React from "react"

import { Slot } from "@radix-ui/react-slot"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(

{

variants: {

variant: {

default: "bg-primary text-primary-foreground hover:bg-primary/90",

destructive:

"bg-destructive text-destructive-foreground hover:bg-destructive/90",

outline:

"border border-input bg-background hover:bg-accent hover:text-accent-foreground",

secondary:

"bg-secondary text-secondary-foreground hover:bg-secondary/80",

ghost: "hover:bg-accent hover:text-accent-foreground",

link: "text-primary underline-offset-4 hover:underline",

size: {

default: "h-10 px-4 py-2",

sm: "h-9 rounded-md px-3",

lg: "h-11 rounded-md px-8",

icon: "h-10 w-10",

defaultVariants: {

variant: "default",

size: "default",

)

export interface ButtonProps

extends React.ButtonHTMLAttributes<HTMLButtonElement>,

VariantProps<typeof buttonVariants> {

asChild?: boolean

}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

({ className, variant, size, asChild = false, ...props }, ref) => {

const Comp = asChild ? Slot : "button"

return (

<Comp

className={cn(buttonVariants({ variant, size, className }))}

ref={ref}

{...props}

)

Button.displayName = "Button"

export { Button, buttonVariants }

```

Install NPM dependencies:

```bash

@radix-ui/react-slot, class-variance-authority

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

Navbar : You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

tubelight-navbar.tsx

"use client"

import React, { useEffect, useState } from "react"

import { motion } from "framer-motion"

import Link from "next/link"

import { LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"

interface NavItem {

url: string

icon: LucideIcon

}

interface NavBarProps {

items: NavItem[]

className?: string

}

export function NavBar({ items, className }: NavBarProps) {

const [activeTab, setActiveTab] = useState(items[0].name)

const [isMobile, setIsMobile] = useState(false)

useEffect(() => {

const handleResize = () => {

setIsMobile(window.innerWidth < 768)

}

handleResize()

window.addEventListener("resize", handleResize)

return () => window.removeEventListener("resize", handleResize)

}, [])

return (

<div

className={cn(

"fixed bottom-0 sm:top-0 left-1/2 -translate-x-1/2 z-50 mb-6 sm:pt-6",

className,

)}

{items.map((item) => {

const Icon = item.icon

const isActive = activeTab === item.name

return (

<Link

key={item.name}

href={item.url}

onClick={() => setActiveTab(item.name)}

className={cn(

"relative cursor-pointer text-sm font-semibold px-6 py-2 rounded-full transition-colors",

"text-foreground/80 hover:text-primary",

isActive && "bg-muted text-primary",

)}

</span>

{isActive && (

<motion.div

layoutId="lamp"

className="absolute inset-0 w-full bg-primary/5 rounded-full -z-10"

initial={false}

transition={{

type: "spring",

stiffness: 300,

damping: 30,

}}

</div>

</motion.div>

)}

</Link>

)

})}

</div>

)

}

demo.tsx

import { Home, User, Briefcase, FileText } from 'lucide-react'

import { NavBar } from "@/components/ui/tubelight-navbar"

export function NavBarDemo() {

const navItems = [

{ name: 'Home', url: '#', icon: Home },

{ name: 'About', url: '#', icon: User },

{ name: 'Projects', url: '#', icon: Briefcase },

{ name: 'Resume', url: '#', icon: FileText }

]

return <NavBar items={navItems} />

}

```

Install NPM dependencies:

```bash

lucide-react, framer-motion

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

pricing section ,

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

pricing-cards.tsx

import { Check, MoveRight, PhoneCall } from "lucide-react";

import { Badge } from "@/components/ui/badge";

import {

Card,

CardContent,

CardDescription,

CardHeader,

CardTitle,

} from "@/components/ui/card";

import { Button } from "@/components/ui/button";

function Pricing() {

return (

<Badge>Pricing</Badge>

Prices that make sense!

</h2>

Managing a small business today is already tough.

</p>

</div>

Startup

</span>

</CardTitle>

Our goal is to streamline SMB trade, making it easier and faster

than ever for everyone and everywhere.

</CardDescription>

</CardHeader>

{" "}

/ month

</span>

</p>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

</Button>

</div>

</CardContent>

</Card>

Growth

</span>

</CardTitle>

Our goal is to streamline SMB trade, making it easier and faster

than ever for everyone and everywhere.

</CardDescription>

</CardHeader>

{" "}

/ month

</span>

</p>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

</Button>

</div>

</CardContent>

</Card>

Enterprise

</span>

</CardTitle>

Our goal is to streamline SMB trade, making it easier and faster

than ever for everyone and everywhere.

</CardDescription>

</CardHeader>

{" "}

/ month

</span>

</p>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

<p>Fast and reliable</p>

We've made it fast and reliable.

</p>

</div>

Book a meeting <PhoneCall className="w-4 h-4" />

</Button>

</div>

</CardContent>

</Card>

</div>

);

}

export { Pricing };

demo.tsx

import { Pricing } from "@/components/ui/pricing-cards"

function PricingDemo() {

return (

</div>

);

}

export { PricingDemo };

```

Copy-paste these files for dependencies:

```tsx

shadcn/badge

import * as React from "react"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(

"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

{

variants: {

variant: {

default:

"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",

secondary:

"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",

destructive:

"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",

outline: "text-foreground",

defaultVariants: {

variant: "default",

)

export interface BadgeProps

extends React.HTMLAttributes<HTMLDivElement>,

VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {

return (

)

}

export { Badge, badgeVariants }

```

```tsx

shadcn/button

import * as React from "react"

import { Slot } from "@radix-ui/react-slot"

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(

{

variants: {

variant: {

default: "bg-primary text-primary-foreground hover:bg-primary/90",

destructive:

"bg-destructive text-destructive-foreground hover:bg-destructive/90",

outline:

"border border-input bg-background hover:bg-accent hover:text-accent-foreground",

secondary:

"bg-secondary text-secondary-foreground hover:bg-secondary/80",

ghost: "hover:bg-accent hover:text-accent-foreground",

link: "text-primary underline-offset-4 hover:underline",

size: {

default: "h-10 px-4 py-2",

sm: "h-9 rounded-md px-3",

lg: "h-11 rounded-md px-8",

icon: "h-10 w-10",

defaultVariants: {

variant: "default",

size: "default",

)

export interface ButtonProps

extends React.ButtonHTMLAttributes<HTMLButtonElement>,

VariantProps<typeof buttonVariants> {

asChild?: boolean

}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

({ className, variant, size, asChild = false, ...props }, ref) => {

const Comp = asChild ? Slot : "button"

return (

<Comp

className={cn(buttonVariants({ variant, size, className }))}

ref={ref}

{...props}

)

Button.displayName = "Button"

export { Button, buttonVariants }

```

```tsx

shadcn/card

import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<

HTMLDivElement,

React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

<div

ref={ref}

className={cn(

"rounded-lg border bg-card text-card-foreground shadow-sm",

className,

)}

{...props}

))

Card.displayName = "Card"

const CardHeader = React.forwardRef<

HTMLDivElement,

React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

<div

ref={ref}

className={cn("flex flex-col space-y-1.5 p-6", className)}

{...props}

))

CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<

HTMLParagraphElement,

React.HTMLAttributes<HTMLHeadingElement>

>(({ className, ...props }, ref) => (

<h3

ref={ref}

className={cn(

"text-2xl font-semibold leading-none tracking-tight",

className,

)}

{...props}

))

CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<

HTMLParagraphElement,

React.HTMLAttributes<HTMLParagraphElement>

>(({ className, ...props }, ref) => (

ref={ref}

className={cn("text-sm text-muted-foreground", className)}

{...props}

))

CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<

HTMLDivElement,

React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

))

CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<

HTMLDivElement,

React.HTMLAttributes<HTMLDivElement>

>(({ className, ...props }, ref) => (

<div

ref={ref}

className={cn("flex items-center p-6 pt-0", className)}

{...props}

))

CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

```

Install NPM dependencies:

```bash

lucide-react, class-variance-authority, @radix-ui/react-slot

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

scrollytelling

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

timeline.tsx

"use client";

import {

useMotionValueEvent,

useScroll,

useTransform,

motion,

} from "framer-motion";

import React, { useEffect, useRef, useState } from "react";

interface TimelineEntry {

title: string;

content: React.ReactNode;

}

export const Timeline = ({ data }: { data: TimelineEntry[] }) => {

const ref = useRef<HTMLDivElement>(null);

const containerRef = useRef<HTMLDivElement>(null);

const [height, setHeight] = useState(0);

useEffect(() => {

if (ref.current) {

const rect = ref.current.getBoundingClientRect();

setHeight(rect.height);

}

}, [ref]);

const { scrollYProgress } = useScroll({

target: containerRef,

offset: ["start 10%", "end 50%"],

});

const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);

const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);

return (

<div

className="w-full bg-white dark:bg-neutral-950 font-sans md:px-10"

ref={containerRef}

Changelog from my journey

</h2>

I've been working on Aceternity for the past 2 years. Here's

a timeline of my journey.

</p>

</div>

{data.map((item, index) => (

<div

key={index}

className="flex justify-start pt-10 md:pt-40 md:gap-10"

</div>

{item.title}

</h3>

</div>

{item.title}

</h3>

{item.content}{" "}

</div>

))}

<div

style={{

height: height + "px",

}}

className="absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-neutral-200 dark:via-neutral-700 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] "

<motion.div

style={{

height: heightTransform,

opacity: opacityTransform,

}}

className="absolute inset-x-0 top-0 w-[2px] bg-gradient-to-t from-purple-500 via-blue-500 to-transparent from-[0%] via-[10%] rounded-full"

</div>

);

};

demo.tsx

import Image from "next/image";

import React from "react";

import { Timeline } from "@/components/ui/timeline";

export function TimelineDemo() {

const data = [

{

title: "2024",

content: (

<div>

Built and launched Aceternity UI and Aceternity UI Pro from scratch

</p>

<Image

src="https://assets.aceternity.com/templates/startup-1.webp"

alt="startup template"

width={500}

height={500}

className="rounded-lg object-cover h-20 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"

<Image

src="https://assets.aceternity.com/templates/startup-2.webp"

alt="startup template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/templates/startup-3.webp"

alt="startup template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/templates/startup-4.webp"

alt="startup template"

width={500}

height={500}

</div>

{

title: "Early 2023",

content: (

<div>

I usually run out of copy, but when I see content this big, I try to

integrate lorem ipsum.

</p>

Lorem ipsum is for people who are too lazy to write copy. But we are

not. Here are some more example of beautiful designs I built.

</p>

<Image

src="https://assets.aceternity.com/pro/hero-sections.png"

alt="hero template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/features-section.png"

alt="feature template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/pro/bento-grids.png"

alt="bento template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/cards.png"

alt="cards template"

width={500}

height={500}

</div>

{

title: "Changelog",

content: (

<div>

Deployed 5 new components on Aceternity today

</p>

✅ Card grid component

</div>

✅ Startup template Aceternity

</div>

✅ Random file upload lol

</div>

✅ Himesh Reshammiya Music CD

</div>

✅ Salman Bhai Fan Club registrations open

</div>

<Image

src="https://assets.aceternity.com/pro/hero-sections.png"

alt="hero template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/features-section.png"

alt="feature template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/pro/bento-grids.png"

alt="bento template"

width={500}

height={500}

<Image

src="https://assets.aceternity.com/cards.png"

alt="cards template"

width={500}

height={500}

</div>

];

return (

</div>

);

}

```

Install NPM dependencies:

```bash

framer-motion

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

testimonal :

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

testimonial-v2.tsx

import React, { useState, useEffect } from 'react';

import { motion } from "framer-motion";

import { Sun, Moon } from 'lucide-react';

// --- Types ---

interface Testimonial {

text: string;

image: string;

role: string;

}

// --- Data ---

const testimonials: Testimonial[] = [

{

text: "This ERP revolutionized our operations, streamlining finance and inventory. The cloud-based platform keeps us productive, even remotely.",

image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150",

role: "Operations Manager",

{

text: "Implementing this ERP was smooth and quick. The customizable, user-friendly interface made team training effortless.",

image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=150&h=150",

role: "IT Manager",

{

text: "The support team is exceptional, guiding us through setup and providing ongoing assistance, ensuring our satisfaction.",

image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150",

role: "Customer Support Lead",

{

text: "This ERP's seamless integration enhanced our business operations and efficiency. Highly recommend for its intuitive interface.",

image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150&h=150",

role: "CEO",

{

text: "Its robust features and quick support have transformed our workflow, making us significantly more efficient.",

image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=150&h=150",

role: "Project Manager",

{

text: "The smooth implementation exceeded expectations. It streamlined processes, improving overall business performance.",

image: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&q=80&w=150&h=150",

role: "Business Analyst",

{

text: "Our business functions improved with a user-friendly design and positive customer feedback.",

image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150&h=150",

role: "Marketing Director",

{

text: "They delivered a solution that exceeded expectations, understanding our needs and enhancing our operations.",

image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=150&h=150",

role: "Sales Manager",

{

text: "Using this ERP, our online presence and conversions significantly improved, boosting business performance.",

image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=150&h=150",

role: "E-commerce Manager",

];

const firstColumn = testimonials.slice(0, 3);

const secondColumn = testimonials.slice(3, 6);

const thirdColumn = testimonials.slice(6, 9);

// --- Sub-Components ---

const TestimonialsColumn = (props: {

className?: string;

testimonials: Testimonial[];

duration?: number;

}) => {

return (

<motion.ul

animate={{

translateY: "-50%",

}}

transition={{

duration: props.duration || 10,

repeat: Infinity,

ease: "linear",

repeatType: "loop",

}}

className="flex flex-col gap-6 pb-6 bg-transparent transition-colors duration-300 list-none m-0 p-0"

{[

...new Array(2).fill(0).map((_, index) => (

<React.Fragment key={index}>

{props.testimonials.map(({ text, image, name, role }, i) => (

<motion.li

key={`${index}-${i}`}

aria-hidden={index === 1 ? "true" : "false"}

tabIndex={index === 1 ? -1 : 0}

whileHover={{

scale: 1.03,

y: -8,

boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)",

transition: { type: "spring", stiffness: 400, damping: 17 }

}}

whileFocus={{

scale: 1.03,

y: -8,

boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)",

transition: { type: "spring", stiffness: 400, damping: 17 }

}}

className="p-10 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg shadow-black/5 max-w-xs w-full bg-white dark:bg-neutral-900 transition-all duration-300 cursor-default select-none group focus:outline-none focus:ring-2 focus:ring-primary/30"

{text}

</p>

<img

width={40}

height={40}

src={image}

alt={`Avatar of ${name}`}

className="h-10 w-10 rounded-full object-cover ring-2 ring-neutral-100 dark:ring-neutral-800 group-hover:ring-primary/30 transition-all duration-300 ease-in-out"

{name}

</cite>

{role}

</span>

</div>

</footer>

</blockquote>

</motion.li>

))}

</React.Fragment>

)),

]}

</motion.ul>

</div>

);

};

const TestimonialsSection = () => {

return (

<section

aria-labelledby="testimonials-heading"

className="bg-transparent py-24 relative overflow-hidden"

<motion.div

initial={{ opacity: 0, y: 50, rotate: -2 }}

whileInView={{ opacity: 1, y: 0, rotate: 0 }}

viewport={{ once: true, amount: 0.15 }}

transition={{

duration: 1.2,

ease: [0.16, 1, 0.3, 1],

opacity: { duration: 0.8 }

}}

className="container px-4 z-10 mx-auto"

Testimonials

</div>

What our users say

</h2>

Discover how thousands of teams streamline their operations with our platform.

</p>

</div>

<div

className="flex justify-center gap-6 mt-10 [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] max-h-[740px] overflow-hidden"

role="region"

aria-label="Scrolling Testimonials"

</div>

</motion.div>

</section>

);

};

// --- Main App Component ---

export default function App() {

const [isDark, setIsDark] = useState(false);

useEffect(() => {

if (isDark) {

document.documentElement.classList.add('dark');

} else {

document.documentElement.classList.remove('dark');

}

}, [isDark]);

return (

{/* Dark Mode Toggle */}

<button

onClick={() => setIsDark(!isDark)}

className="fixed top-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-neutral-900 text-neutral-800 dark:text-neutral-100 border border-neutral-200 dark:border-neutral-800 shadow-xl hover:scale-110 transition-all active:scale-95 focus:outline-none focus:ring-2 focus:ring-primary/50"

aria-label="Toggle Dark Mode"

{isDark ? <Sun size={20} /> : <Moon size={20} />}

</button>

</div>

);

}

demo.tsx

import Component from "@/components/ui/testimonial-v2";

export default function DemoOne() {

return <Component />;

}

```

Install NPM dependencies:

```bash

lucide-react, framer-motion

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

text :

You are given a task to integrate an existing React component in the codebase

The codebase should support:

- shadcn project structure

- Tailwind CSS

- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles.

If default path for components is not /components/ui, provide instructions on why it's important to create this folder

Copy-paste this component to /components/ui folder:

```tsx

typewriter-effect.tsx

"use client";

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

import { motion, stagger, useAnimate, useInView } from "framer-motion";

import { useEffect } from "react";

export const TypewriterEffect = ({

words,

className,

cursorClassName,

}: {

words: {

text: string;

className?: string;

}[];

className?: string;

cursorClassName?: string;

}) => {

// split text inside of words into array of characters

const wordsArray = words.map((word) => {

return {

...word,

text: word.text.split(""),

};

});

const [scope, animate] = useAnimate();

const isInView = useInView(scope);

useEffect(() => {

if (isInView) {

animate(

"span",

{

display: "inline-block",

opacity: 1,

width: "fit-content",

{

duration: 0.3,

delay: stagger(0.1),

ease: "easeInOut",

}

);

}

}, [isInView]);

const renderWords = () => {

return (

<motion.div ref={scope} className="inline">

{wordsArray.map((word, idx) => {

return (

{word.text.map((char, index) => (

<motion.span

initial={{}}

key={`char-${index}`}

className={cn(

`dark:text-white text-black opacity-0 hidden`,

word.className

)}

{char}

</motion.span>

))}

</div>

);

})}

</motion.div>

);

};

return (

<div

className={cn(

"text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",

className

)}

{renderWords()}

<motion.span

initial={{

opacity: 0,

}}

animate={{

opacity: 1,

}}

transition={{

duration: 0.8,

repeat: Infinity,

repeatType: "reverse",

}}

className={cn(

"inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",

cursorClassName

)}

></motion.span>

</div>

);

};

export const TypewriterEffectSmooth = ({

words,

className,

cursorClassName,

}: {

words: {

text: string;

className?: string;

}[];

className?: string;

cursorClassName?: string;

}) => {

// split text inside of words into array of characters

const wordsArray = words.map((word) => {

return {

...word,

text: word.text.split(""),

};

});

const renderWords = () => {

return (

<div>

{wordsArray.map((word, idx) => {

return (

{word.text.map((char, index) => (

<span

key={`char-${index}`}

className={cn(`dark:text-white text-black `, word.className)}

{char}

</span>

))}

</div>

);

})}

</div>

);

};

return (

<motion.div

className="overflow-hidden pb-2"

initial={{

width: "0%",

}}

whileInView={{

width: "fit-content",

}}

transition={{

duration: 2,

ease: "linear",

delay: 1,

}}

<div

className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"

style={{

whiteSpace: "nowrap",

}}

{renderWords()}{" "}

</div>{" "}

</motion.div>

<motion.span

initial={{

opacity: 0,

}}

animate={{

opacity: 1,

}}

transition={{

duration: 0.8,

repeat: Infinity,

repeatType: "reverse",

}}

className={cn(

"block rounded-sm w-[4px] h-4 sm:h-6 xl:h-12 bg-blue-500",

cursorClassName

)}

></motion.span>

</div>

);

};

demo.tsx

"use client";

import { TypewriterEffectSmooth } from "@/components/ui/typewriter-effect";

export function TypewriterEffectSmoothDemo() {

const words = [

{

text: "Build",

{

text: "awesome",

{

text: "apps",

{

text: "with",

{

text: "Aceternity.",

className: "text-blue-500 dark:text-blue-500",

];

return (

The road to freedom starts from here

</p>

Join now

</button>

Signup

</button>

</div>

);

}

```

Install NPM dependencies:

```bash

framer-motion

```

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies

2. Review the component's argumens and state

3. Identify any required context providers or hooks and install them

4. Questions to Ask

- What data/props will be passed to this component?

- Are there any specific state management requirements?

- Are there any required assets (images, icons, etc.)?

- What is the expected responsive behavior?

- What is the best place to use this component in the app?

Steps to integrate

0. Copy paste all the code above in the correct directories

1. Install external dependencies

2. Fill image assets with Unsplash stock images you know exist

3. Use lucide-react icons for svgs or logos if component requires them

Search This Blog

RideShare

Infixstudios WEApp

Comments

Post a Comment

Popular posts from this blog

Homesit

Login.js

cursor'