Featured
A curated collection of our best blocks, crafted to help you build beautiful interfaces faster.
Files
"use client"
import { Button } from "@/components/ui/button"
import * as React from "react"
const images = [
{ src: "/img/hero-1.jpg", alt: "Hero 1" },
{ src: "/img/chat-1-light.jpg", alt: "Chat UI" },
{ src: "/img/hero-2.jpg", alt: "Hero 2" },
{ src: "/img/dashboard-1-dark.jpg", alt: "Dashboard" },
{ src: "/img/login-1.jpg", alt: "Login Screen" },
]
function createCSS(id: string) {
return `
@keyframes orbit-${id} {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
`
}
export function HeroSection() {
const id = React.useId().replace(/[^a-zA-Z0-9]/g, "")
const css = React.useMemo(() => createCSS(id), [id])
const totalCards = 11
const radiusCqw = 32
return (
<section className="relative h-screen w-full">
<div className="relative border-x px-3 max-w-7xl mx-auto h-full w-full">
<div className="relative border-x flex h-full w-full flex-col justify-between overflow-hidden">
<div
className="absolute h-full w-full z-0" >
<div
style={{
WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)',
backgroundImage: 'linear-gradient(var(--primary) 1px, transparent 1px), linear-gradient(90deg, var(--primary) 1px, transparent 1px)',
backgroundSize: '20px 20px',
bottom: '0',
height: '60%',
left: '0',
maskImage: 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%)',
opacity: 0.5,
pointerEvents: 'none',
position: 'absolute',
width: '100%'
}}
/>
</div>
<style>{css}</style>
<div
className="relative flex w-full flex-col justify-between pt-[7vh] pb-[6vh] sm:pt-[9vh]"
style={{ containerType: "inline-size" }}
>
{/* Hero Content */}
<div className="relative z-10 flex flex-col items-center justify-center pt-10">
<div className="select-none text-center">
<h1 className="text-4xl md:text-7xl font-medium tracking-tighter">
Ideas into impact <br /> Design with AI
</h1>
</div>
<p className="mt-10 max-w-xl lowercase px-6 text-center text-sm leading-6 text-muted-foreground">
WE BUILD BOLD BRANDS, DIGITAL EXPERIENCES,
AND VISUAL SYSTEMS DESIGNED TO MAKE AN IMPACT.
STRATEGY, CREATIVITY, AND TECHNOLOGY - IN ONE PLACE.
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
<Button size="lg" className="gap-2">
Explore our work
</Button>
<Button variant="outline" size="lg" className="gap-2">
Start a project
</Button>
</div>
</div>
<div
className="pointer-events-none relative my-auto mt-10 h-[20cqw] w-full"
style={{
perspective: "100cqw",
perspectiveOrigin: "50% 50%",
}}
>
<div
className="absolute inset-0 flex items-center justify-center"
style={{
transformStyle: "preserve-3d",
transform: "rotateX(-18deg) rotateY(0deg)",
animation: `orbit-${id} 40s linear infinite`,
}}
>
{Array.from({ length: totalCards }, (_, index) => {
const angle = (index / totalCards) * 360
const image = images[index % images.length]
return (
<div
key={index}
className="absolute h-[10cqw] w-[17cqw] overflow-hidden backdrop-blur-md rounded border shadow-2xl"
style={{
transformStyle: "preserve-3d",
transform: `
rotateY(${angle}deg)
translateZ(${radiusCqw}cqw)
`,
}}
>
<img
src={image?.src ?? ""}
alt={image?.alt ?? ""}
loading="lazy"
decoding="async"
draggable={false}
className="h-full w-full select-none p-1 object-contain"
/>
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
</section>
)
}A split-screen hero section with branding, theme toggle, video, work, and contact cards.
hero-4
Files
import { Dithering, DotOrbit, Spiral } from "@paper-design/shaders-react"
export function FeatureSection() {
return (
<div className="mx-auto max-w-5xl flex flex-col justify-center h-[100vh] w-full">
<div className="flex flex-col items-center justify-center pt-10 pb-3">
{/* Heading */}
<div>
<h1 className="mx-auto mb-10 max-w-xs px-6 text-center text-xl md:max-w-full md:text-3xl">
Design, built to make your brand stand out.
</h1>
</div>
{/* Cards */}
<div className="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
{/* Card 1 — Strategy */}
<div className="h-[430px] md:h-[460px] overflow-hidden border border-dashed">
<div className="relative h-full ">
<img
src="/stock/strategy.jpg"
alt="DesignAli Strategy"
width={300}
height={300}
className="absolute border left-1/2 top-39 z-10 h-[250px] w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-sm bg-background object-cover shadow-xl transition-all duration-500 hover:scale-105"
/>
<DotOrbit
className="absolute bottom-0 h-full w-full "
colors={["#00aaff"]}
colorBack="#00000000"
stepsPerColor={1}
size={1}
scale={1.5}
sizeRange={1}
spreading={1}
speed={0.5}
/>
<div className="absolute bottom-0 left-1/2 w-full -translate-x-1/2 rounded-b-sm bg-gradient-to-t from-white to-transparent p-8 pt-60 dark:from-black dark:to-transparent">
<div>
<h2 className="text-2xl">Strategy</h2>
<p className="text-sm pt-2 text-muted-foreground">
We shape your brand strategy, positioning, and creative direction to give your business a clear and confident identity.
</p>
</div>
</div>
</div>
</div>
{/* Card 2 — Design */}
<div className="h-[430px] md:h-[460px] overflow-hidden border border-dashed">
<div className="relative h-full ">
<img
src="/stock/design.jpg"
alt="DesignAli Creative Design"
width={300}
height={300}
className="absolute border left-1/2 top-39 z-10 h-[250px] w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-sm bg-background object-cover shadow-xl transition-all duration-500 hover:scale-105"
/>
<Dithering
className="absolute bottom-0 h-full w-full "
colorBack="#00000000"
colorFront="#00aaff"
shape="ripple"
type="8x8"
size={2}
speed={1}
offsetY={-0.15}
/>
<div className="absolute bottom-0 left-1/2 w-full -translate-x-1/2 rounded-b-sm bg-gradient-to-t from-white to-transparent p-8 pt-60 dark:from-black dark:to-transparent">
<div>
<h2 className="text-2xl">Design</h2>
<p className="text-sm pt-2 text-muted-foreground">
We create memorable brands, websites, and digital experiences that look distinctive, feel intuitive, and connect with your audience.
</p>
</div>
</div>
</div>
</div>
{/* Card 3 — Development */}
<div className="h-[430px] md:h-[460px] overflow-hidden border border-dashed">
<div className="relative h-full ">
<img
src="/stock/development.jpg"
alt="DesignAli Development"
width={300}
height={300}
className="absolute border left-1/2 top-39 z-10 h-[250px] w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-sm bg-background object-cover shadow-xl transition-all duration-500 hover:scale-105"
/>
<Spiral
className="absolute bottom-0 h-full w-full "
colorBack="#a0f02800"
colorFront="#00aaff"
density={0.5}
distortion={0}
strokeWidth={0.1}
strokeTaper={0}
strokeCap={0}
noise={1}
noiseFrequency={0.25}
softness={0}
speed={0.75}
scale={1.3}
/>
<div className="absolute bottom-0 left-1/2 w-full -translate-x-1/2 rounded-b-sm bg-gradient-to-t from-white to-transparent p-8 pt-60 dark:from-black dark:to-transparent">
<div>
<h2 className="text-2xl">Development</h2>
<p className="text-sm pt-2 text-muted-foreground">
We turn designs into fast, responsive, and scalable digital experiences built to perform across every modern device.
</p>
</div>
</div>
</div>
</div>
</div>
<div className="relative w-full border mt-3 border-dashed h-full">
<div className="grid w-full grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<div className="border-b border-dashed py-10 md:border-r lg:border-b-0 lg:border-r">
<p className="text-center text-md">48 Hours Delivery</p>
</div>
<div className="border-b py-10 border-dashed lg:border-b-0 lg:border-r">
<p className="text-center text-md">Access to Design Portal</p>
</div>
<div className="border-b py-10 border-dashed md:border-r md:border-b-0 lg:border-r">
<p className="text-center text-md">Top-notch quality</p>
</div>
<div className="py-10">
<p className="text-center text-md">Unlimited Design Requests</p>
</div>
</div>
</div>
</div>
</div>
)
}
A simple feature section.
feature-01
Files
"use client";
import Link from "next/link";
import {
ArrowDown,
ArrowRight,
Moon,
Sun,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Logo } from "@/components/logo";
export function HeroSection() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<section className="min-h-screen w-full bg-background text-foreground">
<div className="grid min-h-screen grid-cols-1 lg:grid-cols-2">
<div className="relative flex min-h-screen flex-col border-r border-border">
<div className="relative flex h-[150px] items-center overflow-hidden border-b border-border px-8 sm:px-12 lg:px-16">
<div
className="
pointer-events-none
absolute
inset-0
opacity-40
dark:opacity-20
"
style={{
backgroundImage:
"radial-gradient(circle, currentColor 1.5px, transparent 1.5px)",
backgroundSize: "22px 22px",
}}
/>
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-background/90 via-background/80 to-background" />
{/* Logo */}
<div className="relative z-10">
<Link
href="/"
className="uppercase
text-4xl
font-medium
flex gap-4
items-center
"
>
<Logo className="h-8 w-full" />
designali
</Link>
</div>
{/* Theme Button */}
<div className="relative z-10 ml-auto">
{mounted && (
<Button
variant="outline"
size="icon"
className="rounded-full"
onClick={() =>
setTheme(theme === "dark" ? "light" : "dark")
}
>
{theme === "dark" ? (
<Sun className="size-4" />
) : (
<Moon className="size-4" />
)}
<span className="sr-only">
Toggle theme
</span>
</Button>
)}
</div>
</div>
{/* --------------------------------------------- */}
{/* CONTENT */}
{/* --------------------------------------------- */}
<div className="flex flex-1 flex-col justify-end px-8 py-12 sm:px-12 lg:px-16 lg:pb-14">
<div className="max-w-[760px]">
{/* Heading */}
<h1
className="
text-3xl
md:text-4xl
xl:text-5xl
font-medium
"
>
We are a study of production creative
for CGI, 3D, motion and development web.
</h1>
{/* Description */}
<p
className="
mt-8
text-muted-foreground
"
>
Designali combines art direction, CGI, motion
design, web development, and integrated AI
workflows with ongoing R&D, experimentation,
and production-ready execution for brands
and agencies.
</p>
{/* Scroll */}
<Button
variant="outline"
className="
mt-7
gap-3
text-xs
uppercase
"
>
Scroll to explore
<ArrowDown className="size-4" />
</Button>
</div>
</div>
</div>
<div className="grid min-h-screen grid-rows-[1fr_auto]">
<div className="relative min-h-[500px] overflow-hidden bg-muted">
<video
className="absolute inset-0 h-full w-full object-cover"
src="/vid/colorful-spheres.mp4"
autoPlay
muted
loop
playsInline
/>
</div>
<div className="grid grid-cols-2">
{/* WORK */}
<Card
className="
group
min-h-[280px]
rounded-none
border-0
border-t
p-7
bg-background
text-foreground
"
>
<Link
href="/work"
className="
flex
h-full
flex-col
justify-between
"
>
<div className="flex justify-end">
<ArrowRight
className="
size-5
text-muted-foreground
transition-transform
duration-300
group-hover:translate-x-2
group-hover:text-foreground
"
/>
</div>
<div>
<h2
className="
text-xl
md:text-3xl
"
>
Work
</h2>
<p className="mt-2 text-sm text-muted-foreground sm:text-base">
Explore the portfolio
</p>
</div>
</Link>
</Card>
{/* CONTACT */}
<Card
className="
group
min-h-[280px]
rounded-none
border-0
border-l
border-t
border-border
bg-foreground
p-7
text-background
"
>
<Link
href="/contact"
className="
flex
h-full
flex-col
justify-between
"
>
<div className="flex justify-end">
<ArrowRight
className="
size-5
opacity-60
transition-transform
duration-300
group-hover:translate-x-2
"
/>
</div>
<div>
<h2
className="
text-xl
md:text-3xl
font-medium
"
>
Contact us
</h2>
<p className="mt-2 text-sm opacity-60 sm:text-base">
Start your project
</p>
</div>
</Link>
</Card>
</div>
</div>
</div>
</section>
);
}A split-screen hero section with branding, theme toggle, video, work, and contact cards.
hero-1
Files
import { Header } from "@/components/header"
export function Header01() {
return (
<div className="flex min-h-screen w-full flex-col overflow-hidden">
<Header />
<main className="flex-1">
<section className="flex h-screen items-center justify-center">
<h1 className="text-4xl font-bold">Hero</h1>
</section>
<section className="flex h-screen items-center justify-center">
<h1 className="text-4xl font-bold">Section</h1>
</section>
</main>
</div>
)
}
A simple header section.
header-01
Files
import {
ClaudeAI,
Cursor,
Github,
GoogleGemini,
Grok,
OpenAI,
Replicate,
Vercel,
} from "@designali/logos"
export function Logos01() {
return (
<div className="flex min-h-screen flex-col items-center justify-center py-20">
<div className="z-10">
<h1 className="mb-10 px-20 text-center text-sm font-medium text-muted-foreground">
Trusted by the world’s most creative companies.
</h1>
<div className="mx-auto max-w-md">
<div className="flex flex-wrap items-center justify-center gap-12 px-10">
<OpenAI size={40} />
<ClaudeAI size={40} />
<Replicate size={40} />
<Cursor size={40} />
<GoogleGemini size={40} />
<Github size={40} />
<Grok size={40} />
<Vercel size={40} />
</div>
</div>
</div>
<div
className="absolute inset-0 z-0"
style={{
background:
"linear-gradient(to bottom, var(--background) 0%, var(--background) 55%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at 50% 110%, var(--primary) 0%, var(--background) 70%)",
opacity: 0.7,
}}
>
<div
style={{
WebkitMaskImage:
"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)",
backgroundImage:
"linear-gradient(var(--primary) 1px, transparent 1px), linear-gradient(90deg, var(--primary) 1px, transparent 1px)",
backgroundSize: "80px 80px",
bottom: "0",
height: "55%",
left: "0",
maskImage:
"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)",
pointerEvents: "none",
position: "absolute",
width: "100%",
}}
/>
</div>
</div>
)
}
A simple logos section.
logos-01
