Blocks
Beautifully designed, production-ready.
Explorer
components/hero-01.tsx
import { Volume2Icon } from "lucide-react"
import type { JSX } from "react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import {
LaravelIcon,
NextJSIcon,
NodeJSIcon,
ReactIcon,
TailwindCSSIcon,
} from "@/components/hero-01-icons"
export function Hero01() {
return (
<div className="relative w-screen overflow-hidden pb-8">
<div className="container mx-auto max-sm:px-2">
<div className="screen-line-top screen-line-bottom border-x border-line md:hidden">
<svg
className="pointer-events-none absolute inset-0 overflow-visible text-line"
viewBox="0 0 210 340"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g className="text-line">
<path
d="M380.853 105.099L-201.625 464.632"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
<path
d="M-165.247 -267.831L369.777 600.141"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<path
d="M209.5 260L130 260"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M129.5 339.5L129.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M159.5 260L159.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M3.09944e-06 210L209.5 210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M160 240L130.133 240"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M149.5 240L149.5 260"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<rect
x="159.5"
y="210"
width="30"
height="30"
transform="rotate(90 159.5 210)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="149.5"
y="240"
width="20"
height="20"
transform="rotate(90 149.5 240)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="159.5"
y="240"
width="20"
height="10"
transform="rotate(90 159.5 240)"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
{/* golden spiral */}
<path
className="text-border"
d="M149.643 239.897C155.106 239.897 159.619 244.414 159.619 249.882C159.619 255.35 155.106 259.868 149.643 259.868C138.717 259.868 129.69 250.833 129.69 239.897C129.69 223.493 143.23 209.941 159.619 209.941C186.935 209.941 209.5 232.527 209.5 259.868C209.5 303.613 173.396 339.75 129.69 339.75C58.6695 339.75 -1.22732e-05 281.027 -9.16589e-06 209.941C-4.14648e-06 95.1103 94.7738 0.24998 209.5 0.249985C395.69 0.250001 549.5 154.06 549.5 340.25"
stroke="currentColor"
strokeWidth="2"
vectorEffect="non-scaling-stroke"
/>
</svg>
<div className="relative grid aspect-[1/1.618] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1.618fr_1fr]">
<MainContent className="col-[1/span_2] row-1" />
<div className="col-2 row-2" />
<div className="col-1 row-2 flex flex-col items-center justify-center overflow-hidden p-2 sm:p-4" />
</div>
</div>
<div className="screen-line-top screen-line-bottom hidden border-x border-line md:block">
<svg
className="pointer-events-none absolute inset-0 overflow-visible text-line"
viewBox="0 0 340 210"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g className="text-line">
<path
d="M105.1 -170.853L464.633 411.625"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
<path
d="M-267.831 375.247L600.141 -159.777"
stroke="currentColor"
strokeDasharray="4 2"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<path
d="M260 0.5V80"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M339.5 80.5H210"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<path
d="M210 210V0.5"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
<g>
<rect
x="210"
y="50.5"
width="30"
height="30"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="240"
y="60.5"
width="20"
height="20"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
<rect
x="240"
y="50.5"
width="20"
height="10"
stroke="currentColor"
vectorEffect="non-scaling-stroke"
/>
</g>
{/* golden spiral */}
<path
className="text-border"
d="M239.897 60.3571C239.897 54.894 244.414 50.381 249.882 50.381C255.35 50.381 259.868 54.894 259.868 60.3571C259.868 71.2835 250.833 80.3095 239.897 80.3095C223.493 80.3095 209.941 66.7704 209.941 50.381C209.941 23.0652 232.527 0.499999 259.868 0.5C303.613 0.499995 339.75 36.6043 339.75 80.3095C339.75 151.33 281.027 210 209.941 210C95.1103 210 0.25 115.226 0.25 0.5C0.250008 -185.69 154.06 -339.5 340.25 -339.5"
stroke="currentColor"
strokeWidth="2"
vectorEffect="non-scaling-stroke"
/>
</svg>
<div className="relative grid aspect-[1.618/1] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1fr_1.618fr]">
<MainContent className="col-1 row-[1/span_2]" />
<div className="col-2 row-1" />
<div className="col-2 row-2 flex items-center justify-center overflow-hidden p-4 lg:p-8" />
</div>
</div>
</div>
</div>
)
}
function MainContent({ className }: { className?: string }) {
return (
<div
className={cn(
"flex flex-col justify-center overflow-hidden p-4 lg:p-8",
className
)}
>
<h1 className="mb-4 font-heading text-[2.5rem] leading-none font-semibold tracking-tight text-foreground sm:mb-6 sm:text-6xl md:text-5xl lg:text-6xl xl:text-7xl">
Plan. Build. Ship.
</h1>
<p className="mb-6 text-base leading-normal! text-muted-foreground sm:mb-8 sm:text-xl sm:text-balance md:text-lg lg:text-xl">
Acme{" "}
<button
className="relative top-0.75 inline-flex transition-[scale] outline-none active:scale-[0.97] sm:top-1"
aria-label="Pronunciation"
>
<Volume2Icon className="size-[1em]" />
</button>{" "}
provides{" "}
<strong className="font-normal text-foreground">professional,</strong>{" "}
<strong className="font-normal text-foreground">high-quality</strong>{" "}
software design and development services based on your ideas.
</p>
<div className="mb-6 grid grid-cols-2 items-center gap-4 sm:mb-8 sm:flex">
<Button className="border-none px-4 sm:px-8" size="lg" asChild>
<a href="#">Sign up now</a>
</Button>
<Button className="px-4 sm:px-8" variant="outline" size="lg" asChild>
<a href="#">Learn more</a>
</Button>
</div>
<div className="relative -ml-4 lg:ml-0">
<div className="absolute -top-2 right-0 z-1 block h-10 w-20 bg-background mask-[linear-gradient(to_left,white,transparent)] lg:hidden" />
<div className="no-scrollbar flex items-center gap-4 overflow-x-auto px-4 lg:px-0">
<TechItem icon={<NodeJSIcon />} title="Node.js" />
<TechItem icon={<LaravelIcon />} title="Laravel" />
<TechItem icon={<NextJSIcon />} title="Next.js" />
<TechItem icon={<ReactIcon />} title="React" />
<TechItem icon={<TailwindCSSIcon />} title="Tailwind CSS" />
</div>
</div>
</div>
)
}
function TechItem({ icon, title }: { icon: JSX.Element; title: string }) {
return (
<div className="flex items-center space-x-2 text-muted-foreground select-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
{icon}
<span className="text-sm font-medium whitespace-nowrap">{title}</span>
</div>
)
}
A hero section with a golden spiral background
@ncdai/hero-01
Explorer
components/testimonials-01.tsx
import type { TestimonialType } from "@/components/testimonial-list"
import { TestimonialList } from "@/components/testimonial-list"
export function Testimonials01() {
return (
<div className="flex flex-col gap-2 [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
<TestimonialList data={TESTIMONIALS_1} />
<TestimonialList data={TESTIMONIALS_2} direction="right" />
</div>
)
}
const TESTIMONIALS_1: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/kapehe_ok",
authorName: "Kap",
authorTagline: "Head of Developer Community @Vercel",
url: "https://x.com/kapehe_ok/status/1948104774358106612",
quote: "one of my favorite projects that submitted! you are crushing it!",
},
{
authorAvatar: "https://unavatar.io/x/rauchg",
authorName: "Guillermo Rauch",
authorTagline: "CEO @Vercel",
url: "https://x.com/rauchg/status/1978913158514237669",
quote:
"awesome. Love the components, especially slide-to-unlock. Great job",
},
{
authorAvatar: "https://unavatar.io/x/iamsahaj_xyz",
authorName: "Sahaj",
authorTagline: "Creator of tweakcn.com",
url: "https://x.com/iamsahaj_xyz/status/1982814244501381239",
quote:
"remember seeing it on @mannupaaji’s review. it’s one of the best looking ones I’ve seen",
},
{
authorAvatar: "https://unavatar.io/x/FrancescoCiull4",
authorName: "Francesco Ciulla",
authorTagline: "Developer Advocate @daily.dev",
url: "https://x.com/FrancescoCiull4/status/2006332479536529608",
quote:
"your portfolio is stunning. i created mine some weeks ago but this is another planet.",
},
{
authorAvatar: "https://unavatar.io/x/orcdev",
authorName: "OrcDev",
authorTagline: "Creator of 8bitcn.com",
url: "https://x.com/orcdev/status/2011373509310878010",
quote: "@iamncdai is one of the best design engineers!",
},
{
authorAvatar: "https://unavatar.io/x/shadcncraft?v=2",
authorName: "shadcncraft",
authorTagline: "shadcncraft.com",
url: "https://x.com/shadcncraft/status/2017091317244055988",
quote: "Love your work Dai! You’re a great talent :-)",
},
{
authorAvatar: "https://unavatar.io/x/khushiirl",
authorName: "khushi.vy",
authorTagline: "Software Engineer",
url: "https://x.com/khushiirl/status/2025894411155206168",
quote: "Goated portfolio. I love the whole UI in Vercel style",
},
{
authorAvatar: "https://unavatar.io/x/dimicx",
authorName: "dimi",
authorTagline: "Design Engineer",
url: "https://x.com/dimicx/status/2035018694053577149",
quote:
"i like this subtle version a lot more than the over-the-top examples i see everywhere, very nice",
},
]
const TESTIMONIALS_2: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/MaxPrilutskiy",
authorName: "Max Prilutskiy",
authorTagline: "Creator of Lingo.dev",
url: "https://x.com/MaxPrilutskiy/status/1923952193893466379",
quote: "i like your style! :)",
},
{
authorAvatar: "https://unavatar.io/x/jordwalke",
authorName: "jordwalke",
authorTagline: "Creator of React",
url: "https://x.com/jordwalke/status/1937165909778657589",
quote: "Looks great",
},
{
authorAvatar: "https://unavatar.io/x/mannupaaji",
authorName: "Manu Arora",
authorTagline: "Creator of ui.aceternity.com",
url: "https://x.com/mannupaaji/status/1944755561117163597",
quote: "Great work on the portfolio",
},
{
authorAvatar: "https://unavatar.io/x/ajaypatel_aj",
authorName: "Ajay Patel",
authorTagline: "Creator of shadcnstudio.com",
url: "https://x.com/ajaypatel_aj/status/1992946036558778494",
quote: "This Portfolio is something else",
},
{
authorAvatar: "https://unavatar.io/x/davidhdev",
authorName: "David Haz",
authorTagline: "Creator of reactbits.dev",
url: "https://x.com/davidhdev/status/2017868986969444511",
quote: "Simple and clean, love it!",
},
{
authorAvatar: "https://unavatar.io/x/uixmat",
authorName: "Matt",
authorTagline: "Building bklit.com & ui.bklit.com",
url: "https://x.com/uixmat/status/2023145872771436904",
quote: "great work bro",
},
{
authorAvatar: "https://unavatar.io/x/branmcconnell",
authorName: "Brandon McConnell",
authorTagline: "Frontend Engineer @mintlify",
url: "https://x.com/branmcconnell/status/2028391281198862377",
quote: "amazing, such cool libraries",
},
{
authorAvatar: "https://unavatar.io/x/shadcn",
authorName: "shadcn",
authorTagline: "Creator of shadcn/ui",
url: "https://x.com/shadcn/status/2032193591133495700",
quote: "You’re doing amazing work.",
},
{
authorAvatar: "https://unavatar.io/x/joshpuckett",
authorName: "joshpuckett",
authorTagline: "Teaching at interfacecraft.dev",
url: "https://x.com/joshpuckett/status/2038713206764617896",
quote: "Yooo I love this 🎨",
},
]
A testimonials section with dual marquees
@ncdai/testimonials-01
Explorer
components/testimonials-02.tsx
import type { TestimonialType } from "@/components/testimonial-list"
import { TestimonialList } from "@/components/testimonial-list"
export function Testimonials02() {
return (
<div className="max-w-screen overflow-x-hidden">
<div className="container mx-auto px-4 py-8">
<div className="border-x border-line">
<h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
Loved by Devs Worldwide
</h2>
<p className="p-4 text-base text-balance text-muted-foreground">
See what developers are saying about my work and projects.
</p>
<div className="screen-line-top screen-line-bottom before:z-11 after:z-11 [&_.rfm-initial-child-container]:items-stretch! [&_.rfm-marquee]:items-stretch!">
<TestimonialList data={TESTIMONIALS_1} />
<div className="screen-line-top screen-line-bottom flex h-4" />
<TestimonialList data={TESTIMONIALS_2} direction="right" />
</div>
</div>
</div>
</div>
)
}
const TESTIMONIALS_1: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/kapehe_ok",
authorName: "Kap",
authorTagline: "Head of Developer Community @Vercel",
url: "https://x.com/kapehe_ok/status/1948104774358106612",
quote: "one of my favorite projects that submitted! you are crushing it!",
},
{
authorAvatar: "https://unavatar.io/x/rauchg",
authorName: "Guillermo Rauch",
authorTagline: "CEO @Vercel",
url: "https://x.com/rauchg/status/1978913158514237669",
quote:
"awesome. Love the components, especially slide-to-unlock. Great job",
},
{
authorAvatar: "https://unavatar.io/x/iamsahaj_xyz",
authorName: "Sahaj",
authorTagline: "Creator of tweakcn.com",
url: "https://x.com/iamsahaj_xyz/status/1982814244501381239",
quote:
"remember seeing it on @mannupaaji’s review. it’s one of the best looking ones I’ve seen",
},
{
authorAvatar: "https://unavatar.io/x/FrancescoCiull4",
authorName: "Francesco Ciulla",
authorTagline: "Developer Advocate @daily.dev",
url: "https://x.com/FrancescoCiull4/status/2006332479536529608",
quote:
"your portfolio is stunning. i created mine some weeks ago but this is another planet.",
},
{
authorAvatar: "https://unavatar.io/x/orcdev",
authorName: "OrcDev",
authorTagline: "Creator of 8bitcn.com",
url: "https://x.com/orcdev/status/2011373509310878010",
quote: "@iamncdai is one of the best design engineers!",
},
{
authorAvatar: "https://unavatar.io/x/shadcncraft?v=2",
authorName: "shadcncraft",
authorTagline: "shadcncraft.com",
url: "https://x.com/shadcncraft/status/2017091317244055988",
quote: "Love your work Dai! You’re a great talent :-)",
},
{
authorAvatar: "https://unavatar.io/x/khushiirl",
authorName: "khushi.vy",
authorTagline: "Software Engineer",
url: "https://x.com/khushiirl/status/2025894411155206168",
quote: "Goated portfolio. I love the whole UI in Vercel style",
},
{
authorAvatar: "https://unavatar.io/x/dimicx",
authorName: "dimi",
authorTagline: "Design Engineer",
url: "https://x.com/dimicx/status/2035018694053577149",
quote:
"i like this subtle version a lot more than the over-the-top examples i see everywhere, very nice",
},
]
const TESTIMONIALS_2: TestimonialType[] = [
{
authorAvatar: "https://unavatar.io/x/MaxPrilutskiy",
authorName: "Max Prilutskiy",
authorTagline: "Creator of Lingo.dev",
url: "https://x.com/MaxPrilutskiy/status/1923952193893466379",
quote: "i like your style! :)",
},
{
authorAvatar: "https://unavatar.io/x/jordwalke",
authorName: "jordwalke",
authorTagline: "Creator of React",
url: "https://x.com/jordwalke/status/1937165909778657589",
quote: "Looks great",
},
{
authorAvatar: "https://unavatar.io/x/mannupaaji",
authorName: "Manu Arora",
authorTagline: "Creator of ui.aceternity.com",
url: "https://x.com/mannupaaji/status/1944755561117163597",
quote: "Great work on the portfolio",
},
{
authorAvatar: "https://unavatar.io/x/ajaypatel_aj",
authorName: "Ajay Patel",
authorTagline: "Creator of shadcnstudio.com",
url: "https://x.com/ajaypatel_aj/status/1992946036558778494",
quote: "This Portfolio is something else",
},
{
authorAvatar: "https://unavatar.io/x/davidhdev",
authorName: "David Haz",
authorTagline: "Creator of reactbits.dev",
url: "https://x.com/davidhdev/status/2017868986969444511",
quote: "Simple and clean, love it!",
},
{
authorAvatar: "https://unavatar.io/x/uixmat",
authorName: "Matt",
authorTagline: "Building bklit.com & ui.bklit.com",
url: "https://x.com/uixmat/status/2023145872771436904",
quote: "great work bro",
},
{
authorAvatar: "https://unavatar.io/x/branmcconnell",
authorName: "Brandon McConnell",
authorTagline: "Frontend Engineer @mintlify",
url: "https://x.com/branmcconnell/status/2028391281198862377",
quote: "amazing, such cool libraries",
},
{
authorAvatar: "https://unavatar.io/x/shadcn",
authorName: "shadcn",
authorTagline: "Creator of shadcn/ui",
url: "https://x.com/shadcn/status/2032193591133495700",
quote: "You’re doing amazing work.",
},
{
authorAvatar: "https://unavatar.io/x/joshpuckett",
authorName: "joshpuckett",
authorTagline: "Teaching at interfacecraft.dev",
url: "https://x.com/joshpuckett/status/2038713206764617896",
quote: "Yooo I love this 🎨",
},
]
A testimonials section with a lined layout
@ncdai/testimonials-02
More blocks on the way…