new ux start
This commit is contained in:
colinislit
158
docs/design/timeline-comp.tsx
Normal file
158
docs/design/timeline-comp.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Timeline } from "@/components/ui/timeline";
|
||||
|
||||
export function TimelineDemo() {
|
||||
const data = [
|
||||
{
|
||||
title: "2024",
|
||||
content: (
|
||||
<div>
|
||||
<p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
|
||||
Built and launched Aceternity UI and Aceternity UI Pro from scratch
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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}
|
||||
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-3.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-4.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]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Early 2023",
|
||||
content: (
|
||||
<div>
|
||||
<p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
|
||||
I usually run out of copy, but when I see content this big, I try to
|
||||
integrate lorem ipsum.
|
||||
</p>
|
||||
<p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
|
||||
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>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Image
|
||||
src="https://assets.aceternity.com/pro/hero-sections.png"
|
||||
alt="hero 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/features-section.png"
|
||||
alt="feature 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/pro/bento-grids.png"
|
||||
alt="bento 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/cards.png"
|
||||
alt="cards 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]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Changelog",
|
||||
content: (
|
||||
<div>
|
||||
<p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-4">
|
||||
Deployed 5 new components on Aceternity today
|
||||
</p>
|
||||
<div className="mb-8">
|
||||
<div className="flex gap-2 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
|
||||
✅ Card grid component
|
||||
</div>
|
||||
<div className="flex gap-2 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
|
||||
✅ Startup template Aceternity
|
||||
</div>
|
||||
<div className="flex gap-2 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
|
||||
✅ Random file upload lol
|
||||
</div>
|
||||
<div className="flex gap-2 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
|
||||
✅ Himesh Reshammiya Music CD
|
||||
</div>
|
||||
<div className="flex gap-2 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
|
||||
✅ Salman Bhai Fan Club registrations open
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Image
|
||||
src="https://assets.aceternity.com/pro/hero-sections.png"
|
||||
alt="hero 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/features-section.png"
|
||||
alt="feature 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/pro/bento-grids.png"
|
||||
alt="bento 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/cards.png"
|
||||
alt="cards 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]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="min-h-screen w-full">
|
||||
<div className="absolute top-0 left-0 w-full">
|
||||
<Timeline data={data} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user