songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "cf: test remove preview pages only"

Browse Source 
This reverts commit f5b4ed2859.
This commit is contained in:
javayhu 2025-06-09 00:42:09 +08:00
parent f5b4ed2859
commit c5d08a9846
80 changed files with 9880 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/[locale]/preview/call-to-action/one/page.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function CallToAction() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Start Building
</h2>
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
<div className="mt-12 flex flex-wrap justify-center gap-4">
<Button asChild size="lg">
<Link href="/">
<span>Get Started</span>
</Link>
</Button>
<Button asChild size="lg" variant="outline">
<Link href="/">
<span>Book Demo</span>
</Link>
</Button>
</div>
</div>
</div>
</section>
);
}

39
src/app/[locale]/preview/call-to-action/three/page.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Button } from '@/components/ui/button';
import { Mail, SendHorizonal } from 'lucide-react';
export default function CallToAction() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Start Building
</h2>
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
<form action="" className="mx-auto mt-10 max-w-sm lg:mt-12">
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
<input
placeholder="Your mail address"
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
type="email"
/>
<div className="md:pr-1.5 lg:pr-0">
<Button aria-label="submit" className="rounded-(--radius)">
<span className="hidden md:block">Get Started</span>
<SendHorizonal
className="relative mx-auto size-5 md:hidden"
strokeWidth={2}
/>
</Button>
</div>
</div>
</form>
</div>
</div>
</section>
);
}

31
src/app/[locale]/preview/call-to-action/two/page.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function CallToAction() {
return (
<section className="py-16">
<div className="mx-auto max-w-5xl rounded-3xl border px-6 py-12 md:py-20 lg:py-32">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Start Building
</h2>
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
<div className="mt-12 flex flex-wrap justify-center gap-4">
<Button asChild size="lg">
<Link href="/">
<span>Get Started</span>
</Link>
</Button>
<Button asChild size="lg" variant="outline">
<Link href="/">
<span>Book Demo</span>
</Link>
</Button>
</div>
</div>
</div>
</section>
);
}

233
src/app/[locale]/preview/comparator/one/page.tsx Normal file
View File

@ -0,0 +1,233 @@
import { Button } from '@/components/ui/button';
import { Cpu, Sparkles } from 'lucide-react';
import Link from 'next/link';
const tableData = [
{
feature: 'Feature 1',
free: true,
pro: true,
startup: true,
},
{
feature: 'Feature 2',
free: true,
pro: true,
startup: true,
},
{
feature: 'Feature 3',
free: false,
pro: true,
startup: true,
},
{
feature: 'Tokens',
free: '',
pro: '20 Users',
startup: 'Unlimited',
},
{
feature: 'Video calls',
free: '',
pro: '12 Weeks',
startup: '56',
},
{
feature: 'Support',
free: '',
pro: 'Secondes',
startup: 'Unlimited',
},
{
feature: 'Security',
free: '',
pro: '20 Users',
startup: 'Unlimited',
},
];
export default function PricingComparator() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="w-full overflow-auto lg:overflow-visible">
<table className="w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]">
<thead className="bg-background sticky top-0">
<tr className="*:py-4 *:text-left *:font-medium">
<th className="lg:w-2/5"></th>
<th className="space-y-3">
<span className="block">Free</span>
<Button asChild variant="outline" size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
<th className="bg-muted rounded-t-(--radius) space-y-3 px-4">
<span className="block">Pro</span>
<Button asChild size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
<th className="space-y-3">
<span className="block">Startup</span>
<Button asChild variant="outline" size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
</tr>
</thead>
<tbody className="text-caption text-sm">
<tr className="*:py-3">
<td className="flex items-center gap-2 font-medium">
<Cpu className="size-4" />
<span>Features</span>
</td>
<td></td>
<td className="bg-muted border-none px-4"></td>
<td></td>
</tr>
{tableData.slice(-4).map((row, index) => (
<tr key={index} className="*:border-b *:py-3">
<td className="text-muted-foreground">{row.feature}</td>
<td>
{row.free === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.free
)}
</td>
<td className="bg-muted border-none px-4">
<div className="-mb-3 border-b py-3">
{row.pro === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.pro
)}
</div>
</td>
<td>
{row.startup === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.startup
)}
</td>
</tr>
))}
<tr className="*:pb-3 *:pt-8">
<td className="flex items-center gap-2 font-medium">
<Sparkles className="size-4" />
<span>AI Models</span>
</td>
<td></td>
<td className="bg-muted border-none px-4"></td>
<td></td>
</tr>
{tableData.map((row, index) => (
<tr key={index} className="*:border-b *:py-3">
<td className="text-muted-foreground">{row.feature}</td>
<td>
{row.free === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.free
)}
</td>
<td className="bg-muted border-none px-4">
<div className="-mb-3 border-b py-3">
{row.pro === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.pro
)}
</div>
</td>
<td>
{row.startup === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path
fillRule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
clipRule="evenodd"
/>
</svg>
) : (
row.startup
)}
</td>
</tr>
))}
<tr className="*:py-6">
<td></td>
<td></td>
<td className="bg-muted rounded-b-(--radius) border-none px-4"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
);
}

98
src/app/[locale]/preview/contact/one/page.tsx Normal file
View File

@ -0,0 +1,98 @@
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Card } from '@/components/ui/card';
export default function ContactSection() {
return (
<section className="py-32">
<div className="mx-auto max-w-3xl px-8 lg:px-0">
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
Contact Sales
</h1>
<p className="mt-4 text-center">
We'll help you find the right plan and pricing for your business.
</p>
<Card className="mx-auto mt-12 max-w-lg p-8 shadow-md sm:p-16">
<div>
<h2 className="text-xl font-semibold">
Let's get you to the right place
</h2>
<p className="mt-4 text-sm">
Reach out to our sales team! We’re eager to learn more about how
you plan to use our application.
</p>
</div>
<form
action=""
className="**:[&>label]:block mt-12 space-y-6 *:space-y-3"
>
<div>
<Label htmlFor="name">Full name</Label>
<Input type="text" id="name" required />
</div>
<div>
<Label htmlFor="email">Work Email</Label>
<Input type="email" id="email" required />
</div>
<div>
<Label htmlFor="country">Country/Region</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select Country/Region" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">DR Congo</SelectItem>
<SelectItem value="2">United States</SelectItem>
<SelectItem value="3">France</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="website">Company Website</Label>
<Input type="url" id="website" />
<span className="text-muted-foreground inline-block text-sm">
Must start with 'https'
</span>
</div>
<div>
<Label htmlFor="job">Job function</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select Job Function" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Finance</SelectItem>
<SelectItem value="2">Education</SelectItem>
<SelectItem value="3">Legal</SelectItem>
<SelectItem value="4">More</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="msg">Message</Label>
<Textarea id="msg" rows={3} />
</div>
<Button>Submit</Button>
</form>
</Card>
</div>
</section>
);
}

124
src/app/[locale]/preview/contact/two/page.tsx Normal file
View File

@ -0,0 +1,124 @@
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import Link from 'next/link';
export default function ContactSection() {
return (
<section className="py-32">
<div className="mx-auto max-w-4xl px-4 lg:px-0">
<h1 className="mb-12 text-center text-4xl font-semibold lg:text-5xl">
Help us route your inquiry
</h1>
<div className="grid divide-y border md:grid-cols-2 md:gap-4 md:divide-x md:divide-y-0">
<div className="flex flex-col justify-between space-y-8 p-6 sm:p-12">
<div>
<h2 className="mb-3 text-lg font-semibold">Collaborate</h2>
<Link
href="mailto:hello@tailus.io"
className="text-lg text-blue-600 hover:underline dark:text-blue-400"
>
hello@tailus.io
</Link>
<p className="mt-3 text-sm">+243 000 000 000</p>
</div>
</div>
<div className="flex flex-col justify-between space-y-8 p-6 sm:p-12">
<div>
<h3 className="mb-3 text-lg font-semibold">Press</h3>
<Link
href="mailto:press@tailus.io"
className="text-lg text-blue-600 hover:underline dark:text-blue-400"
>
press@tailus.io
</Link>
<p className="mt-3 text-sm">+243 000 000 000</p>
</div>
</div>
</div>
<div className="h-3 border-x bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_6px)]"></div>
<form action="" className="border px-4 py-12 lg:px-0 lg:py-24">
<Card className="mx-auto max-w-lg p-8 sm:p-16">
<h3 className="text-xl font-semibold">
Let's get you to the right place
</h3>
<p className="mt-4 text-sm">
Reach out to our sales team! We’re eager to learn more about how
you plan to use our application.
</p>
<div className="**:[&>label]:block mt-12 space-y-6 *:space-y-3">
<div>
<Label htmlFor="name" className="space-y-2">
Full name
</Label>
<Input type="text" id="name" required />
</div>
<div>
<Label htmlFor="email" className="space-y-2">
Work Email
</Label>
<Input type="email" id="email" required />
</div>
<div>
<Label htmlFor="country" className="space-y-2">
Country/Region
</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a country" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">DR Congo</SelectItem>
<SelectItem value="2">United States</SelectItem>
<SelectItem value="3">France</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="website" className="space-y-2">
Company Website
</Label>
<Input type="url" id="website" />
</div>
<div>
<Label htmlFor="job" className="space-y-2">
Job function
</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a job function" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Finance</SelectItem>
<SelectItem value="2">Education</SelectItem>
<SelectItem value="3">Legal</SelectItem>
<SelectItem value="4">More</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="msg" className="space-y-2">
Message
</Label>
<Textarea id="msg" rows={3} />
</div>
<Button>Submit</Button>
</div>
</Card>
</form>
</div>
</section>
);
}

69
src/app/[locale]/preview/content/five/page.tsx Normal file
View File

@ -0,0 +1,69 @@
import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
<div className="mx-auto max-w-xl space-y-6 text-center md:space-y-12">
<h2 className="text-balance text-4xl font-medium lg:text-5xl">
The Lyra ecosystem brings together our models, products and
platforms.
</h2>
<p>
Lyra is evolving to be more than just the models. It supports an
entire ecosystem — from products to the APIs and platforms helping
developers and businesses innovate.
</p>
</div>
<img
className="rounded-(--radius) grayscale"
src="https://images.unsplash.com/photo-1616587226960-4a03badbe8bf?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="team image"
height=""
width=""
loading="lazy"
/>
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Lock className="size-4" />
<h3 className="text-sm font-medium">Security</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Sparkles className="size-4" />
<h3 className="text-sm font-medium">AI Powered</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
</div>
</div>
</section>
);
}

43
src/app/[locale]/preview/content/four/page.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Button } from '@/components/ui/button';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="grid gap-6 md:grid-cols-2 md:gap-12">
<h2 className="text-4xl font-medium">
The Lyra ecosystem brings together our models, products and
platforms.
</h2>
<div className="space-y-6">
<p>
Lyra is evolving to be more than just the models. It supports an
entire ecosystem — from products to the APIs and platforms helping
developers and businesses innovate.
</p>
<p>
Tailus UI.{' '}
<span className="font-bold">It supports an entire ecosystem</span>{' '}
— from products innovate. Sit minus, quod debitis autem quia
aspernatur delectus impedit modi, neque non id ad dignissimos?
Saepe deleniti perferendis beatae.
</p>
<Button
asChild
variant="secondary"
size="sm"
className="gap-1 pr-1.5"
>
<Link href="#">
<span>Learn More</span>
<ChevronRight className="size-2" />
</Link>
</Button>
</div>
</div>
</div>
</section>
);
}

69
src/app/[locale]/preview/content/one/page.tsx Normal file
View File

@ -0,0 +1,69 @@
import Image from 'next/image';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
The Lyra ecosystem brings together our models.
</h2>
<div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
<div className="relative mb-6 sm:mb-0">
<div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
<Image
src="/blocks/payments.png"
className="hidden rounded-[15px] dark:block"
alt="payments illustration dark"
width={1207}
height={929}
/>
<Image
src="/blocks/payments-light.png"
className="rounded-[15px] shadow dark:hidden"
alt="payments illustration light"
width={1207}
height={929}
/>
</div>
</div>
<div className="relative space-y-4">
<p className="text-muted-foreground">
Gemini is evolving to be more than just the models.{' '}
<span className="text-accent-foreground font-bold">
It supports an entire ecosystem
</span>{' '}
— from products innovate.
</p>
<p className="text-muted-foreground">
It supports an entire ecosystem — from products to the APIs and
platforms helping developers and businesses innovate
</p>
<div className="pt-6">
<blockquote className="border-l-4 pl-4">
<p>
Using TailsUI has been like unlocking a secret design
superpower. It's the perfect fusion of simplicity and
versatility, enabling us to create UIs that are as stunning as
they are user-friendly.
</p>
<div className="mt-6 space-y-3">
<cite className="block font-medium">John Doe, CEO</cite>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</section>
);
}

68
src/app/[locale]/preview/content/seven/page.tsx Normal file
View File

@ -0,0 +1,68 @@
import { Cpu, Zap } from 'lucide-react';
import Image from 'next/image';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
The Lyra ecosystem brings together our models.
</h2>
<div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
<div className="relative space-y-4">
<p className="text-muted-foreground">
Gemini is evolving to be more than just the models.{' '}
<span className="text-accent-foreground font-bold">
It supports an entire ecosystem
</span>{' '}
— from products innovate.
</p>
<p className="text-muted-foreground">
It supports an entire ecosystem — from products to the APIs and
platforms helping developers and businesses innovate
</p>
<div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
</div>
</div>
<div className="relative mt-6 sm:mt-0">
<div className="bg-linear-to-b aspect-67/34 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
<Image
src="/blocks/exercice-dark.png"
className="hidden rounded-[15px] dark:block"
alt="payments illustration dark"
width={1206}
height={612}
/>
<Image
src="/blocks/exercice.png"
className="rounded-[15px] shadow dark:hidden"
alt="payments illustration light"
width={1206}
height={612}
/>
</div>
</div>
</div>
</div>
</section>
);
}

174
src/app/[locale]/preview/content/six/page.tsx Normal file
View File

@ -0,0 +1,174 @@
import Link from 'next/link';
export default function CommunitySection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-3xl font-semibold">
Built by the Community <br /> for the Community
</h2>
<p className="mt-6">
Harum quae dolore orrupti aut temporibus ariatur.
</p>
</div>
<div className="mx-auto mt-12 flex max-w-lg flex-wrap justify-center gap-3">
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/1.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/2.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/3.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/4.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/5.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/6.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/7.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/1.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/8.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/9.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
<Link
href="https://github.com/meschacirung"
target="_blank"
title="Méschac Irung"
className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
>
<img
alt="John Doe"
src="https://randomuser.me/api/portraits/men/10.jpg"
loading="lazy"
width={120}
height={120}
/>
</Link>
</div>
</div>
</section>
);
}

46
src/app/[locale]/preview/content/three/page.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Button } from '@/components/ui/button';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
<img
className="rounded-(--radius) grayscale"
src="https://images.unsplash.com/photo-1530099486328-e021101a494a?q=80&w=2747&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="team image"
height=""
width=""
loading="lazy"
/>
<div className="grid gap-6 md:grid-cols-2 md:gap-12">
<h2 className="text-4xl font-medium">
The Lyra ecosystem brings together our models, products and
platforms.
</h2>
<div className="space-y-6">
<p>
Lyra is evolving to be more than just the models. It supports an
entire ecosystem — from products to the APIs and platforms helping
developers and businesses innovate.
</p>
<Button
asChild
variant="secondary"
size="sm"
className="gap-1 pr-1.5"
>
<Link href="#">
<span>Learn More</span>
<ChevronRight className="size-2" />
</Link>
</Button>
</div>
</div>
</div>
</section>
);
}

72
src/app/[locale]/preview/content/two/page.tsx Normal file
View File

@ -0,0 +1,72 @@
import { Cpu, Zap } from 'lucide-react';
import Image from 'next/image';
export default function ContentSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
The Lyra ecosystem brings together our models.
</h2>
<div className="relative">
<div className="relative z-10 space-y-4 md:w-1/2">
<p className="text-body">
Lyra is evolving to be more than just the models.{' '}
<span className="text-title font-medium">
It supports an entire ecosystem
</span>{' '}
— from products innovate.
</p>
<p>
It supports an entire ecosystem — from products to the APIs and
platforms helping developers and businesses innovate
</p>
<div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
</div>
</div>
<div className="mt-12 h-fit md:absolute md:-inset-y-12 md:inset-x-0 md:mt-0">
<div
aria-hidden
className="bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block"
></div>
<div className="border-border/50 relative rounded-2xl border border-dotted p-2">
<Image
src="/blocks/charts.png"
className="hidden rounded-[12px] dark:block"
alt="payments illustration dark"
width={1207}
height={929}
/>
<Image
src="/blocks/charts-light.png"
className="rounded-[12px] shadow dark:hidden"
alt="payments illustration light"
width={1207}
height={929}
/>
</div>
</div>
</div>
</div>
</section>
);
}

92
src/app/[locale]/preview/faqs/four/page.tsx Normal file
View File

@ -0,0 +1,92 @@
'use client';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import Link from 'next/link';
export default function FAQsFour() {
const faqItems = [
{
id: 'item-1',
question: 'How long does shipping take?',
answer:
'Standard shipping takes 3-5 business days, depending on your location. Express shipping options are available at checkout for 1-2 business day delivery.',
},
{
id: 'item-2',
question: 'What payment methods do you accept?',
answer:
'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. For enterprise customers, we also offer invoicing options.',
},
{
id: 'item-3',
question: 'Can I change or cancel my order?',
answer:
'You can modify or cancel your order within 1 hour of placing it. After this window, please contact our customer support team who will assist you with any changes.',
},
{
id: 'item-4',
question: 'Do you ship internationally?',
answer:
"Yes, we ship to over 50 countries worldwide. International shipping typically takes 7-14 business days. Additional customs fees may apply depending on your country's import regulations.",
},
{
id: 'item-5',
question: 'What is your return policy?',
answer:
'We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some specialty items may have different return terms, which will be noted on the product page.',
},
];
return (
<section className="py-16 md:py-24">
<div className="mx-auto max-w-5xl px-4 md:px-6">
<div className="mx-auto max-w-xl text-center">
<h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
Frequently Asked Questions
</h2>
<p className="text-muted-foreground mt-4 text-balance">
Discover quick and comprehensive answers to common questions about
our platform, services, and features.
</p>
</div>
<div className="mx-auto mt-12 max-w-xl">
<Accordion
type="single"
collapsible
className="bg-muted dark:bg-muted/50 w-full rounded-2xl p-1"
>
{faqItems.map((item) => (
<div className="group" key={item.id}>
<AccordionItem
value={item.id}
className="data-[state=open]:bg-card dark:data-[state=open]:bg-muted peer rounded-xl border-none px-7 py-1 data-[state=open]:border-none data-[state=open]:shadow-sm"
>
<AccordionTrigger className="cursor-pointer text-base hover:no-underline">
{item.question}
</AccordionTrigger>
<AccordionContent>
<p className="text-base">{item.answer}</p>
</AccordionContent>
</AccordionItem>
<hr className="mx-7 border-dashed group-last:hidden peer-data-[state=open]:opacity-0" />
</div>
))}
</Accordion>
<p className="text-muted-foreground mt-6 px-8">
Can't find what you're looking for? Contact our{' '}
<Link href="#" className="text-primary font-medium hover:underline">
customer support team
</Link>
</p>
</div>
</div>
</section>
);
}

75
src/app/[locale]/preview/faqs/one/page.tsx Normal file
View File

@ -0,0 +1,75 @@
export default function FAQs() {
return (
<section className="scroll-py-16 py-16 md:scroll-py-32 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="grid gap-y-12 px-2 lg:[grid-template-columns:1fr_auto]">
<div className="text-center lg:text-left">
<h2 className="mb-4 text-3xl font-semibold md:text-4xl">
Frequently <br className="hidden lg:block" /> Asked{' '}
<br className="hidden lg:block" />
Questions
</h2>
<p>Accusantium quisquam. Illo, omnis?</p>
</div>
<div className="divide-y divide-dashed sm:mx-auto sm:max-w-lg lg:mx-0">
<div className="pb-6">
<h3 className="font-medium">What is the refund policy?</h3>
<p className="text-muted-foreground mt-4">
We offer a 30-day money back guarantee. If you are not satisfied
with our product, you can request a refund within 30 days of
your purchase.
</p>
<ol className="list-outside list-decimal space-y-2 pl-4">
<li className="text-muted-foreground mt-4">
To request a refund, please contact our support team with your
order number and reason for the refund.
</li>
<li className="text-muted-foreground mt-4">
Refunds will be processed within 3-5 business days.
</li>
<li className="text-muted-foreground mt-4">
Please note that refunds are only available for new customers
and are limited to one per customer.
</li>
</ol>
</div>
<div className="py-6">
<h3 className="font-medium">How do I cancel my subscription?</h3>
<p className="text-muted-foreground mt-4">
You can cancel your subscription at any time by logging into
your account and clicking on the cancel button.
</p>
</div>
<div className="py-6">
<h3 className="font-medium">Can I upgrade my plan?</h3>
<p className="text-muted-foreground my-4">
Yes, you can upgrade your plan at any time by logging into your
account and selecting the plan you want to upgrade to.
</p>
<ul className="list-outside list-disc space-y-2 pl-4">
<li className="text-muted-foreground">
You will be charged the difference in price between your
current plan and the plan you are upgrading to.
</li>
<li className="text-muted-foreground">
Your new plan will take effect immediately and you will be
billed at the new rate on your next billing cycle.
</li>
</ul>
</div>
<div className="py-6">
<h3 className="font-medium">Do you offer phone support?</h3>
<p className="text-muted-foreground mt-4">
We do not offer phone support at this time. However, you can
contact us via email or live chat for any questions or concerns
you may have.
</p>
</div>
</div>
</div>
</div>
</section>
);
}

110
src/app/[locale]/preview/faqs/three/page.tsx Normal file
View File

@ -0,0 +1,110 @@
'use client';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { DynamicIcon, type IconName } from 'lucide-react/dynamic';
import Link from 'next/link';
type FAQItem = {
id: string;
icon: IconName;
question: string;
answer: string;
};
export default function FAQsThree() {
const faqItems: FAQItem[] = [
{
id: 'item-1',
icon: 'clock',
question: 'What are your business hours?',
answer:
'Our customer service team is available Monday through Friday from 9:00 AM to 8:00 PM EST, and weekends from 10:00 AM to 6:00 PM EST. During holidays, hours may vary and will be posted on our website.',
},
{
id: 'item-2',
icon: 'credit-card',
question: 'How do subscription payments work?',
answer:
'Subscription payments are automatically charged to your default payment method on the same day each month or year, depending on your billing cycle. You can update your payment information and view billing history in your account dashboard.',
},
{
id: 'item-3',
icon: 'truck',
question: 'Can I expedite my shipping?',
answer:
'Yes, we offer several expedited shipping options at checkout. Next-day and 2-day shipping are available for most U.S. addresses if orders are placed before 2:00 PM EST. International expedited shipping options vary by destination.',
},
{
id: 'item-4',
icon: 'globe',
question: 'Do you offer localized support?',
answer:
'We offer multilingual support in English, Spanish, French, German, and Japanese. Our support team can assist customers in these languages via email, chat, and phone during standard business hours for each respective region.',
},
{
id: 'item-5',
icon: 'package',
question: 'How do I track my order?',
answer:
'Once your order ships, you\'ll receive a confirmation email with a tracking number. You can use this number on our website or the carrier\'s website to track your package. You can also view order status and tracking information in your account dashboard under "Order History".',
},
];
return (
<section className="bg-muted dark:bg-background py-20">
<div className="mx-auto max-w-5xl px-4 md:px-6">
<div className="flex flex-col gap-10 md:flex-row md:gap-16">
<div className="md:w-1/3">
<div className="sticky top-20">
<h2 className="mt-4 text-3xl font-bold">
Frequently Asked Questions
</h2>
<p className="text-muted-foreground mt-4">
Can't find what you're looking for? Contact our{' '}
<Link
href="#"
className="text-primary font-medium hover:underline"
>
customer support team
</Link>
</p>
</div>
</div>
<div className="md:w-2/3">
<Accordion type="single" collapsible className="w-full space-y-2">
{faqItems.map((item) => (
<AccordionItem
key={item.id}
value={item.id}
className="bg-background shadow-xs rounded-lg border px-4 last:border-b"
>
<AccordionTrigger className="cursor-pointer items-center py-5 hover:no-underline">
<div className="flex items-center gap-3">
<div className="flex size-6">
<DynamicIcon
name={item.icon}
className="m-auto size-4"
/>
</div>
<span className="text-base">{item.question}</span>
</div>
</AccordionTrigger>
<AccordionContent className="pb-5">
<div className="px-9">
<p className="text-base">{item.answer}</p>
</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</div>
</div>
</section>
);
}

90
src/app/[locale]/preview/faqs/two/page.tsx Normal file
View File

@ -0,0 +1,90 @@
'use client';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import Link from 'next/link';
export default function FAQsTwo() {
const faqItems = [
{
id: 'item-1',
question: 'How long does shipping take?',
answer:
'Standard shipping takes 3-5 business days, depending on your location. Express shipping options are available at checkout for 1-2 business day delivery.',
},
{
id: 'item-2',
question: 'What payment methods do you accept?',
answer:
'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. For enterprise customers, we also offer invoicing options.',
},
{
id: 'item-3',
question: 'Can I change or cancel my order?',
answer:
'You can modify or cancel your order within 1 hour of placing it. After this window, please contact our customer support team who will assist you with any changes.',
},
{
id: 'item-4',
question: 'Do you ship internationally?',
answer:
"Yes, we ship to over 50 countries worldwide. International shipping typically takes 7-14 business days. Additional customs fees may apply depending on your country's import regulations.",
},
{
id: 'item-5',
question: 'What is your return policy?',
answer:
'We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some specialty items may have different return terms, which will be noted on the product page.',
},
];
return (
<section className="py-16 md:py-24">
<div className="mx-auto max-w-5xl px-4 md:px-6">
<div className="mx-auto max-w-xl text-center">
<h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
Frequently Asked Questions
</h2>
<p className="text-muted-foreground mt-4 text-balance">
Discover quick and comprehensive answers to common questions about
our platform, services, and features.
</p>
</div>
<div className="mx-auto mt-12 max-w-xl">
<Accordion
type="single"
collapsible
className="bg-card ring-muted w-full rounded-2xl border px-8 py-3 shadow-sm ring-4 dark:ring-0"
>
{faqItems.map((item) => (
<AccordionItem
key={item.id}
value={item.id}
className="border-dashed"
>
<AccordionTrigger className="cursor-pointer text-base hover:no-underline">
{item.question}
</AccordionTrigger>
<AccordionContent>
<p className="text-base">{item.answer}</p>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
<p className="text-muted-foreground mt-6 px-8">
Can't find what you're looking for? Contact our{' '}
<Link href="#" className="text-primary font-medium hover:underline">
customer support team
</Link>
</p>
</div>
</div>
</section>
);
}

321
src/app/[locale]/preview/features/eight/page.tsx Normal file
View File

File diff suppressed because one or more lines are too long

131
src/app/[locale]/preview/features/eleven/page.tsx Normal file
View File

@ -0,0 +1,131 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Globe } from 'lucide-react';
import Image from 'next/image';
export default function Features() {
return (
<section className="dark:bg-muted/25 bg-zinc-50 py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto grid gap-2 sm:grid-cols-5">
<Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-tl-xl">
<CardHeader>
<div className="md:p-6">
<p className="font-medium">Advanced tracking system</p>
<p className="text-muted-foreground mt-3 max-w-sm text-sm">
Quick AI lives a single hotkey away - ready to quickly appear
as a floating window above your other apps..
</p>
</div>
</CardHeader>
<div className="relative h-fit pl-6 md:pl-12">
<div className="absolute -inset-6 [background:radial-gradient(75%_95%_at_50%_0%,transparent,var(--color-background)_100%)]"></div>
<div className="bg-background overflow-hidden rounded-tl-lg border-l border-t pl-2 pt-2 dark:bg-zinc-950">
<Image
src="/blocks/mail2.png"
className="hidden dark:block"
alt="payments illustration dark"
width={1207}
height={929}
/>
<Image
src="/blocks/mail2-light.png"
className="shadow dark:hidden"
alt="payments illustration light"
width={1207}
height={929}
/>
</div>
</div>
</Card>
<Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-tr-xl">
<p className="mx-auto my-6 max-w-md text-balance px-6 text-center text-lg font-semibold sm:text-2xl md:p-6">
Advanced UX, Instantly locate all your assets.
</p>
<CardContent className="mt-auto h-fit">
<div className="relative mb-6 sm:mb-0">
<div className="absolute -inset-6 [background:radial-gradient(50%_75%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
<div className="aspect-76/59 overflow-hidden rounded-r-lg border">
<Image
src="/blocks/origin-cal-dark.png"
className="hidden dark:block"
alt="payments illustration dark"
width={1207}
height={929}
/>
<Image
src="/blocks/origin-cal.png"
className="shadow dark:hidden"
alt="payments illustration light"
width={1207}
height={929}
/>
</div>
</div>
</CardContent>
</Card>
<Card className="group p-6 shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-bl-xl md:p-12">
<p className="mx-auto mb-12 max-w-md text-balance text-center text-lg font-semibold sm:text-2xl">
Advanced UX, Instantly locate all your assets.
</p>
<div className="flex justify-center gap-6">
<div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 relative flex aspect-square size-16 items-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
<span className="absolute right-2 top-1 block text-sm">fn</span>
<Globe className="mt-auto size-4" />
</div>
<div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 flex aspect-square size-16 items-center justify-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
<span>K</span>
</div>
</div>
</Card>
<Card className="group relative shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-br-xl">
<CardHeader className="p-6 md:p-12">
<p className="font-medium">Advanced tracking system</p>
<p className="text-muted-foreground mt-2 max-w-sm text-sm">
Quick AI lives a single hotkey away apps..
</p>
</CardHeader>
<CardContent className="relative h-fit px-6 pb-6 md:px-12 md:pb-12">
<div className="grid grid-cols-4 gap-2 md:grid-cols-6">
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
<img
className="m-auto size-8 invert dark:invert-0"
src="https://oxymor-ns.tailus.io/logos/linear.svg"
alt="Linear logo"
width="32"
height="32"
/>
</div>
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
<img
className="m-auto size-8 invert dark:invert-0"
src="https://oxymor-ns.tailus.io/logos/netlify.svg"
alt="Netlify logo"
width="32"
height="32"
/>
</div>
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
<img
className="m-auto size-8 invert dark:invert-0"
src="https://oxymor-ns.tailus.io/logos/github.svg"
alt="github logo"
width="32"
height="32"
/>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</section>
);
}

60
src/app/[locale]/preview/features/five/page.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Activity, DraftingCompass, Mail, Zap } from 'lucide-react';
import Image from 'next/image';
export default function FeaturesSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="grid items-center gap-12 md:grid-cols-2 md:gap-12 lg:grid-cols-5 lg:gap-24">
<div className="lg:col-span-2">
<div className="md:pr-6 lg:pr-0">
<h2 className="text-4xl font-semibold lg:text-5xl">
Built for Scaling teams
</h2>
<p className="mt-6">
Orrupti aut temporibus assumenda atque ab, accusamus sit,
molestiae veniam laboriosam pariatur.
</p>
</div>
<ul className="mt-8 divide-y border-y *:flex *:items-center *:gap-3 *:py-3">
<li>
<Mail className="size-5" />
Email and web support
</li>
<li>
<Zap className="size-5" />
Fast response time
</li>
<li>
<Activity className="size-5" />
Menitoring and analytics
</li>
<li>
<DraftingCompass className="size-5" />
Architectural review
</li>
</ul>
</div>
<div className="border-border/50 relative rounded-3xl border p-3 lg:col-span-3">
<div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
<Image
src="/blocks/payments.png"
className="hidden rounded-[15px] dark:block"
alt="payments illustration dark"
width={1207}
height={929}
/>
<Image
src="/blocks/payments-light.png"
className="rounded-[15px] shadow dark:hidden"
alt="payments illustration light"
width={1207}
height={929}
/>
</div>
</div>
</div>
</div>
</section>
);
}

88
src/app/[locale]/preview/features/four/page.tsx Normal file
View File

@ -0,0 +1,88 @@
import {
Cpu,
Fingerprint,
Pencil,
Settings2,
Sparkles,
Zap,
} from 'lucide-react';
export default function Features() {
return (
<section className="py-12 md:py-20">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
<h2 className="text-balance text-4xl font-medium lg:text-5xl">
The foundation for creative teams management
</h2>
<p>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="relative mx-auto grid max-w-4xl divide-x divide-y border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Fingerprint className="size-4" />
<h3 className="text-sm font-medium">Security</h3>
</div>
<p className="text-sm">
It supports an helping developers businesses.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Pencil className="size-4" />
<h3 className="text-sm font-medium">Customization</h3>
</div>
<p className="text-sm">
It supports helping developers and businesses innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Settings2 className="size-4" />
<h3 className="text-sm font-medium">Control</h3>
</div>
<p className="text-sm">
It supports helping developers and businesses innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Sparkles className="size-4" />
<h3 className="text-sm font-medium">Built for AI</h3>
</div>
<p className="text-sm">
It supports helping developers and businesses innovate.
</p>
</div>
</div>
</div>
</section>
);
}

219
src/app/[locale]/preview/features/nine/page.tsx Normal file
View File

@ -0,0 +1,219 @@
'use client';
import { Logo } from '@/components/layout/logo';
import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
import DottedMap from 'dotted-map';
import { Area, AreaChart, CartesianGrid } from 'recharts';
import {
type ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
export default function FeaturesSection() {
return (
<section className="px-4 py-16 md:py-32">
<div className="mx-auto grid max-w-5xl border md:grid-cols-2">
<div>
<div className="p-6 sm:p-12">
<span className="text-muted-foreground flex items-center gap-2">
<MapIcon className="size-4" />
Real time location tracking
</span>
<p className="mt-8 text-2xl font-semibold">
Advanced tracking system, Instantly locate all your assets.
</p>
</div>
<div aria-hidden className="relative">
<div className="absolute inset-0 z-10 m-auto size-fit">
<div className="rounded-(--radius) bg-background z-1 dark:bg-muted relative flex size-fit w-fit items-center gap-2 border px-3 py-1 text-xs font-medium shadow-md shadow-zinc-950/5">
<span className="text-lg">🇨🇩</span> Last connection from DR
Congo
</div>
<div className="rounded-(--radius) bg-background absolute inset-2 -bottom-2 mx-auto border px-3 py-4 text-xs font-medium shadow-md shadow-zinc-950/5 dark:bg-zinc-900"></div>
</div>
<div className="relative overflow-hidden">
<div className="bg-radial z-1 to-background absolute inset-0 from-transparent to-75%"></div>
<Map />
</div>
</div>
</div>
<div className="overflow-hidden border-t bg-zinc-50 p-6 sm:p-12 md:border-0 md:border-l dark:bg-transparent">
<div className="relative z-10">
<span className="text-muted-foreground flex items-center gap-2">
<MessageCircle className="size-4" />
Email and web support
</span>
<p className="my-8 text-2xl font-semibold">
Reach out via email or web for any assistance you need.
</p>
</div>
<div aria-hidden className="flex flex-col gap-8">
<div>
<div className="flex items-center gap-2">
<span className="flex size-5 rounded-full border">
<Logo className="m-auto size-3" />
</span>
<span className="text-muted-foreground text-xs">
Sat 22 Feb
</span>
</div>
<div className="rounded-(--radius) bg-background mt-1.5 w-3/5 border p-3 text-xs">
Hey, I'm having trouble with my account.
</div>
</div>
<div>
<div className="rounded-(--radius) mb-1 ml-auto w-3/5 bg-blue-600 p-3 text-xs text-white">
Molestiae numquam debitis et ullam distinctio provident nobis
repudiandae deleniti necessitatibus.
</div>
<span className="text-muted-foreground block text-right text-xs">
Now
</span>
</div>
</div>
</div>
<div className="col-span-full border-y p-12">
<p className="text-center text-4xl font-semibold lg:text-7xl">
99.99% Uptime
</p>
</div>
<div className="relative col-span-full">
<div className="absolute z-10 max-w-lg px-6 pr-12 pt-6 md:px-12 md:pt-12">
<span className="text-muted-foreground flex items-center gap-2">
<Activity className="size-4" />
Activity feed
</span>
<p className="my-8 text-2xl font-semibold">
Monitor your application's activity in real-time.{' '}
<span className="text-muted-foreground">
{' '}
Instantly identify and resolve issues.
</span>
</p>
</div>
<MonitoringChart />
</div>
</div>
</section>
);
}
const map = new DottedMap({ height: 55, grid: 'diagonal' });
const points = map.getPoints();
const svgOptions = {
backgroundColor: 'var(--color-background)',
color: 'currentColor',
radius: 0.15,
};
const Map = () => {
const viewBox = `0 0 120 60`;
return (
<svg viewBox={viewBox} style={{ background: svgOptions.backgroundColor }}>
{points.map((point, index) => (
<circle
key={index}
cx={point.x}
cy={point.y}
r={svgOptions.radius}
fill={svgOptions.color}
/>
))}
</svg>
);
};
const chartConfig = {
desktop: {
label: 'Desktop',
color: '#2563eb',
},
mobile: {
label: 'Mobile',
color: '#60a5fa',
},
} satisfies ChartConfig;
const chartData = [
{ month: 'May', desktop: 56, mobile: 224 },
{ month: 'June', desktop: 56, mobile: 224 },
{ month: 'January', desktop: 126, mobile: 252 },
{ month: 'February', desktop: 205, mobile: 410 },
{ month: 'March', desktop: 200, mobile: 126 },
{ month: 'April', desktop: 400, mobile: 800 },
];
const MonitoringChart = () => {
return (
<ChartContainer className="h-120 aspect-auto md:h-96" config={chartConfig}>
<AreaChart
accessibilityLayer
data={chartData}
margin={{
left: 0,
right: 0,
}}
>
<defs>
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
<stop
offset="0%"
stopColor="var(--color-desktop)"
stopOpacity={0.8}
/>
<stop
offset="55%"
stopColor="var(--color-desktop)"
stopOpacity={0.1}
/>
</linearGradient>
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
<stop
offset="0%"
stopColor="var(--color-mobile)"
stopOpacity={0.8}
/>
<stop
offset="55%"
stopColor="var(--color-mobile)"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<CartesianGrid vertical={false} />
<ChartTooltip
active
cursor={false}
content={<ChartTooltipContent className="dark:bg-muted" />}
/>
<Area
strokeWidth={2}
dataKey="mobile"
type="stepBefore"
fill="url(#fillMobile)"
fillOpacity={0.1}
stroke="var(--color-mobile)"
stackId="a"
/>
<Area
strokeWidth={2}
dataKey="desktop"
type="stepBefore"
fill="url(#fillDesktop)"
fillOpacity={0.1}
stroke="var(--color-desktop)"
stackId="a"
/>
</AreaChart>
</ChartContainer>
);
};

89
src/app/[locale]/preview/features/one/page.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Settings2, Sparkles, Zap } from 'lucide-react';
import { ReactNode } from 'react';
export default function Features() {
return (
<section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
<div className="@container mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Built to cover your needs
</h2>
<p className="mt-4">
Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
repellendus.
</p>
</div>
<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 *:text-center md:mt-16">
<Card className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Zap className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Customizable</h3>
</CardHeader>
<CardContent>
<p className="text-sm">
Extensive customization options, allowing you to tailor every
aspect to meet your specific needs.
</p>
</CardContent>
</Card>
<Card className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Settings2 className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">You have full control</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
From design elements to functionality, you have complete control
to create a unique and personalized experience.
</p>
</CardContent>
</Card>
<Card className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Sparkles className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Powered By AI</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
Elements to functionality, you have complete control to create a
unique experience.
</p>
</CardContent>
</Card>
</div>
</div>
</section>
);
}
const CardDecorator = ({ children }: { children: ReactNode }) => (
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
<div
aria-hidden
className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
/>
<div
aria-hidden
className="bg-radial to-background absolute inset-0 from-transparent to-75%"
/>
<div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
{children}
</div>
</div>
);

89
src/app/[locale]/preview/features/seven/page.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
import Image from 'next/image';
export default function FeaturesSection() {
return (
<section className="overflow-hidden py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
<div className="relative z-10 max-w-2xl">
<h2 className="text-4xl font-semibold lg:text-5xl">
Built for Scaling teams
</h2>
<p className="mt-6 text-lg">
Empower your team with workflows that adapt to your needs, whether
you prefer git synchronization or a AI Agents interface.
</p>
</div>
<div className="relative -mx-4 rounded-3xl p-3 md:-mx-12 lg:col-span-3">
<div className="perspective-midrange">
<div className="rotate-x-6 -skew-2">
<div className="aspect-88/36 relative">
<div className="bg-radial-[at_75%_25%] to-background z-1 -inset-17 absolute from-transparent to-75%"></div>
<Image
src="/blocks/mail-upper.png"
className="absolute inset-0 z-10"
alt="payments illustration dark"
width={2797}
height={1137}
/>
<Image
src="/blocks/mail-back.png"
className="hidden dark:block"
alt="payments illustration dark"
width={2797}
height={1137}
/>
<Image
src="/blocks/mail-back-light.png"
className="dark:hidden"
alt="payments illustration light"
width={2797}
height={1137}
/>
</div>
</div>
</div>
</div>
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Lock className="size-4" />
<h3 className="text-sm font-medium">Security</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Sparkles className="size-4" />
<h3 className="text-sm font-medium">AI Powered</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
</div>
</div>
</section>
);
}

85
src/app/[locale]/preview/features/six/page.tsx Normal file
View File

@ -0,0 +1,85 @@
import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
import Image from 'next/image';
export default function FeaturesSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-12 px-6">
<div className="relative z-10 grid items-center gap-4 md:grid-cols-2 md:gap-12">
<h2 className="text-4xl font-semibold">
The Lyra ecosystem brings together our models
</h2>
<p className="max-w-sm sm:ml-auto">
Empower your team with workflows that adapt to your needs, whether
you prefer git synchronization or a AI Agents interface.
</p>
</div>
<div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
<div className="aspect-88/36 relative">
<div className="bg-linear-to-t z-1 from-background absolute inset-0 to-transparent"></div>
<Image
src="/blocks/mail-upper.png"
className="absolute inset-0 z-10"
alt="payments illustration dark"
width={2797}
height={1137}
/>
<Image
src="/blocks/mail-back.png"
className="hidden dark:block"
alt="payments illustration dark"
width={2797}
height={1137}
/>
<Image
src="/blocks/mail-back-light.png"
className="dark:hidden"
alt="payments illustration light"
width={2797}
height={1137}
/>
</div>
</div>
<div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
<div className="space-y-3">
<div className="flex items-center gap-2">
<Zap className="size-4" />
<h3 className="text-sm font-medium">Faaast</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Cpu className="size-4" />
<h3 className="text-sm font-medium">Powerful</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an entire helping developers and businesses.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Lock className="size-4" />
<h3 className="text-sm font-medium">Security</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Sparkles className="size-4" />
<h3 className="text-sm font-medium">AI Powered</h3>
</div>
<p className="text-muted-foreground text-sm">
It supports an helping developers businesses innovate.
</p>
</div>
</div>
</div>
</section>
);
}

202
src/app/[locale]/preview/features/ten/page.tsx Normal file
View File

@ -0,0 +1,202 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { Calendar, LucideIcon, MapIcon } from 'lucide-react';
import Image from 'next/image';
import { ReactNode } from 'react';
export default function Features() {
return (
<section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
<div className="mx-auto max-w-2xl px-6 lg:max-w-5xl">
<div className="mx-auto grid gap-4 lg:grid-cols-2">
<FeatureCard>
<CardHeader className="pb-3">
<CardHeading
icon={MapIcon}
title="Real time location tracking"
description="Advanced tracking system, Instantly locate all your assets."
/>
</CardHeader>
<div className="relative mb-6 border-t border-dashed sm:mb-0">
<div className="absolute inset-0 [background:radial-gradient(125%_125%_at_50%_0%,transparent_40%,var(--color-blue-600),var(--color-white)_100%)]"></div>
<div className="aspect-76/59 p-1 px-6">
<DualModeImage
darkSrc="/blocks/payments.png"
lightSrc="/blocks/payments-light.png"
alt="payments illustration"
width={1207}
height={929}
/>
</div>
</div>
</FeatureCard>
<FeatureCard>
<CardHeader className="pb-3">
<CardHeading
icon={Calendar}
title="Advanced Scheduling"
description="Scheduling system, Instantly locate all your assets."
/>
</CardHeader>
<CardContent>
<div className="relative mb-6 sm:mb-0">
<div className="absolute -inset-6 [background:radial-gradient(50%_50%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
<div className="aspect-76/59 border">
<DualModeImage
darkSrc="/blocks/origin-cal-dark.png"
lightSrc="/blocks/origin-cal.png"
alt="calendar illustration"
width={1207}
height={929}
/>
</div>
</div>
</CardContent>
</FeatureCard>
<FeatureCard className="p-6 lg:col-span-2">
<p className="mx-auto my-6 max-w-md text-balance text-center text-2xl font-semibold">
Smart scheduling with automated reminders for maintenance.
</p>
<div className="flex justify-center gap-6 overflow-hidden">
<CircularUI
label="Inclusion"
circles={[{ pattern: 'border' }, { pattern: 'border' }]}
/>
<CircularUI
label="Inclusion"
circles={[{ pattern: 'none' }, { pattern: 'primary' }]}
/>
<CircularUI
label="Join"
circles={[{ pattern: 'blue' }, { pattern: 'none' }]}
/>
<CircularUI
label="Exclusion"
circles={[{ pattern: 'primary' }, { pattern: 'none' }]}
className="hidden sm:block"
/>
</div>
</FeatureCard>
</div>
</div>
</section>
);
}
interface FeatureCardProps {
children: ReactNode;
className?: string;
}
const FeatureCard = ({ children, className }: FeatureCardProps) => (
<Card
className={cn('group relative rounded-none shadow-zinc-950/5', className)}
>
<CardDecorator />
{children}
</Card>
);
const CardDecorator = () => (
<>
<span className="border-primary absolute -left-px -top-px block size-2 border-l-2 border-t-2"></span>
<span className="border-primary absolute -right-px -top-px block size-2 border-r-2 border-t-2"></span>
<span className="border-primary absolute -bottom-px -left-px block size-2 border-b-2 border-l-2"></span>
<span className="border-primary absolute -bottom-px -right-px block size-2 border-b-2 border-r-2"></span>
</>
);
interface CardHeadingProps {
icon: LucideIcon;
title: string;
description: string;
}
const CardHeading = ({ icon: Icon, title, description }: CardHeadingProps) => (
<div className="p-6">
<span className="text-muted-foreground flex items-center gap-2">
<Icon className="size-4" />
{title}
</span>
<p className="mt-8 text-2xl font-semibold">{description}</p>
</div>
);
interface DualModeImageProps {
darkSrc: string;
lightSrc: string;
alt: string;
width: number;
height: number;
className?: string;
}
const DualModeImage = ({
darkSrc,
lightSrc,
alt,
width,
height,
className,
}: DualModeImageProps) => (
<>
<Image
src={darkSrc}
className={cn('hidden dark:block', className)}
alt={`${alt} dark`}
width={width}
height={height}
/>
<Image
src={lightSrc}
className={cn('shadow dark:hidden', className)}
alt={`${alt} light`}
width={width}
height={height}
/>
</>
);
interface CircleConfig {
pattern: 'none' | 'border' | 'primary' | 'blue';
}
interface CircularUIProps {
label: string;
circles: CircleConfig[];
className?: string;
}
const CircularUI = ({ label, circles, className }: CircularUIProps) => (
<div className={className}>
<div className="bg-linear-to-b from-border size-fit rounded-2xl to-transparent p-px">
<div className="bg-linear-to-b from-background to-muted/25 relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4">
{circles.map((circle, i) => (
<div
key={i}
className={cn('size-7 rounded-full border sm:size-8', {
'border-primary': circle.pattern === 'none',
'border-primary bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_4px)]':
circle.pattern === 'border',
'border-primary bg-background bg-[repeating-linear-gradient(-45deg,var(--color-primary),var(--color-primary)_1px,transparent_1px,transparent_4px)]':
circle.pattern === 'primary',
'bg-background z-1 border-blue-500 bg-[repeating-linear-gradient(-45deg,var(--color-blue-500),var(--color-blue-500)_1px,transparent_1px,transparent_4px)]':
circle.pattern === 'blue',
})}
></div>
))}
</div>
</div>
<span className="text-muted-foreground mt-1.5 block text-center text-sm">
{label}
</span>
</div>
);

89
src/app/[locale]/preview/features/three/page.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Settings2, Sparkles, Zap } from 'lucide-react';
import { ReactNode } from 'react';
export default function Features() {
return (
<section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
<div className="@container mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Built to cover your needs
</h2>
<p className="mt-4">
Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
repellendus.
</p>
</div>
<Card className="@min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0 mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16">
<div className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Zap className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Customizable</h3>
</CardHeader>
<CardContent>
<p className="text-sm">
Extensive customization options, allowing you to tailor every
aspect to meet your specific needs.
</p>
</CardContent>
</div>
<div className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Settings2 className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">You have full control</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
From design elements to functionality, you have complete control
to create a unique and personalized experience.
</p>
</CardContent>
</div>
<div className="group shadow-zinc-950/5">
<CardHeader className="pb-3">
<CardDecorator>
<Sparkles className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Powered By AI</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
Elements to functionality, you have complete control to create a
unique experience.
</p>
</CardContent>
</div>
</Card>
</div>
</section>
);
}
const CardDecorator = ({ children }: { children: ReactNode }) => (
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
<div
aria-hidden
className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
/>
<div
aria-hidden
className="bg-radial to-background absolute inset-0 from-transparent to-75%"
/>
<div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
{children}
</div>
</div>
);

150
src/app/[locale]/preview/features/twelve/page.tsx Normal file
View File

@ -0,0 +1,150 @@
'use client';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import {
ChartBarIncreasingIcon,
Database,
Fingerprint,
IdCard,
} from 'lucide-react';
import Image from 'next/image';
import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { BorderBeam } from '@/components/magicui/border-beam';
export default function Features() {
type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4';
const [activeItem, setActiveItem] = useState<ImageKey>('item-1');
const images = {
'item-1': {
image: '/blocks/charts.png',
alt: 'Database visualization',
},
'item-2': {
image: '/blocks/music.png',
alt: 'Security authentication',
},
'item-3': {
image: '/blocks/mail2.png',
alt: 'Identity management',
},
'item-4': {
image: '/blocks/payments.png',
alt: 'Analytics dashboard',
},
};
return (
<section className="py-12 md:py-20 lg:py-32">
<div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
<div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-6xl">
The foundation for AI
</h2>
<p>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
<Accordion
type="single"
value={activeItem}
onValueChange={(value) => setActiveItem(value as ImageKey)}
className="w-full"
>
<AccordionItem value="item-1">
<AccordionTrigger>
<div className="flex items-center gap-2 text-base">
<Database className="size-4" />
Database Visualization
</div>
</AccordionTrigger>
<AccordionContent>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and
businesses innovate.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>
<div className="flex items-center gap-2 text-base">
<Fingerprint className="size-4" />
Advanced Authentication
</div>
</AccordionTrigger>
<AccordionContent>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and
businesses innovate.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
<div className="flex items-center gap-2 text-base">
<IdCard className="size-4" />
Identity Management
</div>
</AccordionTrigger>
<AccordionContent>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and
businesses innovate.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>
<div className="flex items-center gap-2 text-base">
<ChartBarIncreasingIcon className="size-4" />
Analytics Dashboard
</div>
</AccordionTrigger>
<AccordionContent>
Lyra is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and
businesses innovate.
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="bg-background relative flex overflow-hidden rounded-3xl border p-2">
<div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div>
<div className="aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl">
<AnimatePresence mode="wait">
<motion.div
key={`${activeItem}-id`}
initial={{ opacity: 0, y: 6, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 6, scale: 0.98 }}
transition={{ duration: 0.2 }}
className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
>
<Image
src={images[activeItem].image}
className="size-full object-cover object-left-top dark:mix-blend-lighten"
alt={images[activeItem].alt}
width={1207}
height={929}
/>
</motion.div>
</AnimatePresence>
</div>
<BorderBeam
duration={6}
size={200}
className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
/>
</div>
</div>
</div>
</section>
);
}

89
src/app/[locale]/preview/features/two/page.tsx Normal file
View File

@ -0,0 +1,89 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Settings2, Sparkles, Zap } from 'lucide-react';
import { ReactNode } from 'react';
export default function Features() {
return (
<section className="py-16 md:py-32">
<div className="@container mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
Built to cover your needs
</h2>
<p className="mt-4">
Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
repellendus.
</p>
</div>
<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]">
<Card className="group border-0 shadow-none">
<CardHeader className="pb-3">
<CardDecorator>
<Zap className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Customizable</h3>
</CardHeader>
<CardContent>
<p className="text-sm">
Extensive customization options, allowing you to tailor every
aspect to meet your specific needs.
</p>
</CardContent>
</Card>
<Card className="group border-0 shadow-none">
<CardHeader className="pb-3">
<CardDecorator>
<Settings2 className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">You have full control</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
From design elements to functionality, you have complete control
to create a unique and personalized experience.
</p>
</CardContent>
</Card>
<Card className="group border-0 shadow-none">
<CardHeader className="pb-3">
<CardDecorator>
<Sparkles className="size-6" aria-hidden />
</CardDecorator>
<h3 className="mt-6 font-medium">Powered By AI</h3>
</CardHeader>
<CardContent>
<p className="mt-3 text-sm">
Elements to functionality, you have complete control to create a
unique experience.
</p>
</CardContent>
</Card>
</div>
</div>
</section>
);
}
const CardDecorator = ({ children }: { children: ReactNode }) => (
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
<div
aria-hidden
className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
/>
<div
aria-hidden
className="bg-radial to-background absolute inset-0 from-transparent to-75%"
/>
<div className="dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white">
{children}
</div>
</div>
);

197
src/app/[locale]/preview/footer/five/page.tsx Normal file
View File

@ -0,0 +1,197 @@
import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Logo } from '@/components/layout/logo';
const enterpriseLinks = [
{ href: '#', label: 'About' },
{ href: '#', label: 'Customers' },
{ href: '#', label: 'Enterprise' },
{ href: '#', label: 'Partners' },
{ href: '#', label: 'Jobs' },
];
const productLinks = [
{ href: '#', label: 'Security' },
{ href: '#', label: 'Customization' },
{ href: '#', label: 'Enterprise' },
{ href: '#', label: 'Partners' },
];
const docsLinks = [
{ href: '#', label: 'Introduction' },
{ href: '#', label: 'Installation' },
{ href: '#', label: 'Utils' },
{ href: '#', label: 'Principles' },
{ href: '#', label: 'Jargon' },
{ href: '#', label: 'Plugin' },
{ href: '#', label: 'Customizer' },
{ href: '#', label: 'Boilerplates' },
];
const communityLinks = [
{ href: '#', label: 'GitHub' },
{ href: '#', label: 'Discord' },
{ href: '#', label: 'Slack' },
{ href: '#', label: 'X / Twitter' },
];
const footerLinks = [
{
name: 'Enterprise',
links: enterpriseLinks,
},
{
name: 'Product',
links: productLinks,
},
{
name: 'Docs',
links: docsLinks,
},
];
export default function Footer() {
return (
<footer className="m-1 rounded-3xl border">
<div className="mx-auto max-w-5xl space-y-16 px-5 py-16">
<div className="flex flex-wrap items-center justify-between gap-4 border-b pb-8">
<Link href="/" aria-label="go home">
<Logo />
</Link>
<div className="flex gap-3">
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Threads"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
color="currentColor"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
></path>
</svg>
</Link>
</div>
</div>
<div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
{footerLinks.map((linksGroup, index) => (
<div key={index}>
<span className="font-medium">{linksGroup.name}</span>
<ul className="mt-4 list-inside space-y-4">
{linksGroup.links.map((link, index) => (
<li key={index}>
<Link
href={link.href}
className="hover:text-primary text-muted-foreground text-sm duration-150"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
))}
<div>
<span className="text-sm font-medium">Community</span>
<ul className="mt-4 list-inside space-y-4">
{communityLinks.map((link, index) => (
<li key={index}>
<Link
href={link.href}
className="hover:text-primary text-muted-foreground text-sm duration-150"
>
{link.label}
</Link>
</li>
))}
</ul>
<form className="mt-12 w-full max-w-xs">
<div className="space-y-2.5">
<Label className="block text-sm font-medium" htmlFor="email">
Subscribe to our newsletter
</Label>
<Input
className="input variant-mixed sz-md"
placeholder="Your email"
type="email"
id="email"
required
name="email"
/>
</div>
<Button type="submit" className="mt-3">
<span>Subscribe</span>
</Button>
</form>
</div>
</div>
<div className="bg-muted mt-16 flex items-center justify-between rounded-md p-4 px-6 py-3">
<span className="text-title">&copy; tailus 2021 - Present</span>
<Link
href="#"
className="text-muted-foreground hover:text-primary text-sm"
>
Licence
</Link>
</div>
</div>
</footer>
);
}

53
src/app/[locale]/preview/footer/four/page.tsx Normal file
View File

@ -0,0 +1,53 @@
import Link from 'next/link';
const links = [
{
title: 'Features',
href: '#',
},
{
title: 'Solution',
href: '#',
},
{
title: 'Customers',
href: '#',
},
{
title: 'Pricing',
href: '#',
},
{
title: 'Help',
href: '#',
},
{
title: 'About',
href: '#',
},
];
export default function FooterSection() {
return (
<footer className="border-b bg-white py-12 dark:bg-transparent">
<div className="mx-auto max-w-5xl px-6">
<div className="flex flex-wrap justify-between gap-6">
<span className="text-muted-foreground order-last block text-center text-sm md:order-first">
© {new Date().getFullYear()} Tailus UI, All rights reserved
</span>
<div className="order-first flex flex-wrap justify-center gap-6 text-sm md:order-last">
{links.map((link, index) => (
<Link
key={index}
href={link.href}
className="text-muted-foreground hover:text-primary block duration-150"
>
<span>{link.title}</span>
</Link>
))}
</div>
</div>
</div>
</footer>
);
}

184
src/app/[locale]/preview/footer/one/page.tsx Normal file
View File

@ -0,0 +1,184 @@
import { Logo } from '@/components/layout/logo';
import Link from 'next/link';
const links = [
{
title: 'Features',
href: '#',
},
{
title: 'Solution',
href: '#',
},
{
title: 'Customers',
href: '#',
},
{
title: 'Pricing',
href: '#',
},
{
title: 'Help',
href: '#',
},
{
title: 'About',
href: '#',
},
];
export default function FooterSection() {
return (
<footer className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<Link href="/" aria-label="go home" className="mx-auto block size-fit">
<Logo />
</Link>
<div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
{links.map((link, index) => (
<Link
key={index}
href={link.href}
className="text-muted-foreground hover:text-primary block duration-150"
>
<span>{link.title}</span>
</Link>
))}
</div>
<div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="X/Twitter"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Threads"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
color="currentColor"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
></path>
</svg>
</Link>
</div>
<span className="text-muted-foreground block text-center text-sm">
{' '}
© {new Date().getFullYear()} Tailus UI, All rights reserved
</span>
</div>
</footer>
);
}

330
src/app/[locale]/preview/footer/three/page.tsx Normal file
View File

@ -0,0 +1,330 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
import { ChevronsUpDown } from 'lucide-react';
import Link from 'next/link';
const links = [
{
group: 'Product',
items: [
{
title: 'Features',
href: '#',
},
{
title: 'Solution',
href: '#',
},
{
title: 'Customers',
href: '#',
},
{
title: 'Pricing',
href: '#',
},
{
title: 'Help',
href: '#',
},
{
title: 'About',
href: '#',
},
],
},
{
group: 'Solution',
items: [
{
title: 'Startup',
href: '#',
},
{
title: 'Freelancers',
href: '#',
},
{
title: 'Organizations',
href: '#',
},
{
title: 'Students',
href: '#',
},
{
title: 'Collaboration',
href: '#',
},
{
title: 'Design',
href: '#',
},
{
title: 'Management',
href: '#',
},
],
},
{
group: 'Company',
items: [
{
title: 'About',
href: '#',
},
{
title: 'Careers',
href: '#',
},
{
title: 'Blog',
href: '#',
},
{
title: 'Press',
href: '#',
},
{
title: 'Contact',
href: '#',
},
{
title: 'Help',
href: '#',
},
],
},
{
group: 'Legal',
items: [
{
title: 'Licence',
href: '#',
},
{
title: 'Privacy',
href: '#',
},
{
title: 'Cookies',
href: '#',
},
{
title: 'Security',
href: '#',
},
],
},
];
export default function FooterSection() {
return (
<footer className="border-b bg-white pt-20 dark:bg-transparent">
<div className="mb-8 border-b md:mb-12">
<div className="mx-auto flex max-w-5xl flex-wrap items-end justify-between gap-6 px-6 pb-6">
<Link href="/" aria-label="go home" className="block size-fit">
<Logo />
</Link>
<div className="flex flex-wrap justify-center gap-6 text-sm">
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="X/Twitter"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Threads"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
color="currentColor"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
></path>
</svg>
</Link>
</div>
</div>
</div>
<div className="mx-auto max-w-5xl px-6">
<div className="grid gap-12 md:grid-cols-5 md:gap-0 lg:grid-cols-4">
<div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-5 md:row-start-1 lg:col-span-3">
{links.map((link, index) => (
<div key={index} className="space-y-4 text-sm">
<span className="block font-medium">{link.group}</span>
{link.items.map((item, index) => (
<Link
key={index}
href={item.href}
className="text-muted-foreground hover:text-primary block duration-150"
>
<span>{item.title}</span>
</Link>
))}
</div>
))}
</div>
<form className="row-start-1 border-b pb-8 text-sm md:col-span-2 md:border-none lg:col-span-1">
<div className="space-y-4">
<Label htmlFor="mail" className="block font-medium">
Newsletter
</Label>
<div className="flex gap-2">
<Input
type="email"
id="mail"
name="mail"
placeholder="Your email"
className="h-8 text-sm"
/>
<Button size="sm">Submit</Button>
</div>
<span className="text-muted-foreground block text-sm">
Don't miss any update!
</span>
</div>
</form>
</div>
<div className="mt-12 flex flex-wrap items-end justify-between gap-6 border-t py-6">
<small className="text-muted-foreground order-last block text-center text-sm md:order-first">
© {new Date().getFullYear()} Tailus UI, All rights reserved
</small>
<form action="">
<div className="relative">
<ChevronsUpDown
className="pointer-events-none absolute inset-y-0 right-2 my-auto opacity-75"
size="0.75rem"
/>
<select
className={cn(
'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground shadow-xs flex h-9 w-full min-w-32 appearance-none rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
)}
name="language"
>
<option value="1">English</option>
<option value="2">Espanol</option>
<option value="3">Français</option>
<option value="4">Swahili</option>
<option value="5">Lingala</option>
</select>
</div>
</form>
</div>
</div>
</footer>
);
}

282
src/app/[locale]/preview/footer/two/page.tsx Normal file
View File

@ -0,0 +1,282 @@
import { Logo } from '@/components/layout/logo';
import Link from 'next/link';
const links = [
{
group: 'Product',
items: [
{
title: 'Features',
href: '#',
},
{
title: 'Solution',
href: '#',
},
{
title: 'Customers',
href: '#',
},
{
title: 'Pricing',
href: '#',
},
{
title: 'Help',
href: '#',
},
{
title: 'About',
href: '#',
},
],
},
{
group: 'Solution',
items: [
{
title: 'Startup',
href: '#',
},
{
title: 'Freelancers',
href: '#',
},
{
title: 'Organizations',
href: '#',
},
{
title: 'Students',
href: '#',
},
{
title: 'Collaboration',
href: '#',
},
{
title: 'Design',
href: '#',
},
{
title: 'Management',
href: '#',
},
],
},
{
group: 'Company',
items: [
{
title: 'About',
href: '#',
},
{
title: 'Careers',
href: '#',
},
{
title: 'Blog',
href: '#',
},
{
title: 'Press',
href: '#',
},
{
title: 'Contact',
href: '#',
},
{
title: 'Help',
href: '#',
},
],
},
{
group: 'Legal',
items: [
{
title: 'Licence',
href: '#',
},
{
title: 'Privacy',
href: '#',
},
{
title: 'Cookies',
href: '#',
},
{
title: 'Security',
href: '#',
},
],
},
];
export default function FooterSection() {
return (
<footer className="border-b bg-white pt-20 dark:bg-transparent">
<div className="mx-auto max-w-5xl px-6">
<div className="grid gap-12 md:grid-cols-5">
<div className="md:col-span-2">
<Link href="/" aria-label="go home" className="block size-fit">
<Logo />
</Link>
</div>
<div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-3">
{links.map((link, index) => (
<div key={index} className="space-y-4 text-sm">
<span className="block font-medium">{link.group}</span>
{link.items.map((item, index) => (
<Link
key={index}
href={item.href}
className="text-muted-foreground hover:text-primary block duration-150"
>
<span>{item.title}</span>
</Link>
))}
</div>
))}
</div>
</div>
<div className="mt-12 flex flex-wrap items-end justify-between gap-6 border-t py-6">
<span className="text-muted-foreground order-last block text-center text-sm md:order-first">
© {new Date().getFullYear()} Tailus UI, All rights reserved
</span>
<div className="order-first flex flex-wrap justify-center gap-6 text-sm md:order-last">
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="X/Twitter"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Threads"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
color="currentColor"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
></path>
</svg>
</Link>
<Link
href="#"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
className="text-muted-foreground hover:text-primary block"
>
<svg
className="size-6"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
></path>
</svg>
</Link>
</div>
</div>
</div>
</footer>
);
}

60
src/app/[locale]/preview/forgot-password/one/page.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function ForgotPasswordPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
<div>
<Link href="/" aria-label="go home">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Recover Password
</h1>
<p className="text-sm">Enter your email to receive a reset link</p>
</div>
<div className="mt-6 space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Email
</Label>
<Input
type="email"
required
name="email"
id="email"
placeholder="name@example.com"
/>
</div>
<Button className="w-full">Send Reset Link</Button>
</div>
<div className="mt-6 text-center">
<p className="text-muted-foreground text-sm">
We'll send you a link to reset your password.
</p>
</div>
</div>
<div className="p-3">
<p className="text-accent-foreground text-center text-sm">
Remembered your password?
<Button asChild variant="link" className="px-2">
<Link href="/preview/login/two">Log in</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

60
src/app/[locale]/preview/forgot-password/two/page.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function ForgotPasswordPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
<div className="text-center">
<Link href="/" aria-label="go home" className="mx-auto block w-fit">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Recover Password
</h1>
<p className="text-sm">Enter your email to receive a reset link</p>
</div>
<div className="mt-6 space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Email
</Label>
<Input
type="email"
required
name="email"
id="email"
placeholder="name@example.com"
/>
</div>
<Button className="w-full">Send Reset Link</Button>
</div>
<div className="mt-6 text-center">
<p className="text-muted-foreground text-sm">
We'll send you a link to reset your password.
</p>
</div>
</div>
<div className="p-3">
<p className="text-accent-foreground text-center text-sm">
Remembered your password?
<Button asChild variant="link" className="px-2">
<Link href="/preview/login/two">Log in</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

234
src/app/[locale]/preview/hero-section/eight/page.tsx Normal file
View File

@ -0,0 +1,234 @@
'use client';
import React from 'react';
import Link from 'next/link';
import { Logo } from '@/components/layout/logo';
import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
const menuItems = [
{ name: 'Features', href: '#' },
{ name: 'Solution', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'About', href: '#' },
];
export default function HeroSection() {
const [menuState, setMenuState] = React.useState(false);
return (
<>
<header>
<nav
data-state={menuState && 'active'}
className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
>
<div className="m-auto max-w-5xl px-6">
<div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
<div className="flex w-full justify-between lg:w-auto">
<Link
href="/"
aria-label="home"
className="flex items-center space-x-2"
>
<Logo />
</Link>
<button
onClick={() => setMenuState(!menuState)}
aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
>
<Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
<X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
</button>
</div>
<div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
<div className="lg:pr-4">
<ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.href}
className="text-muted-foreground hover:text-accent-foreground block duration-150"
>
<span>{item.name}</span>
</Link>
</li>
))}
</ul>
</div>
<div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
<Button asChild variant="outline" size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
<Button asChild size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main className="overflow-hidden">
<section>
<div className="relative pt-24">
<div className="mx-auto max-w-7xl px-6">
<div className="max-w-3xl text-center sm:mx-auto lg:mr-auto lg:mt-0 lg:w-4/5">
<Link
href="/"
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
>
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
New
</span>
<span className="text-sm">Introduction Tailus UI Html</span>
<span className="bg-(--color-border) block h-4 w-px"></span>
<ArrowRight className="size-4" />
</Link>
<h1 className="mt-8 text-balance text-4xl font-semibold md:text-5xl xl:text-6xl xl:[line-height:1.125]">
Modern Software testing reimagined
</h1>
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
Tailwindcss highly customizable components for building modern
websites and applications that look and feel the way you mean
it.
</p>
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
Highly customizable components for building modern websites
and applications, with your personal spark.
</p>
<div className="mt-8">
<Button size="lg" asChild>
<Link href="#">
<Rocket className="relative size-4" />
<span className="text-nowrap">Start Building</span>
</Link>
</Button>
</div>
</div>
</div>
<div className="relative mt-16">
<div
aria-hidden
className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
/>
<div className="relative mx-auto max-w-6xl overflow-hidden px-4">
<Image
className="z-2 border-border/25 relative hidden rounded-2xl border dark:block"
src="/blocks/music.png"
alt="app screen"
width={2796}
height={2008}
/>
<Image
className="z-2 border-border/25 relative rounded-2xl border dark:hidden"
src="/blocks/music-light.png"
alt="app screen"
width={2796}
height={2008}
/>
</div>
</div>
</div>
</section>
<section className="bg-background relative z-10 pb-16">
<div className="m-auto max-w-5xl px-6">
<h2 className="text-center text-lg font-medium">
Your favorite companies are our partners.
</h2>
<div className="mx-auto mt-12 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
<img
className="h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
<img
className="h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
alt="Tailwind CSS Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/vercel.svg"
alt="Vercel Logo"
height="20"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/zapier.svg"
alt="Zapier Logo"
height="20"
width="auto"
/>
</div>
</div>
</section>
</main>
</>
);
}

164
src/app/[locale]/preview/hero-section/five/page.tsx Normal file
View File

@ -0,0 +1,164 @@
import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { HeroHeader } from '@/components/tailark/hero9-header';
import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
import { ChevronRight } from 'lucide-react';
export default function HeroSection() {
return (
<>
<HeroHeader />
<main className="overflow-x-hidden">
<section>
<div className="py-24 md:pb-32 lg:pb-36 lg:pt-72">
<div className="relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12">
<div className="mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left">
<h1 className="mt-8 max-w-2xl text-balance text-5xl md:text-6xl lg:mt-16 xl:text-7xl">
Build 10x Faster with NS
</h1>
<p className="mt-8 max-w-2xl text-balance text-lg">
Highly customizable components for building modern websites
and applications you mean it.
</p>
<div className="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start">
<Button
asChild
size="lg"
className="h-12 rounded-full pl-5 pr-3 text-base"
>
<Link href="#link">
<span className="text-nowrap">Start Building</span>
<ChevronRight className="ml-1" />
</Link>
</Button>
<Button
key={2}
asChild
size="lg"
variant="ghost"
className="h-12 rounded-full px-5 text-base hover:bg-zinc-950/5 dark:hover:bg-white/5"
>
<Link href="#link">
<span className="text-nowrap">Request a demo</span>
</Link>
</Button>
</div>
</div>
</div>
<div className="aspect-2/3 absolute inset-1 -z-10 overflow-hidden rounded-3xl border border-black/10 lg:aspect-video lg:rounded-[3rem] dark:border-white/5">
<video
autoPlay
loop
className="size-full -scale-x-100 object-cover opacity-50 invert dark:opacity-35 dark:invert-0 dark:lg:opacity-75"
src="https://res.cloudinary.com/dg4jhba5c/video/upload/v1741605033/dna_ttplyu.mp4"
></video>
</div>
</div>
</section>
<section className="bg-background pb-2">
<div className="group relative m-auto max-w-7xl px-6">
<div className="flex flex-col items-center md:flex-row">
<div className="md:max-w-44 md:border-r md:pr-6">
<p className="text-end text-sm">Powering the best teams</p>
</div>
<div className="relative py-6 md:w-[calc(100%-11rem)]">
<InfiniteSlider speedOnHover={20} speed={40} gap={112}>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</InfiniteSlider>
<div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
<div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
<ProgressiveBlur
className="pointer-events-none absolute left-0 top-0 h-full w-20"
direction="left"
blurIntensity={1}
/>
<ProgressiveBlur
className="pointer-events-none absolute right-0 top-0 h-full w-20"
direction="right"
blurIntensity={1}
/>
</div>
</div>
</div>
</section>
</main>
</>
);
}

158
src/app/[locale]/preview/hero-section/four/page.tsx Normal file
View File

@ -0,0 +1,158 @@
import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
import { HeroHeader } from '@/components/tailark/hero8-header';
import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
export default function HeroSection() {
return (
<>
<HeroHeader />
<main className="overflow-x-hidden">
<section>
<div className="pb-24 pt-12 md:pb-32 lg:pb-56 lg:pt-44">
<div className="relative mx-auto flex max-w-6xl flex-col px-6 lg:block">
<div className="mx-auto max-w-lg text-center lg:ml-0 lg:w-1/2 lg:text-left">
<h1 className="mt-8 max-w-2xl text-balance text-5xl font-medium md:text-6xl lg:mt-16 xl:text-7xl">
Ship 10x Faster with NS
</h1>
<p className="mt-8 max-w-2xl text-pretty text-lg">
Highly customizable components for building modern websites
and applications that look and feel the way you mean it.
</p>
<div className="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start">
<Button asChild size="lg" className="px-5 text-base">
<Link href="#link">
<span className="text-nowrap">Start Building</span>
</Link>
</Button>
<Button
key={2}
asChild
size="lg"
variant="ghost"
className="px-5 text-base"
>
<Link href="#link">
<span className="text-nowrap">Request a demo</span>
</Link>
</Button>
</div>
</div>
<Image
className="-z-10 order-first ml-auto h-56 w-full object-cover invert sm:h-96 lg:absolute lg:inset-0 lg:-right-20 lg:-top-96 lg:order-last lg:h-max lg:w-2/3 lg:object-contain dark:mix-blend-lighten dark:invert-0"
src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605150/abstract-bg_wq4f8w.jpg"
alt="Abstract Object"
height="4000"
width="3000"
/>
</div>
</div>
</section>
<section className="bg-background pb-16 md:pb-32">
<div className="group relative m-auto max-w-6xl px-6">
<div className="flex flex-col items-center md:flex-row">
<div className="md:max-w-44 md:border-r md:pr-6">
<p className="text-end text-sm">Powering the best teams</p>
</div>
<div className="relative py-6 md:w-[calc(100%-11rem)]">
<InfiniteSlider speedOnHover={20} speed={40} gap={112}>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</InfiniteSlider>
<div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
<div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
<ProgressiveBlur
className="pointer-events-none absolute left-0 top-0 h-full w-20"
direction="left"
blurIntensity={1}
/>
<ProgressiveBlur
className="pointer-events-none absolute right-0 top-0 h-full w-20"
direction="right"
blurIntensity={1}
/>
</div>
</div>
</div>
</section>
</main>
</>
);
}

247
src/app/[locale]/preview/hero-section/nine/page.tsx Normal file
View File

@ -0,0 +1,247 @@
'use client';
import { Logo } from '@/components/layout/logo';
import Link from 'next/link';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Menu, X } from 'lucide-react';
import Image from 'next/image';
const menuItems = [
{ name: 'Features', href: '#' },
{ name: 'Solution', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'About', href: '#' },
];
export default function HeroSection() {
const [menuState, setMenuState] = useState(false);
return (
<>
<header>
<nav
data-state={menuState && 'active'}
className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
>
<div className="m-auto max-w-5xl px-6">
<div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
<div className="flex w-full justify-between lg:w-auto">
<Link
href="/"
aria-label="home"
className="flex items-center space-x-2"
>
<Logo />
</Link>
<button
onClick={() => setMenuState(!menuState)}
aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
>
<Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
<X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
</button>
</div>
<div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
<div className="lg:pr-4">
<ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.href}
className="text-muted-foreground hover:text-accent-foreground block duration-150"
>
<span>{item.name}</span>
</Link>
</li>
))}
</ul>
</div>
<div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
<Button asChild variant="outline" size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
<Button asChild size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<div
aria-hidden
className="z-2 absolute inset-0 isolate hidden opacity-50 contain-strict lg:block"
>
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
</div>
<section className="overflow-hidden bg-white dark:bg-transparent">
<div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-24">
<div className="relative z-10 mx-auto max-w-2xl text-center">
<h1 className="text-balance text-4xl font-semibold md:text-5xl lg:text-6xl">
Modern Software testing reimagined
</h1>
<p className="mx-auto my-8 max-w-2xl text-xl">
Officiis laudantium excepturi ducimus rerum dignissimos, and
tempora nam vitae, excepturi ducimus iste provident dolores.
</p>
<Button asChild size="lg">
<Link href="#">
<span className="btn-label">Start Building</span>
</Link>
</Button>
</div>
</div>
<div className="mx-auto -mt-16 max-w-7xl">
<div className="perspective-distant -mr-16 pl-16 lg:-mr-56 lg:pl-56">
<div className="[transform:rotateX(20deg);]">
<div className="lg:h-176 relative skew-x-[.36rad]">
<div
aria-hidden
className="bg-linear-to-b from-background to-background z-1 absolute -inset-16 via-transparent sm:-inset-32"
/>
<div
aria-hidden
className="bg-linear-to-r from-background to-background z-1 absolute -inset-16 bg-white/50 via-transparent sm:-inset-32 dark:bg-transparent"
/>
<div
aria-hidden
className="absolute -inset-16 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] [--color-border:var(--color-zinc-400)] sm:-inset-32 dark:[--color-border:color-mix(in_oklab,var(--color-white)_20%,transparent)]"
/>
<div
aria-hidden
className="from-background z-11 absolute inset-0 bg-gradient-to-l"
/>
<div
aria-hidden
className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
/>
<div
aria-hidden
className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
/>
<Image
className="rounded-(--radius) z-1 relative border dark:hidden"
src="/blocks/card.png"
alt="tailus ui hero section"
width={2880}
height={2074}
/>
<Image
className="rounded-(--radius) z-1 relative hidden border dark:block"
src="/blocks/dark-card.webp"
alt="tailus ui hero section"
width={2880}
height={2074}
/>
</div>
</div>
</div>
</div>
</section>
<section className="bg-background relative z-10 py-16">
<div className="m-auto max-w-5xl px-6">
<h2 className="text-center text-lg font-medium">
Your favorite companies are our partners.
</h2>
<div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
<img
className="h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
<img
className="h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
alt="Tailwind CSS Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/vercel.svg"
alt="Vercel Logo"
height="20"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/zapier.svg"
alt="Zapier Logo"
height="20"
width="auto"
/>
</div>
</div>
</section>
</main>
</>
);
}

300
src/app/[locale]/preview/hero-section/one/page.tsx Normal file
View File

@ -0,0 +1,300 @@
import React from 'react';
import Link from 'next/link';
import { ArrowRight, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
import { TextEffect } from '@/components/tailark/motion/text-effect';
import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
import { HeroHeader } from '@/components/tailark/hero5-header';
const transitionVariants = {
item: {
hidden: {
opacity: 0,
filter: 'blur(12px)',
y: 12,
},
visible: {
opacity: 1,
filter: 'blur(0px)',
y: 0,
transition: {
type: 'spring',
bounce: 0.3,
duration: 1.5,
},
},
},
};
export default function HeroSection() {
return (
<>
<HeroHeader />
<main className="overflow-hidden">
<div
aria-hidden
className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
>
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
</div>
<section>
<div className="relative pt-24 md:pt-36">
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
delayChildren: 1,
},
},
},
item: {
hidden: {
opacity: 0,
y: 20,
},
visible: {
opacity: 1,
y: 0,
transition: {
type: 'spring',
bounce: 0.3,
duration: 2,
},
},
},
}}
className="absolute inset-0 -z-20"
>
<Image
src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605538/night-background_ni3vqb.jpg"
alt="background"
className="absolute inset-x-0 top-56 -z-20 hidden lg:top-32 dark:block"
width="3276"
height="4095"
/>
</AnimatedGroup>
<div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
<div className="mx-auto max-w-7xl px-6">
<div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
<AnimatedGroup variants={transitionVariants}>
<Link
href="#link"
className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
>
<span className="text-foreground text-sm">
Introducing Support for AI Models
</span>
<span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span>
<div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
<div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
<span className="flex size-6">
<ArrowRight className="m-auto size-3" />
</span>
<span className="flex size-6">
<ArrowRight className="m-auto size-3" />
</span>
</div>
</div>
</Link>
</AnimatedGroup>
<TextEffect
preset="fade-in-blur"
speedSegment={0.3}
as="h1"
className="mt-8 text-balance text-6xl md:text-7xl lg:mt-16 xl:text-[5.25rem]"
>
Modern Solutions for Customer Engagement
</TextEffect>
<TextEffect
per="line"
preset="fade-in-blur"
speedSegment={0.3}
delay={0.5}
as="p"
className="mx-auto mt-8 max-w-2xl text-balance text-lg"
>
Highly customizable components for building modern websites
and applications that look and feel the way you mean it.
</TextEffect>
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
>
<div
key={1}
className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
>
<Button
asChild
size="lg"
className="rounded-xl px-5 text-base"
>
<Link href="#link">
<span className="text-nowrap">Start Building</span>
</Link>
</Button>
</div>
<Button
key={2}
asChild
size="lg"
variant="ghost"
className="h-10.5 rounded-xl px-5"
>
<Link href="#link">
<span className="text-nowrap">Request a demo</span>
</Link>
</Button>
</AnimatedGroup>
</div>
</div>
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
>
<div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
<div
aria-hidden
className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
/>
<div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
<Image
className="bg-background aspect-15/8 relative hidden rounded-2xl dark:block"
src="/blocks/mail2.png"
alt="app screen"
width="2700"
height="1440"
/>
<Image
className="z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden"
src="/blocks/mail2-light.png"
alt="app screen"
width="2700"
height="1440"
/>
</div>
</div>
</AnimatedGroup>
</div>
</section>
<section className="bg-background pb-16 pt-16 md:pb-32">
<div className="group relative m-auto max-w-5xl px-6">
<div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
<Link
href="/"
className="block text-sm duration-150 hover:opacity-75"
>
<span> Meet Our Customers</span>
<ChevronRight className="ml-1 inline-block size-3" />
</Link>
</div>
<div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</div>
</div>
</section>
</main>
</>
);
}

401
src/app/[locale]/preview/hero-section/seven/page.tsx Normal file
View File

@ -0,0 +1,401 @@
'use client';
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, EffectCoverflow } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import Link from 'next/link';
import { Logo } from '@/components/layout/logo';
import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
const menuItems = [
{ name: 'Features', href: '#' },
{ name: 'Solution', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'About', href: '#' },
];
export default function HeroSection() {
const [menuState, setMenuState] = React.useState(false);
return (
<>
<header>
<nav
data-state={menuState && 'active'}
className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
>
<div className="m-auto max-w-5xl px-6">
<div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
<div className="flex w-full justify-between lg:w-auto">
<Link
href="/"
aria-label="home"
className="flex items-center space-x-2"
>
<Logo />
</Link>
<button
onClick={() => setMenuState(!menuState)}
aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
>
<Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
<X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
</button>
</div>
<div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
<div className="lg:pr-4">
<ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.href}
className="text-muted-foreground hover:text-accent-foreground block duration-150"
>
<span>{item.name}</span>
</Link>
</li>
))}
</ul>
</div>
<div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
<Button asChild variant="outline" size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
<Button asChild size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main className="overflow-hidden">
<section className="relative">
<div className="relative py-24 lg:py-28">
<div className="mx-auto max-w-7xl px-6 md:px-12">
<div className="text-center sm:mx-auto sm:w-10/12 lg:mr-auto lg:mt-0 lg:w-4/5">
<Link
href="/"
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
>
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
New
</span>
<span className="text-sm">Introduction Tailus UI Html</span>
<span className="bg-(--color-border) block h-4 w-px"></span>
<ArrowRight className="size-4" />
</Link>
<h1 className="mt-8 text-4xl font-semibold md:text-5xl xl:text-5xl xl:[line-height:1.125]">
Tame the Wild West <br /> of Frontend Development
</h1>
<p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
Tailwindcss highly customizable components for building modern
websites and applications that look and feel the way you mean
it.
</p>
<p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
Highly customizable components for building modern websites
and applications, with your personal spark.
</p>
<div className="mt-8">
<Button size="lg" asChild>
<Link href="#">
<Rocket className="relative size-4" />
<span className="text-nowrap">Start Building</span>
</Link>
</Button>
</div>
</div>
<div className="x-auto relative mx-auto mt-8 max-w-lg sm:mt-12">
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
<div className="absolute inset-x-0 top-12 -z-[1] mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
<Swiper
slidesPerView={1}
pagination={{ clickable: true }}
loop
autoplay={{ delay: 5000 }}
modules={[Autoplay, EffectCoverflow]}
>
<SwiperSlide className="px-2">
<div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
<div className="mx-auto h-fit w-full">
<NetlifyLogo />
</div>
<p className="mt-6 text-center text-lg font-medium">
30% Increase in revenue
</p>
</div>
</SwiperSlide>
<SwiperSlide className="px-2">
<div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
<div className="mx-auto h-fit w-full">
<AstroLogo />
</div>
<p className="mt-6 text-center text-lg font-medium">
45% Increase in revenue
</p>
</div>
</SwiperSlide>
<SwiperSlide className="px-2">
<div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
<div className="mx-auto h-fit w-full">
<WorkOsLogo />
</div>
<p className="mt-6 text-center text-lg font-medium">
60% Increase in revenue
</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</section>
</main>
</>
);
}
const WorkOsLogo = () => {
return (
<svg
className="m-auto h-8"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 251.8 48"
>
<g>
<path
fill="currentColor"
className="text-[#29363D] dark:text-white"
d="M73,7.2h7l5,20.6c0.9,3.9,1.1,6.2,1.1,6.2h0.1c0,0,0.3-2.3,1.3-6.2l4.8-20.6h7.9l5.1,20.6 c1,4,1.2,6.2,1.2,6.2h0.1c0,0,0.1-2.2,1-6.2l4.8-20.6h7l-8.8,33.9h-7.7l-5.3-20.5c-1.1-4.5-1.2-6.4-1.2-6.4h-0.1c0,0-0.1,2-1.1,6.4 l-5,20.5h-8C82,41.1,73,7.2,73,7.2z M118.2,28.8c0-7.7,5-12.8,12.6-12.8c7.5,0,12.5,5,12.5,12.8c0,7.8-5,12.8-12.5,12.8 C123.2,41.6,118.2,36.6,118.2,28.8L118.2,28.8z M136.8,28.8c0-5-2.4-7.8-6-7.8c-3.9,0-6.1,3.2-6.1,7.8c0,5.1,2.4,7.9,6.1,7.9 C134.6,36.7,136.8,33.6,136.8,28.8L136.8,28.8z M146.4,16.4h6.2V21h0.1c1.1-2.4,3.6-4.7,8-4.7c0.7,0,1.2,0.1,1.5,0.2v6.2H162 c0,0-0.6-0.2-2.1-0.2c-4.8,0-7.4,2.8-7.4,8.1v10.6h-6.2V16.4z M165.1,7.2h6.2v10.9c0,6.4-0.1,7.6-0.1,7.6h0.1l9.2-9.2h7.7 l-10.8,10.7l12.5,14h-7.3l-9-10.2l-2.3,2.3v7.9H165L165.1,7.2L165.1,7.2z M189.9,24.3c0-10.4,6.5-17.4,16.2-17.4s16.2,7,16.2,17.4 s-6.5,17.4-16.2,17.4C196.4,41.7,189.9,34.7,189.9,24.3z M215.7,24.3c0-7.1-3.8-11.9-9.5-11.9c-5.7,0-9.5,4.8-9.5,11.9 s3.8,11.9,9.5,11.9C211.8,36.2,215.7,31.4,215.7,24.3z M224.7,29.8h7.1c0,4,2.7,6.2,6.9,6.2c3.5,0,5.9-1.8,5.9-4.3 c0-2.8-1.9-3.6-7.7-4.7c-5.4-1.1-11.1-2.9-11.1-9.9c0-5.9,5-10.3,12.7-10.3c8,0,12.9,4.2,12.9,10.5h-7.1c0-3.1-2.4-5-5.8-5 c-3.5,0-5.7,1.7-5.7,4.2c0,2.6,1.5,3.7,6.3,4.6c7,1.5,12.8,2.3,12.8,10.1c0,6.2-5.4,10.3-13.3,10.3 C230.4,41.5,224.7,36.9,224.7,29.8z"
></path>
<path
fill="#6363F1"
d="M0,24c0,1.1,0.3,2.1,0.8,3l9.7,16.8c1,1.7,2.5,3.1,4.4,3.7c3.6,1.2,7.5-0.3,9.4-3.5l2.3-4.1 l-9.2-16l9.8-16.9L29.5,3c0.7-1.2,1.6-2.2,2.7-3H17.2c-2.6,0-5.1,1.4-6.4,3.7L0.8,21C0.3,21.9,0,22.9,0,24z"
></path>
<path
fill="#6363F1"
d="M55.4,24c0-1.1-0.3-2.1-0.8-3l-9.8-17c-1.9-3.3-5.8-4.7-9.4-3.5c-1.9,0.6-3.4,2-4.4,3.7 L28.7,8L38,24l-9.8,16.9L25.9,45c-0.7,1.2-1.6,2.2-2.7,3h15.1c2.6,0,5.1-1.4,6.4-3.7l10-17.3C55.1,26.1,55.4,25.1,55.4,24z"
></path>
</g>
</svg>
);
};
const AstroLogo = () => {
return (
<svg
className="mx-auto h-12"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 460 160"
fill="none"
>
<path
d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
fill="currentColor"
/>
<path
d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
fill="url(#paint0_linear_1_33)"
/>
<path
d="M40 101.034C40 101.034 53.3775 94.5177 66.7924 94.5177L76.9068 63.2155C77.2855 61.7017 78.3911 60.6729 79.6393 60.6729C80.8875 60.6729 81.9932 61.7017 82.3719 63.2155L92.4862 94.5177C108.374 94.5177 119.279 101.034 119.279 101.034C119.279 101.034 96.5558 39.133 96.5114 39.0088C95.8592 37.1787 94.7583 36 93.274 36H66.007C64.5227 36 63.4662 37.1787 62.7696 39.0088C62.7205 39.1307 40 101.034 40 101.034Z"
fill="currentColor"
/>
<path
d="M181.043 81.1227C181.043 86.6079 174.22 89.8838 164.773 89.8838C158.624 89.8838 156.45 88.3601 156.45 85.1604C156.45 81.8083 159.149 80.2085 165.297 80.2085C170.846 80.2085 175.569 80.2846 181.043 80.9703V81.1227ZM181.118 74.3423C177.744 73.5805 172.645 73.1234 166.572 73.1234C148.877 73.1234 140.555 77.3135 140.555 87.065C140.555 97.1975 146.253 101.083 159.449 101.083C170.621 101.083 178.193 98.2641 180.968 91.3313H181.417C181.342 93.0074 181.268 94.6834 181.268 95.9785C181.268 99.5592 181.867 99.8639 184.791 99.8639H198.587C197.837 97.7308 197.388 91.7122 197.388 86.5317C197.388 80.9703 197.612 76.7802 197.612 71.1426C197.612 59.6388 190.715 52.3251 169.121 52.3251C159.824 52.3251 149.477 53.925 141.605 56.2867C142.354 59.4102 143.404 65.7335 143.929 69.8474C150.752 66.6477 160.424 65.2764 167.922 65.2764C178.268 65.2764 181.118 67.6381 181.118 72.4377V74.3423Z"
fill="currentColor"
/>
<path
d="M218.971 84.3224C217.097 84.5509 214.547 84.5509 211.923 84.5509C209.149 84.5509 206.6 84.4748 204.875 84.2462C204.875 84.8557 204.8 85.5413 204.8 86.1508C204.8 95.6738 211.024 101.235 232.917 101.235C253.535 101.235 260.208 95.75 260.208 86.0746C260.208 76.9325 255.785 72.4377 236.216 71.4473C220.995 70.7616 219.646 69.0856 219.646 67.181C219.646 64.9717 221.595 63.8289 231.792 63.8289C242.364 63.8289 245.213 65.2764 245.213 68.3238V69.0094C246.713 68.9332 249.412 68.8571 252.186 68.8571C254.81 68.8571 257.659 68.9332 259.309 69.0856C259.309 68.3999 259.384 67.7905 259.384 67.2572C259.384 56.0581 250.086 52.4013 232.092 52.4013C211.848 52.4013 205.025 57.3533 205.025 67.0286C205.025 75.7136 210.499 81.1227 229.918 81.9607C244.238 82.4178 245.813 84.0177 245.813 86.227C245.813 88.5887 243.489 89.6553 233.442 89.6553C221.895 89.6553 218.971 88.0554 218.971 84.7795V84.3224Z"
fill="currentColor"
/>
<path
d="M284.955 44.1734C279.482 49.2778 269.66 54.3821 264.187 55.7534C264.262 58.5722 264.262 63.7527 264.262 66.5715L269.285 66.6477C269.21 72.0568 269.135 78.6086 269.135 82.9511C269.135 93.0835 274.458 100.702 291.028 100.702C298.001 100.702 302.65 99.9401 308.423 98.7212C307.823 94.9881 307.148 89.2743 306.923 84.9319C303.475 86.0746 299.126 86.6841 294.327 86.6841C287.654 86.6841 284.955 84.8557 284.955 79.599C284.955 75.028 284.955 70.7616 285.03 66.8001C293.578 66.8763 302.125 67.0286 307.148 67.181C307.073 63.2194 307.223 57.5056 307.448 53.6964C300.176 53.8488 292.003 53.925 285.255 53.925C285.33 50.5729 285.405 47.3732 285.48 44.1734H284.955Z"
fill="currentColor"
/>
<path
d="M329.736 64.286C329.811 60.3244 329.886 56.9724 329.961 53.6964H314.89C315.115 60.2483 315.115 66.9525 315.115 76.7802C315.115 86.6079 315.04 93.3883 314.89 99.8639H332.135C331.835 95.2929 331.76 87.5983 331.76 81.0465C331.76 70.6855 335.959 67.7143 345.481 67.7143C349.905 67.7143 353.054 68.2476 355.828 69.238C355.903 65.3526 356.653 57.8104 357.102 54.4583C354.253 53.6203 351.104 53.087 347.28 53.087C339.108 53.0108 333.11 56.3629 330.336 64.3622L329.736 64.286Z"
fill="currentColor"
/>
<path
d="M404.808 76.4754C404.808 84.7795 398.81 88.6649 389.363 88.6649C379.991 88.6649 373.993 85.008 373.993 76.4754C373.993 67.9428 380.066 64.7431 389.363 64.7431C398.735 64.7431 404.808 68.1714 404.808 76.4754ZM420.478 76.0945C420.478 59.5626 407.582 52.1728 389.363 52.1728C371.069 52.1728 358.623 59.5626 358.623 76.0945C358.623 92.5503 370.244 101.388 389.288 101.388C408.482 101.388 420.478 92.5503 420.478 76.0945Z"
fill="currentColor"
/>
<defs>
<linearGradient
id="paint0_linear_1_33"
x1="61.0003"
y1="136"
x2="104.622"
y2="115.39"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D83333" />
<stop offset="1" stopColor="#F041FF" />
</linearGradient>
</defs>
</svg>
);
};
const NetlifyLogo = () => {
return (
<>
<svg
className="mx-auto h-12 dark:hidden"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 209"
fill="none"
>
<g clipPath="url(#clip0_235_8)">
<path
d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
fill="#05BDBA"
/>
<path
d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
fill="#05BDBA"
/>
<path
d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
fill="#05BDBA"
/>
<path
d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
fill="#05BDBA"
/>
<path
d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
fill="#05BDBA"
/>
<path
d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
fill="#05BDBA"
/>
<path
d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
fill="#014847"
/>
<path
d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
fill="#014847"
/>
<path
d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
fill="#014847"
/>
<path
d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
fill="#014847"
/>
<path
d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
fill="#014847"
/>
<path
d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
fill="#014847"
/>
<path
d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
fill="#014847"
/>
</g>
<defs>
<clipPath id="clip0_235_8">
<rect width="512" height="208.126" fill="white" />
</clipPath>
</defs>
</svg>
<svg
className="mx-auto hidden h-12 dark:block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 209"
fill="none"
>
<g clipPath="url(#clip0_235_26)">
<path
d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
fill="#32E6E2"
/>
<path
d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
fill="#32E6E2"
/>
<path
d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
fill="#32E6E2"
/>
<path
d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
fill="#32E6E2"
/>
<path
d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
fill="#32E6E2"
/>
<path
d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
fill="#32E6E2"
/>
<path
d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
fill="white"
/>
<path
d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
fill="white"
/>
<path
d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
fill="white"
/>
<path
d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
fill="white"
/>
<path
d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
fill="white"
/>
<path
d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
fill="white"
/>
<path
d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_235_26">
<rect width="512" height="208.126" fill="white" />
</clipPath>
</defs>
</svg>
</>
);
};

168
src/app/[locale]/preview/hero-section/six/page.tsx Normal file
View File

@ -0,0 +1,168 @@
'use client';
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
const menuItems = [
{ name: 'Features', href: '#' },
{ name: 'Solution', href: '#' },
{ name: 'Pricing', href: '#' },
{ name: 'About', href: '#' },
];
export default function HeroSection() {
const [menuState, setMenuState] = useState(false);
return (
<>
<header>
<nav
data-state={menuState && 'active'}
className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
>
<div className="m-auto max-w-5xl px-6">
<div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
<div className="flex w-full justify-between lg:w-auto">
<Link
href="/"
aria-label="home"
className="flex items-center space-x-2"
>
<Logo />
</Link>
<button
onClick={() => setMenuState(!menuState)}
aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
>
<Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
<X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
</button>
</div>
<div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
<div className="lg:pr-4">
<ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
{menuItems.map((item, index) => (
<li key={index}>
<Link
href={item.href}
className="text-muted-foreground hover:text-accent-foreground block duration-150"
>
<span>{item.name}</span>
</Link>
</li>
))}
</ul>
</div>
<div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
<Button asChild variant="outline" size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
<Button asChild size="sm">
<Link href="#">
<span>Login</span>
</Link>
</Button>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<section className="overflow-hidden">
<div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-20">
<div className="lg:flex lg:items-center lg:gap-12">
<div className="relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left">
<Link
href="/"
className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3 lg:ml-0"
>
<span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
New
</span>
<span className="text-sm">Introduction Tailus UI Html</span>
<span className="bg-(--color-border) block h-4 w-px"></span>
<ArrowRight className="size-4" />
</Link>
<h1 className="mt-10 text-balance text-4xl font-bold md:text-5xl xl:text-5xl">
Production Ready Digital Marketing blocks
</h1>
<p className="mt-8">
Error totam sit illum. Voluptas doloribus asperiores quaerat
aperiam. Quidem harum omnis beatae ipsum soluta!
</p>
<div>
<form
action=""
className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto"
>
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
<input
placeholder="Your mail address"
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
type="email"
/>
<div className="md:pr-1.5 lg:pr-0">
<Button
aria-label="submit"
className="rounded-(--radius)"
>
<span className="hidden md:block">Get Started</span>
<SendHorizonal
className="relative mx-auto size-5 md:hidden"
strokeWidth={2}
/>
</Button>
</div>
</div>
</form>
<ul className="list-inside list-disc space-y-2">
<li>Faster</li>
<li>Modern</li>
<li>100% Customizable</li>
</ul>
</div>
</div>
</div>
<div className="absolute inset-0 -mx-4 rounded-3xl p-3 lg:col-span-3">
<div className="relative">
<div className="bg-radial-[at_65%_25%] to-background z-1 -inset-17 absolute from-transparent to-40%"></div>
<Image
className="hidden dark:block"
src="/blocks/music.png"
alt="app illustration"
width={2796}
height={2008}
/>
<Image
className="dark:hidden"
src="/blocks/music-light.png"
alt="app illustration"
width={2796}
height={2008}
/>
</div>
</div>
</div>
</section>
</main>
</>
);
}

141
src/app/[locale]/preview/hero-section/three/page.tsx Normal file
View File

@ -0,0 +1,141 @@
import React from 'react';
import { Mail, SendHorizonal } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { TextEffect } from '@/components/tailark/motion/text-effect';
import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
import { HeroHeader } from '@/components/tailark/hero5-header';
import { LogoCloud } from '@/components/tailark/logo-cloud';
import Image from 'next/image';
const transitionVariants = {
item: {
hidden: {
opacity: 0,
filter: 'blur(12px)',
y: 12,
},
visible: {
opacity: 1,
filter: 'blur(0px)',
y: 0,
transition: {
type: 'spring',
bounce: 0.3,
duration: 1.5,
},
},
},
};
export default function HeroSection() {
return (
<>
<HeroHeader />
<main className="overflow-hidden">
<div
aria-hidden
className="absolute inset-0 isolate z-10 hidden opacity-65 contain-strict lg:block"
>
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
</div>
<section>
<div className="relative mx-auto max-w-6xl px-6 pt-32 lg:pb-16 lg:pt-48">
<div className="relative z-10 mx-auto max-w-4xl text-center">
<TextEffect
preset="fade-in-blur"
speedSegment={0.3}
as="h1"
className="text-balance text-4xl font-medium sm:text-5xl md:text-6xl"
>
Your gateway to endless entertainment experiences
</TextEffect>
<TextEffect
per="line"
preset="fade-in-blur"
speedSegment={0.3}
delay={0.5}
as="p"
className="mx-auto mt-12 max-w-2xl text-pretty text-lg"
>
Tailwindcss highly customizable components for building modern
websites and applications that look and feel the way you mean
it.
</TextEffect>
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
className="mt-12"
>
<form action="" className="mx-auto max-w-sm">
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.5rem)] border pr-2 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
<Mail className="pointer-events-none absolute inset-y-0 left-4 my-auto size-4" />
<input
placeholder="Your mail address"
className="h-12 w-full bg-transparent pl-12 focus:outline-none"
type="email"
/>
<div className="md:pr-1.5 lg:pr-0">
<Button
aria-label="submit"
size="sm"
className="rounded-(--radius)"
>
<span className="hidden md:block">Get Started</span>
<SendHorizonal
className="relative mx-auto size-5 md:hidden"
strokeWidth={2}
/>
</Button>
</div>
</div>
</form>
</AnimatedGroup>
</div>
<div className="mx-auto md:-mt-20 lg:-mt-40">
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
>
<div className="-rotate-30 aspect-3/2 relative mx-auto lg:w-2/3">
<div className="bg-linear-to-b to-background from-background absolute inset-0 via-transparent"></div>
<div className="bg-linear-to-l to-background from-background absolute inset-0 via-transparent"></div>
<Image
src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605545/phone-backgroudn_xqgg5g.jpg"
alt="Phone Background"
width="6240"
height="4160"
/>
</div>
</AnimatedGroup>
</div>
</div>
</section>
<LogoCloud />
</main>
</>
);
}

242
src/app/[locale]/preview/hero-section/two/page.tsx Normal file
View File

@ -0,0 +1,242 @@
import React from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
import { TextEffect } from '@/components/tailark/motion/text-effect';
import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
import { HeroHeader } from '@/components/tailark/hero6-header';
const transitionVariants = {
item: {
hidden: {
opacity: 0,
filter: 'blur(12px)',
y: 12,
},
visible: {
opacity: 1,
filter: 'blur(0px)',
y: 0,
transition: {
type: 'spring',
bounce: 0.3,
duration: 1.5,
},
},
},
};
export default function HeroSection() {
return (
<>
<HeroHeader />
<main className="overflow-hidden">
<div
aria-hidden
className="absolute inset-0 isolate hidden contain-strict lg:block"
>
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
</div>
<section>
<div className="relative pt-24">
<div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
<div className="mx-auto max-w-5xl px-6">
<div className="sm:mx-auto lg:mr-auto lg:mt-0">
<TextEffect
preset="fade-in-blur"
speedSegment={0.3}
as="h1"
className="mt-8 max-w-2xl text-balance text-5xl font-medium md:text-6xl lg:mt-16"
>
Build and Ship 10x faster with NS
</TextEffect>
<TextEffect
per="line"
preset="fade-in-blur"
speedSegment={0.3}
delay={0.5}
as="p"
className="mt-8 max-w-2xl text-pretty text-lg"
>
Tailwindcss highly customizable components for building modern
websites and applications that look and feel the way you mean
it.
</TextEffect>
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
className="mt-12 flex items-center gap-2"
>
<div
key={1}
className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
>
<Button
asChild
size="lg"
className="rounded-xl px-5 text-base"
>
<Link href="#link">
<span className="text-nowrap">Start Building</span>
</Link>
</Button>
</div>
<Button
key={2}
asChild
size="lg"
variant="ghost"
className="h-10.5 rounded-xl px-5 text-base"
>
<Link href="#link">
<span className="text-nowrap">Request a demo</span>
</Link>
</Button>
</AnimatedGroup>
</div>
</div>
<AnimatedGroup
variants={{
container: {
visible: {
transition: {
staggerChildren: 0.05,
delayChildren: 0.75,
},
},
},
...transitionVariants,
}}
>
<div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
<div
aria-hidden
className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
/>
<div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-5xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
<Image
className="bg-background aspect-15/8 relative hidden rounded-2xl dark:block"
src="/blocks/mail2.png"
alt="app screen"
width="2700"
height="1440"
/>
<Image
className="z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden"
src="/blocks/mail2-light.png"
alt="app screen"
width="2700"
height="1440"
/>
</div>
</div>
</AnimatedGroup>
</div>
</section>
<section className="bg-background pb-16 pt-16 md:pb-32">
<div className="group relative m-auto max-w-5xl px-6">
<div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
<Link
href="/"
className="block text-sm duration-150 hover:opacity-75"
>
<span> Meet Our Customers</span>
<ChevronRight className="ml-1 inline-block size-3" />
</Link>
</div>
<div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</div>
</div>
</section>
</main>
</>
);
}

106
src/app/[locale]/preview/integrations/eight/page.tsx Normal file
View File

@ -0,0 +1,106 @@
import {
Gemini,
Replit,
GooglePaLM,
MagicUI,
VSCodium,
MediaWiki,
} from '@/components/tailark/logos';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto flex flex-col px-6 md:grid md:max-w-5xl md:grid-cols-2 md:gap-12">
<div className="order-last mt-6 flex flex-col gap-12 md:order-first">
<div className="space-y-6">
<h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">
Integrate with your favorite LLMs
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to
enhance your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
<div className="mt-auto grid grid-cols-[auto_1fr] gap-3">
<div className="bg-background flex aspect-square items-center justify-center border">
<MediaWiki className="size-9" />
</div>
<blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam, quos.
</p>
<div className="mt-2 flex gap-2 text-sm">
<cite>John Doe</cite>
<p className="text-muted-foreground">Founder, MediaWiki</p>
</div>
</blockquote>
</div>
</div>
<div className="-mx-6 px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)] sm:mx-auto sm:max-w-md md:-mx-6 md:ml-auto md:mr-0">
<div className="bg-background dark:bg-muted/50 rounded-2xl border p-3 shadow-lg md:pb-12">
<div className="grid grid-cols-2 gap-2">
<Integration
icon={<Gemini />}
name="Gemini"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<Replit />}
name="Replit"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<GooglePaLM />}
name="GooglePaLM"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<MagicUI />}
name="MagicUI"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<VSCodium />}
name="VSCodium"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<MediaWiki />}
name="MediaWiki"
description="The AI model that powers Google's search engine."
/>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
const Integration = ({
icon,
name,
description,
}: { icon: React.ReactNode; name: string; description: string }) => {
return (
<div className="hover:bg-muted dark:hover:bg-muted/50 space-y-4 rounded-lg border p-4 transition-colors">
<div className="flex size-fit items-center justify-center">{icon}</div>
<div className="space-y-1">
<h3 className="text-sm font-medium">{name}</h3>
<p className="text-muted-foreground line-clamp-1 text-sm md:line-clamp-2">
{description}
</p>
</div>
</div>
);
};

108
src/app/[locale]/preview/integrations/five/page.tsx Normal file
View File

@ -0,0 +1,108 @@
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
import { Logo } from '@/components/layout/logo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function IntegrationsSection() {
return (
<section>
<div className="py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="aspect-16/10 group relative mx-auto flex max-w-[22rem] items-center justify-between sm:max-w-sm">
<div
role="presentation"
className="bg-linear-to-b border-foreground/5 absolute inset-0 z-10 aspect-square animate-spin items-center justify-center rounded-full border-t from-lime-500/15 to-transparent to-25% opacity-0 duration-[3.5s] group-hover:opacity-100 dark:from-white/5"
></div>
<div
role="presentation"
className="bg-linear-to-b border-foreground/5 absolute inset-16 z-10 aspect-square scale-90 animate-spin items-center justify-center rounded-full border-t from-blue-500/15 to-transparent to-25% opacity-0 duration-[3.5s] group-hover:opacity-100"
></div>
<div className="bg-linear-to-b from-muted-foreground/15 absolute inset-0 flex aspect-square items-center justify-center rounded-full border-t to-transparent to-25%">
<IntegrationCard className="-translate-x-1/6 absolute left-0 top-1/4 -translate-y-1/4">
<Gemini />
</IntegrationCard>
<IntegrationCard className="absolute top-0 -translate-y-1/2">
<Replit />
</IntegrationCard>
<IntegrationCard className="translate-x-1/6 absolute right-0 top-1/4 -translate-y-1/4">
<MagicUI />
</IntegrationCard>
</div>
<div className="bg-linear-to-b from-muted-foreground/15 absolute inset-16 flex aspect-square scale-90 items-center justify-center rounded-full border-t to-transparent to-25%">
<IntegrationCard className="absolute top-0 -translate-y-1/2">
<VSCodium />
</IntegrationCard>
<IntegrationCard className="absolute left-0 top-1/4 -translate-x-1/4 -translate-y-1/4">
<MediaWiki />
</IntegrationCard>
<IntegrationCard className="absolute right-0 top-1/4 -translate-y-1/4 translate-x-1/4">
<GooglePaLM />
</IntegrationCard>
</div>
<div className="absolute inset-x-0 bottom-0 mx-auto my-2 flex w-fit justify-center gap-2">
<div className="bg-muted relative z-20 rounded-full border p-1">
<IntegrationCard
className="shadow-black-950/10 dark:bg-background size-16 border-black/20 shadow-xl dark:border-white/25 dark:shadow-white/15"
isCenter={true}
>
<Logo className="text-blue-500" />
</IntegrationCard>
</div>
</div>
</div>
<div className="bg-linear-to-t from-background relative z-20 mx-auto mt-12 max-w-lg space-y-6 from-55% text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
children,
className,
isCenter = false,
}: {
children: React.ReactNode;
className?: string;
position?:
| 'left-top'
| 'left-middle'
| 'left-bottom'
| 'right-top'
| 'right-middle'
| 'right-bottom';
isCenter?: boolean;
}) => {
return (
<div
className={cn(
'relative z-30 flex size-12 rounded-full border bg-white shadow-sm shadow-black/5 dark:bg-white/5 dark:backdrop-blur-md',
className
)}
>
<div className={cn('m-auto size-fit *:size-5', isCenter && '*:size-8')}>
{children}
</div>
</div>
);
};

130
src/app/[locale]/preview/integrations/four/page.tsx Normal file
View File

@ -0,0 +1,130 @@
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
import { Logo } from '@/components/layout/logo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="relative mx-auto flex max-w-sm items-center justify-between">
<div className="space-y-6">
<IntegrationCard position="left-top">
<Gemini />
</IntegrationCard>
<IntegrationCard position="left-middle">
<Replit />
</IntegrationCard>
<IntegrationCard position="left-bottom">
<MagicUI />
</IntegrationCard>
</div>
<div className="mx-auto my-2 flex w-fit justify-center gap-2">
<div className="bg-muted relative z-20 rounded-2xl border p-1">
<IntegrationCard
className="shadow-black-950/10 dark:bg-background size-16 border-black/25 shadow-xl dark:border-white/25 dark:shadow-white/10"
isCenter={true}
>
<Logo />
</IntegrationCard>
</div>
</div>
<div
role="presentation"
className="absolute inset-1/3 bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] opacity-50 [--dots-color:black] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] dark:[--dots-color:white]"
></div>
<div className="space-y-6">
<IntegrationCard position="right-top">
<VSCodium />
</IntegrationCard>
<IntegrationCard position="right-middle">
<MediaWiki />
</IntegrationCard>
<IntegrationCard position="right-bottom">
<GooglePaLM />
</IntegrationCard>
</div>
</div>
<div className="mx-auto mt-12 max-w-lg space-y-6 text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
children,
className,
position,
isCenter = false,
}: {
children: React.ReactNode;
className?: string;
position?:
| 'left-top'
| 'left-middle'
| 'left-bottom'
| 'right-top'
| 'right-middle'
| 'right-bottom';
isCenter?: boolean;
}) => {
return (
<div
className={cn(
'bg-background relative flex size-12 rounded-xl border dark:bg-transparent',
className
)}
>
<div
className={cn(
'relative z-20 m-auto size-fit *:size-6',
isCenter && '*:size-8'
)}
>
{children}
</div>
{position && !isCenter && (
<div
className={cn(
'bg-linear-to-r to-muted-foreground/25 absolute z-10 h-px',
position === 'left-top' &&
'left-full top-1/2 w-[130px] origin-left rotate-[25deg]',
position === 'left-middle' &&
'left-full top-1/2 w-[120px] origin-left',
position === 'left-bottom' &&
'left-full top-1/2 w-[130px] origin-left rotate-[-25deg]',
position === 'right-top' &&
'bg-linear-to-l right-full top-1/2 w-[130px] origin-right rotate-[-25deg]',
position === 'right-middle' &&
'bg-linear-to-l right-full top-1/2 w-[120px] origin-right',
position === 'right-bottom' &&
'bg-linear-to-l right-full top-1/2 w-[130px] origin-right rotate-[25deg]'
)}
/>
)}
</div>
);
};

118
src/app/[locale]/preview/integrations/one/page.tsx Normal file
View File

@ -0,0 +1,118 @@
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
import * as React from 'react';
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
export default function IntegrationsSection() {
return (
<section>
<div className="py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground mt-6">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
</div>
<div className="mt-12 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
<IntegrationCard
title="Google Gemini"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<Gemini />
</IntegrationCard>
<IntegrationCard
title="Replit"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<Replit />
</IntegrationCard>
<IntegrationCard
title="Magic UI"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<MagicUI />
</IntegrationCard>
<IntegrationCard
title="VSCodium"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<VSCodium />
</IntegrationCard>
<IntegrationCard
title="MediaWiki"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<MediaWiki />
</IntegrationCard>
<IntegrationCard
title="Google PaLM"
description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
>
<GooglePaLM />
</IntegrationCard>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
title,
description,
children,
link = 'https://github.com/meschacirung/cnblocks',
}: {
title: string;
description: string;
children: React.ReactNode;
link?: string;
}) => {
return (
<Card className="p-6">
<div className="relative">
<div className="*:size-10">{children}</div>
<div className="space-y-2 py-6">
<h3 className="text-base font-medium">{title}</h3>
<p className="text-muted-foreground line-clamp-2 text-sm">
{description}
</p>
</div>
<div className="flex gap-3 border-t border-dashed pt-6">
<Button
asChild
variant="secondary"
size="sm"
className="gap-1 pr-2 shadow-none"
>
<Link href={link}>
Learn More
<ChevronRight className="ml-0 !size-3.5 opacity-50" />
</Link>
</Button>
</div>
</div>
</Card>
);
};

148
src/app/[locale]/preview/integrations/seven/page.tsx Normal file
View File

@ -0,0 +1,148 @@
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
import { Logo } from '@/components/layout/logo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="bg-muted/25 group relative mx-auto max-w-[22rem] items-center justify-between space-y-6 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] sm:max-w-md">
<div
role="presentation"
className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:32px_32px] opacity-50"
></div>
<div>
<InfiniteSlider gap={24} speed={20} speedOnHover={10}>
<IntegrationCard>
<VSCodium />
</IntegrationCard>
<IntegrationCard>
<MediaWiki />
</IntegrationCard>
<IntegrationCard>
<GooglePaLM />
</IntegrationCard>
<IntegrationCard>
<Gemini />
</IntegrationCard>
<IntegrationCard>
<Replit />
</IntegrationCard>
<IntegrationCard>
<MagicUI />
</IntegrationCard>
</InfiniteSlider>
</div>
<div>
<InfiniteSlider gap={24} speed={20} speedOnHover={10} reverse>
<IntegrationCard>
<Gemini />
</IntegrationCard>
<IntegrationCard>
<Replit />
</IntegrationCard>
<IntegrationCard>
<MediaWiki />
</IntegrationCard>
<IntegrationCard>
<MagicUI />
</IntegrationCard>
<IntegrationCard>
<VSCodium />
</IntegrationCard>
<IntegrationCard>
<GooglePaLM />
</IntegrationCard>
</InfiniteSlider>
</div>
<div>
<InfiniteSlider gap={24} speed={20} speedOnHover={10}>
<IntegrationCard>
<Replit />
</IntegrationCard>
<IntegrationCard>
<MagicUI />
</IntegrationCard>
<IntegrationCard>
<Gemini />
</IntegrationCard>
<IntegrationCard>
<VSCodium />
</IntegrationCard>
<IntegrationCard>
<MediaWiki />
</IntegrationCard>
<IntegrationCard>
<GooglePaLM />
</IntegrationCard>
</InfiniteSlider>
</div>
<div className="absolute inset-0 m-auto flex size-fit justify-center gap-2">
<IntegrationCard
className="shadow-black-950/10 size-16 bg-white/25 shadow-xl backdrop-blur-md backdrop-grayscale dark:border-white/10 dark:shadow-white/15"
isCenter={true}
>
<Logo />
</IntegrationCard>
</div>
</div>
<div className="mx-auto mt-12 max-w-lg space-y-6 text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
children,
className,
isCenter = false,
}: {
children: React.ReactNode;
className?: string;
position?:
| 'left-top'
| 'left-middle'
| 'left-bottom'
| 'right-top'
| 'right-middle'
| 'right-bottom';
isCenter?: boolean;
}) => {
return (
<div
className={cn(
'bg-background relative z-20 flex size-12 rounded-full border',
className
)}
>
<div className={cn('m-auto size-fit *:size-5', isCenter && '*:size-8')}>
{children}
</div>
</div>
);
};

70
src/app/[locale]/preview/integrations/six/page.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Gemini, Replit, GooglePaLM } from '@/components/tailark/logos';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { Plus } from 'lucide-react';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-md px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)]">
<div className="bg-background dark:bg-muted/50 rounded-xl border px-6 pb-12 pt-3 shadow-xl">
<Integration
icon={<Gemini />}
name="Gemini"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<Replit />}
name="Replit"
description="The AI model that powers Google's search engine."
/>
<Integration
icon={<GooglePaLM />}
name="GooglePaLM"
description="The AI model that powers Google's search engine."
/>
</div>
</div>
<div className="mx-auto mt-6 max-w-lg space-y-6 text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">
Integrate with your favorite LLMs
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
);
}
const Integration = ({
icon,
name,
description,
}: { icon: React.ReactNode; name: string; description: string }) => {
return (
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-b border-dashed py-3 last:border-b-0">
<div className="bg-muted border-foreground/5 flex size-12 items-center justify-center rounded-lg border">
{icon}
</div>
<div className="space-y-0.5">
<h3 className="text-sm font-medium">{name}</h3>
<p className="text-muted-foreground line-clamp-1 text-sm">
{description}
</p>
</div>
<Button variant="outline" size="icon" aria-label="Add integration">
<Plus className="size-4" />
</Button>
</div>
);
};

101
src/app/[locale]/preview/integrations/three/page.tsx Normal file
View File

@ -0,0 +1,101 @@
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
import { Logo } from '@/components/layout/logo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="grid items-center sm:grid-cols-2">
<div className="dark:bg-muted/50 relative mx-auto w-fit">
<div className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"></div>
<div className="mx-auto mb-2 flex w-fit justify-center gap-2">
<IntegrationCard>
<Gemini />
</IntegrationCard>
<IntegrationCard>
<Replit />
</IntegrationCard>
</div>
<div className="mx-auto my-2 flex w-fit justify-center gap-2">
<IntegrationCard>
<MagicUI />
</IntegrationCard>
<IntegrationCard
borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
className="dark:bg-white/10"
>
<Logo />
</IntegrationCard>
<IntegrationCard>
<VSCodium />
</IntegrationCard>
</div>
<div className="mx-auto flex w-fit justify-center gap-2">
<IntegrationCard>
<MediaWiki />
</IntegrationCard>
<IntegrationCard>
<GooglePaLM />
</IntegrationCard>
</div>
</div>
<div className="mx-auto mt-6 max-w-lg space-y-6 text-center sm:mt-0 sm:text-left">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to
enhance your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
children,
className,
borderClassName,
}: {
children: React.ReactNode;
className?: string;
borderClassName?: string;
}) => {
return (
<div
className={cn(
'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
className
)}
>
<div
role="presentation"
className={cn(
'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
borderClassName
)}
/>
<div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
</div>
);
};

102
src/app/[locale]/preview/integrations/two/page.tsx Normal file
View File

@ -0,0 +1,102 @@
import {
Gemini,
Replit,
MagicUI,
VSCodium,
MediaWiki,
GooglePaLM,
} from '@/components/tailark/logos';
import { Logo } from '@/components/layout/logo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
export default function IntegrationsSection() {
return (
<section>
<div className="bg-muted dark:bg-background py-24 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="dark:bg-muted/50 relative mx-auto w-fit">
<div
role="presentation"
className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"
></div>
<div className="mx-auto mb-2 flex w-fit justify-center gap-2">
<IntegrationCard>
<Gemini />
</IntegrationCard>
<IntegrationCard>
<Replit />
</IntegrationCard>
</div>
<div className="mx-auto my-2 flex w-fit justify-center gap-2">
<IntegrationCard>
<MagicUI />
</IntegrationCard>
<IntegrationCard
borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
className="dark:bg-white/10"
>
<Logo />
</IntegrationCard>
<IntegrationCard>
<VSCodium />
</IntegrationCard>
</div>
<div className="mx-auto flex w-fit justify-center gap-2">
<IntegrationCard>
<MediaWiki />
</IntegrationCard>
<IntegrationCard>
<GooglePaLM />
</IntegrationCard>
</div>
</div>
<div className="mx-auto mt-6 max-w-lg space-y-6 text-center">
<h2 className="text-balance text-3xl font-semibold md:text-4xl">
Integrate with your favorite tools
</h2>
<p className="text-muted-foreground">
Connect seamlessly with popular platforms and services to enhance
your workflow.
</p>
<Button variant="outline" size="sm" asChild>
<Link href="#">Get Started</Link>
</Button>
</div>
</div>
</div>
</section>
);
}
const IntegrationCard = ({
children,
className,
borderClassName,
}: {
children: React.ReactNode;
className?: string;
borderClassName?: string;
}) => {
return (
<div
className={cn(
'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
className
)}
>
<div
role="presentation"
className={cn(
'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
borderClassName
)}
/>
<div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
</div>
);
};

17
src/app/[locale]/preview/layout.tsx Normal file
View File

@ -0,0 +1,17 @@
import { DevToolbar } from '@/components/tailark/toolbar';
export const dynamic = 'force-static';
export const revalidate = 3600; // Cache for 1 hour
export default function BlockLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
{process.env.NODE_ENV === 'development' && <DevToolbar />}
{children}
</>
);
}

122
src/app/[locale]/preview/login/one/page.tsx Normal file
View File

@ -0,0 +1,122 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-card m-auto h-fit w-full max-w-sm rounded-[calc(var(--radius)+.125rem)] border p-0.5 shadow-md dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="p-8 pb-6">
<div>
<Link href="/" aria-label="go home">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Sign In to Tailus UI
</h1>
<p className="text-sm">Welcome back! Sign in to continue</p>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
<path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
<path
fill="#00adef"
d="M121.663 256.002H0V134.336h121.663z"
></path>
<path
fill="#fbbc09"
d="M256 256.002H134.335V134.336H256z"
></path>
</svg>
<span>Microsoft</span>
</Button>
</div>
<hr className="my-4 border-dashed" />
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Username
</Label>
<Input type="email" required name="email" id="email" />
</div>
<div className="space-y-0.5">
<div className="flex items-center justify-between">
<Label htmlFor="pwd" className="text-title text-sm">
Password
</Label>
<Button asChild variant="link" size="sm">
<Link
href="#"
className="link intent-info variant-ghost text-sm"
>
Forgot your Password ?
</Link>
</Button>
</div>
<Input
type="password"
required
name="pwd"
id="pwd"
className="input sz-md variant-mixed"
/>
</div>
<Button className="w-full">Sign In</Button>
</div>
</div>
<div className="bg-muted rounded-(--radius) border p-3">
<p className="text-accent-foreground text-center text-sm">
Don't have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Create account</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

80
src/app/[locale]/preview/login/three/page.tsx Normal file
View File

@ -0,0 +1,80 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form action="" className="max-w-92 m-auto h-fit w-full">
<div className="p-6">
<div>
<Link href="/" aria-label="go home">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Sign In to Tailus UI
</h1>
<p>Welcome back! Sign in to continue</p>
</div>
<div className="mt-6">
<Button type="button" variant="outline" className="w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
</div>
<div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<hr className="border-dashed" />
<span className="text-muted-foreground text-xs">
Or continue With
</span>
<hr className="border-dashed" />
</div>
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Email
</Label>
<Input type="email" required name="email" id="email" />
</div>
<Button className="w-full">Continue</Button>
</div>
</div>
<p className="text-accent-foreground text-center text-sm">
Don't have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Create account</Link>
</Button>
</p>
</form>
</section>
);
}

128
src/app/[locale]/preview/login/two/page.tsx Normal file
View File

@ -0,0 +1,128 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
<div className="text-center">
<Link href="/" aria-label="go home" className="mx-auto block w-fit">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Sign In to Tailus UI
</h1>
<p className="text-sm">Welcome back! Sign in to continue</p>
</div>
<div className="mt-6 space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Username
</Label>
<Input type="email" required name="email" id="email" />
</div>
<div className="space-y-0.5">
<div className="flex items-center justify-between">
<Label htmlFor="pwd" className="text-title text-sm">
Password
</Label>
<Button asChild variant="link" size="sm">
<Link
href="#"
className="link intent-info variant-ghost text-sm"
>
Forgot your Password ?
</Link>
</Button>
</div>
<Input
type="password"
required
name="pwd"
id="pwd"
className="input sz-md variant-mixed"
/>
</div>
<Button className="w-full">Sign In</Button>
</div>
<div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<hr className="border-dashed" />
<span className="text-muted-foreground text-xs">
Or continue With
</span>
<hr className="border-dashed" />
</div>
<div className="grid grid-cols-2 gap-3">
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
<path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
<path
fill="#00adef"
d="M121.663 256.002H0V134.336h121.663z"
></path>
<path
fill="#fbbc09"
d="M256 256.002H134.335V134.336H256z"
></path>
</svg>
<span>Microsoft</span>
</Button>
</div>
</div>
<div className="p-3">
<p className="text-accent-foreground text-center text-sm">
Don't have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Create account</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

90
src/app/[locale]/preview/logo-cloud/one/page.tsx Normal file
View File

@ -0,0 +1,90 @@
export default function LogoCloud() {
return (
<section className="bg-background py-16">
<div className="mx-auto max-w-5xl px-6">
<h2 className="text-center text-lg font-medium">
Your favorite companies are our partners.
</h2>
<div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
<img
className="h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
<img
className="h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
alt="Tailwind CSS Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/vercel.svg"
alt="Vercel Logo"
height="20"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/zapier.svg"
alt="Zapier Logo"
height="20"
width="auto"
/>
</div>
</div>
</section>
);
}

107
src/app/[locale]/preview/logo-cloud/three/page.tsx Normal file
View File

@ -0,0 +1,107 @@
import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
export default function LogoCloud() {
return (
<section className="bg-background overflow-hidden py-16">
<div className="group relative m-auto max-w-7xl px-6">
<div className="flex flex-col items-center md:flex-row">
<div className="md:max-w-44 md:border-r md:pr-6">
<p className="text-end text-sm">Powering the best teams</p>
</div>
<div className="relative py-6 md:w-[calc(100%-11rem)]">
<InfiniteSlider speedOnHover={20} speed={40} gap={112}>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</InfiniteSlider>
<div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
<div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
<ProgressiveBlur
className="pointer-events-none absolute left-0 top-0 h-full w-20"
direction="left"
blurIntensity={1}
/>
<ProgressiveBlur
className="pointer-events-none absolute right-0 top-0 h-full w-20"
direction="right"
blurIntensity={1}
/>
</div>
</div>
</div>
</section>
);
}

97
src/app/[locale]/preview/logo-cloud/two/page.tsx Normal file
View File

@ -0,0 +1,97 @@
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
export default function LogoCloudTwo() {
return (
<section className="bg-background py-16">
<div className="group relative m-auto max-w-5xl px-6">
<div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
<Link
href="/"
className="block text-sm duration-150 hover:opacity-75"
>
<span> Meet Our Customers</span>
<ChevronRight className="ml-1 inline-block size-3" />
</Link>
</div>
<div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
alt="Lemon Squeezy Logo"
height="20"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/laravel.svg"
alt="Laravel Logo"
height="16"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/lilly.svg"
alt="Lilly Logo"
height="28"
width="auto"
/>
</div>
<div className="flex">
<img
className="mx-auto h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/openai.svg"
alt="OpenAI Logo"
height="24"
width="auto"
/>
</div>
</div>
</div>
</section>
);
}

90
src/app/[locale]/preview/pricing/five/page.tsx Normal file
View File

@ -0,0 +1,90 @@
import { Button } from '@/components/ui/button';
import { Check } from 'lucide-react';
import Link from 'next/link';
export default function Pricing() {
return (
<div className="relative py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
Start managing your company smarter today
</h2>
</div>
<div className="mt-8 md:mt-20">
<div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
<div className="grid items-center gap-12 divide-y p-12 md:grid-cols-2 md:divide-x md:divide-y-0">
<div className="pb-12 text-center md:pb-0 md:pr-12">
<h3 className="text-2xl font-semibold">Suite Enterprise</h3>
<p className="mt-2 text-lg">For your company of any size</p>
<span className="mb-6 mt-12 inline-block text-6xl font-bold">
<span className="text-4xl">$</span>234
</span>
<div className="flex justify-center">
<Button asChild size="lg">
<Link href="#">Get started</Link>
</Button>
</div>
<p className="text-muted-foreground mt-12 text-sm">
Includes : Security, Unlimited Storage, Payment, Search
engine, and all features
</p>
</div>
<div className="relative">
<ul role="list" className="space-y-4">
{[
'First premium advantage',
'Second advantage weekly',
'Third advantage donate to project',
'Fourth, access to all components weekly',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
<span>{item}</span>
</li>
))}
</ul>
<p className="text-muted-foreground mt-6 text-sm">
Team can be any size, and you can add or switch members as
needed. Companies using our platform include:
</p>
<div className="mt-12 flex flex-wrap items-center justify-between gap-6">
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/column.svg"
alt="Column Logo"
height="16"
width="auto"
/>
<img
className="h-4 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/github.svg"
alt="GitHub Logo"
height="16"
width="auto"
/>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="20"
width="auto"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

99
src/app/[locale]/preview/pricing/four/page.tsx Normal file
View File

@ -0,0 +1,99 @@
import { Button } from '@/components/ui/button';
import { Check } from 'lucide-react';
import Link from 'next/link';
export default function Pricing() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-2xl space-y-6 text-center">
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
Pricing that Scales with You
</h1>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-5 md:gap-0">
<div className="rounded-(--radius) flex flex-col justify-between space-y-8 border p-6 md:col-span-2 md:my-2 md:rounded-r-none md:border-r-0 lg:p-10">
<div className="space-y-4">
<div>
<h2 className="font-medium">Free</h2>
<span className="my-3 block text-2xl font-semibold">
$0 / mo
</span>
<p className="text-muted-foreground text-sm">Per editor</p>
</div>
<Button asChild variant="outline" className="w-full">
<Link href="">Get Started</Link>
</Button>
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Basic Analytics Dashboard',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</div>
</div>
<div className="dark:bg-muted rounded-(--radius) border p-6 shadow-lg shadow-gray-950/5 md:col-span-3 lg:p-10 dark:[--color-muted:var(--color-zinc-900)]">
<div className="grid gap-6 sm:grid-cols-2">
<div className="space-y-4">
<div>
<h2 className="font-medium">Pro</h2>
<span className="my-3 block text-2xl font-semibold">
$19 / mo
</span>
<p className="text-muted-foreground text-sm">Per editor</p>
</div>
<Button asChild className="w-full">
<Link href="">Get Started</Link>
</Button>
</div>
<div>
<div className="text-sm font-medium">
Everything in free plus :
</div>
<ul className="mt-4 list-outside space-y-3 text-sm">
{[
'Everything in Free Plan',
'5GB Cloud Storage',
'Email and Chat Support',
'Access to Community Forum',
'Single User Access',
'Access to Basic Templates',
'Mobile App Access',
'1 Custom Report Per Month',
'Monthly Product Updates',
'Standard Security Features',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

143
src/app/[locale]/preview/pricing/one/page.tsx Normal file
View File

@ -0,0 +1,143 @@
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Check } from 'lucide-react';
export default function Pricing() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="mx-auto max-w-2xl space-y-6 text-center">
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
Pricing that Scales with You
</h1>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
<Card className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Free</CardTitle>
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
<CardDescription className="text-sm">Per editor</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Basic Analytics Dashboard',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter className="mt-auto">
<Button asChild variant="outline" className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</Card>
<Card className="relative">
<span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
Popular
</span>
<div className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Pro</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$19 / mo
</span>
<CardDescription className="text-sm">
Per editor
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Free Plan',
'5GB Cloud Storage',
'Email and Chat Support',
'Access to Community Forum',
'Single User Access',
'Access to Basic Templates',
'Mobile App Access',
'1 Custom Report Per Month',
'Monthly Product Updates',
'Standard Security Features',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter>
<Button asChild className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</div>
</Card>
<Card className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Startup</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$29 / mo
</span>
<CardDescription className="text-sm">Per editor</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Pro Plan',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter className="mt-auto">
<Button asChild variant="outline" className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</Card>
</div>
</div>
</section>
);
}

138
src/app/[locale]/preview/pricing/three/page.tsx Normal file
View File

@ -0,0 +1,138 @@
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Check } from 'lucide-react';
export default function Pricing() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="mx-auto max-w-2xl space-y-6 text-center">
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
Pricing that Scales with You
</h1>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
<Card>
<CardHeader>
<CardTitle className="font-medium">Free</CardTitle>
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
<CardDescription className="text-sm">Per editor</CardDescription>
<Button asChild variant="outline" className="mt-4 w-full">
<Link href="">Get Started</Link>
</Button>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Basic Analytics Dashboard',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
</Card>
<Card className="relative">
<span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
Popular
</span>
<CardHeader>
<CardTitle className="font-medium">Pro</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$19 / mo
</span>
<CardDescription className="text-sm">Per editor</CardDescription>
<Button asChild className="mt-4 w-full">
<Link href="">Get Started</Link>
</Button>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Free Plan',
'5GB Cloud Storage',
'Email and Chat Support',
'Access to Community Forum',
'Single User Access',
'Access to Basic Templates',
'Mobile App Access',
'1 Custom Report Per Month',
'Monthly Product Updates',
'Standard Security Features',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
</Card>
<Card className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Startup</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$29 / mo
</span>
<CardDescription className="text-sm">Per editor</CardDescription>
<Button asChild variant="outline" className="mt-4 w-full">
<Link href="">Get Started</Link>
</Button>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Pro Plan',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
</Card>
</div>
</div>
</section>
);
}

143
src/app/[locale]/preview/pricing/two/page.tsx Normal file
View File

@ -0,0 +1,143 @@
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Check } from 'lucide-react';
export default function Pricing() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="mx-auto max-w-2xl space-y-6 text-center">
<h1 className="text-center text-4xl font-semibold lg:text-5xl">
Pricing that Scales with You
</h1>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="mt-8 grid gap-6 [--color-card:var(--color-muted)] *:border-none *:shadow-none md:mt-20 md:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
<Card className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Free</CardTitle>
<span className="my-3 block text-2xl font-semibold">$0 / mo</span>
<CardDescription className="text-sm">Per editor</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Basic Analytics Dashboard',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter className="mt-auto">
<Button asChild variant="outline" className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</Card>
<Card className="relative">
<span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
Popular
</span>
<div className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Pro</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$19 / mo
</span>
<CardDescription className="text-sm">
Per editor
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Free Plan',
'5GB Cloud Storage',
'Email and Chat Support',
'Access to Community Forum',
'Single User Access',
'Access to Basic Templates',
'Mobile App Access',
'1 Custom Report Per Month',
'Monthly Product Updates',
'Standard Security Features',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter>
<Button asChild className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</div>
</Card>
<Card className="flex flex-col">
<CardHeader>
<CardTitle className="font-medium">Startup</CardTitle>
<span className="my-3 block text-2xl font-semibold">
$29 / mo
</span>
<CardDescription className="text-sm">Per editor</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<hr className="border-dashed" />
<ul className="list-outside space-y-3 text-sm">
{[
'Everything in Pro Plan',
'5GB Cloud Storage',
'Email and Chat Support',
].map((item, index) => (
<li key={index} className="flex items-center gap-2">
<Check className="size-3" />
{item}
</li>
))}
</ul>
</CardContent>
<CardFooter className="mt-auto">
<Button asChild variant="outline" className="w-full">
<Link href="">Get Started</Link>
</Button>
</CardFooter>
</Card>
</div>
</div>
</section>
);
}

127
src/app/[locale]/preview/sign-up/one/page.tsx Normal file
View File

@ -0,0 +1,127 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-card m-auto h-fit w-full max-w-sm rounded-[calc(var(--radius)+.125rem)] border p-0.5 shadow-md dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="p-8 pb-6">
<div>
<Link href="/" aria-label="go home">
<Logo />
</Link>
<h1 className="text-title mb-1 mt-4 text-xl font-semibold">
Create a Tailus UI Account
</h1>
<p className="text-sm">Welcome! Create an account to get started</p>
</div>
<div className="mt-6 grid grid-cols-2 gap-3">
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
<path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
<path
fill="#00adef"
d="M121.663 256.002H0V134.336h121.663z"
></path>
<path
fill="#fbbc09"
d="M256 256.002H134.335V134.336H256z"
></path>
</svg>
<span>Microsoft</span>
</Button>
</div>
<hr className="my-4 border-dashed" />
<div className="space-y-5">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="firstname" className="block text-sm">
Firstname
</Label>
<Input type="text" required name="firstname" id="firstname" />
</div>
<div className="space-y-2">
<Label htmlFor="lastname" className="block text-sm">
Lastname
</Label>
<Input type="text" required name="lastname" id="lastname" />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Username
</Label>
<Input type="email" required name="email" id="email" />
</div>
<div className="space-y-2">
<Label htmlFor="pwd" className="text-title text-sm">
Password
</Label>
<Input
type="password"
required
name="pwd"
id="pwd"
className="input sz-md variant-mixed"
/>
</div>
<Button className="w-full">Continue</Button>
</div>
</div>
<div className="bg-muted rounded-(--radius) border p-3">
<p className="text-accent-foreground text-center text-sm">
Have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Sign In</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

80
src/app/[locale]/preview/sign-up/three/page.tsx Normal file
View File

@ -0,0 +1,80 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form action="" className="max-w-92 m-auto h-fit w-full">
<div className="p-6">
<div>
<Link href="/" aria-label="go home">
<Logo />
</Link>
<h1 className="mb-1 mt-4 text-xl font-semibold">
Create a Tailus UI Account
</h1>
<p>Welcome! Create an account to get started</p>
</div>
<div className="mt-6">
<Button type="button" variant="outline" className="w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
</div>
<div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<hr className="border-dashed" />
<span className="text-muted-foreground text-xs">
Or continue With
</span>
<hr className="border-dashed" />
</div>
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Email
</Label>
<Input type="email" required name="email" id="email" />
</div>
<Button className="w-full">Continue</Button>
</div>
</div>
<p className="text-accent-foreground text-center text-sm">
Have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Sign In</Link>
</Button>
</p>
</form>
</section>
);
}

143
src/app/[locale]/preview/sign-up/two/page.tsx Normal file
View File

@ -0,0 +1,143 @@
import { Logo } from '@/components/layout/logo';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Link from 'next/link';
export default function LoginPage() {
return (
<section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
<form
action=""
className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
>
<div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
<div className="text-center">
<Link href="/" aria-label="go home" className="mx-auto block w-fit">
<Logo />
</Link>
<h1 className="text-title mb-1 mt-4 text-xl font-semibold">
Create a Tailus UI Account
</h1>
<p className="text-sm">Welcome! Create an account to get started</p>
</div>
<div className="mt-6 space-y-6">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="firstname" className="block text-sm">
Firstname
</Label>
<Input type="text" required name="firstname" id="firstname" />
</div>
<div className="space-y-2">
<Label htmlFor="lastname" className="block text-sm">
Lastname
</Label>
<Input type="text" required name="lastname" id="lastname" />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="email" className="block text-sm">
Username
</Label>
<Input type="email" required name="email" id="email" />
</div>
<div className="space-y-0.5">
<div className="flex items-center justify-between">
<Label htmlFor="pwd" className="text-title text-sm">
Password
</Label>
<Button asChild variant="link" size="sm">
<Link
href="#"
className="link intent-info variant-ghost text-sm"
>
Forgot your Password ?
</Link>
</Button>
</div>
<Input
type="password"
required
name="pwd"
id="pwd"
className="input sz-md variant-mixed"
/>
</div>
<Button className="w-full">Sign In</Button>
</div>
<div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<hr className="border-dashed" />
<span className="text-muted-foreground text-xs">
Or continue With
</span>
<hr className="border-dashed" />
</div>
<div className="grid grid-cols-2 gap-3">
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="0.98em"
height="1em"
viewBox="0 0 256 262"
>
<path
fill="#4285f4"
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
></path>
<path
fill="#34a853"
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
></path>
<path
fill="#fbbc05"
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
></path>
<path
fill="#eb4335"
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
></path>
</svg>
<span>Google</span>
</Button>
<Button type="button" variant="outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
<path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
<path
fill="#00adef"
d="M121.663 256.002H0V134.336h121.663z"
></path>
<path
fill="#fbbc09"
d="M256 256.002H134.335V134.336H256z"
></path>
</svg>
<span>Microsoft</span>
</Button>
</div>
</div>
<div className="p-3">
<p className="text-accent-foreground text-center text-sm">
Have an account ?
<Button asChild variant="link" className="px-2">
<Link href="#">Sign In</Link>
</Button>
</p>
</div>
</form>
</section>
);
}

61
src/app/[locale]/preview/stats/four/page.tsx Normal file
View File

@ -0,0 +1,61 @@
export default function StatsSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
<div className="relative z-10 max-w-xl space-y-6">
<h2 className="text-4xl font-medium lg:text-5xl">
The Gemini ecosystem brings together our models.
</h2>
<p>
Gemini is evolving to be more than just the models.{' '}
<span className="font-medium">It supports an entire ecosystem</span>{' '}
— from products innovate.
</p>
</div>
<div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
<div>
<p>
It supports an entire ecosystem — from products to the APIs and
platforms helping developers and businesses innovate
</p>
<div className="mb-12 mt-12 grid grid-cols-2 gap-2 md:mb-0">
<div className="space-y-4">
<div className="bg-linear-to-r from-zinc-950 to-zinc-600 bg-clip-text text-5xl font-bold text-transparent dark:from-white dark:to-zinc-800">
+1200
</div>
<p>Stars on GitHub</p>
</div>
<div className="space-y-4">
<div className="bg-linear-to-r from-zinc-950 to-zinc-600 bg-clip-text text-5xl font-bold text-transparent dark:from-white dark:to-zinc-800">
+500
</div>
<p>Powered Apps</p>
</div>
</div>
</div>
<div className="relative">
<blockquote className="border-l-4 pl-4">
<p>
Using TailsUI has been like unlocking a secret design
superpower. It's the perfect fusion of simplicity and
versatility, enabling us to create UIs that are as stunning as
they are user-friendly.
</p>
<div className="mt-6 space-y-3">
<cite className="block font-medium">John Doe, CEO</cite>
<img
className="h-5 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
</div>
</blockquote>
</div>
</div>
</div>
</section>
);
}

33
src/app/[locale]/preview/stats/one/page.tsx Normal file
View File

@ -0,0 +1,33 @@
export default function StatsSection() {
return (
<section className="py-12 md:py-20">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
<h2 className="text-4xl font-medium lg:text-5xl">
Tailus UI in numbers
</h2>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-12 divide-y *:text-center md:grid-cols-3 md:gap-2 md:divide-x md:divide-y-0">
<div className="space-y-4">
<div className="text-5xl font-bold">+1200</div>
<p>Stars on GitHub</p>
</div>
<div className="space-y-4">
<div className="text-5xl font-bold">22 Million</div>
<p>Active Users</p>
</div>
<div className="space-y-4">
<div className="text-5xl font-bold">+500</div>
<p>Powered Apps</p>
</div>
</div>
</div>
</section>
);
}

33
src/app/[locale]/preview/stats/three/page.tsx Normal file
View File

@ -0,0 +1,33 @@
export default function StatsSection() {
return (
<section className="py-12 md:py-20">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
<h2 className="text-4xl font-semibold lg:text-5xl">
Tailus UI in numbers
</h2>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-0.5 *:text-center md:grid-cols-3">
<div className="rounded-(--radius) space-y-4 border py-12">
<div className="text-5xl font-bold">+1200</div>
<p>Stars on GitHub</p>
</div>
<div className="rounded-(--radius) space-y-4 border py-12">
<div className="text-5xl font-bold">56%</div>
<p>Conversion rate</p>
</div>
<div className="rounded-(--radius) space-y-4 border py-12">
<div className="text-5xl font-bold">+500</div>
<p>Powered Apps</p>
</div>
</div>
</div>
</section>
);
}

33
src/app/[locale]/preview/stats/two/page.tsx Normal file
View File

@ -0,0 +1,33 @@
export default function StatsSection() {
return (
<section className="py-12 md:py-20">
<div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
<h2 className="text-4xl font-semibold lg:text-5xl">
Tailus UI in numbers
</h2>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-0.5 *:text-center md:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
<div className="bg-muted rounded-(--radius) space-y-4 py-12">
<div className="text-5xl font-bold">+1200</div>
<p>Stars on GitHub</p>
</div>
<div className="bg-muted rounded-(--radius) space-y-4 py-12">
<div className="text-5xl font-bold">56%</div>
<p>Conversion rate</p>
</div>
<div className="bg-muted rounded-(--radius) space-y-4 py-12">
<div className="text-5xl font-bold">+500</div>
<p>Powered Apps</p>
</div>
</div>
</div>
</section>
);
}

112
src/app/[locale]/preview/team/one/page.tsx Normal file
View File

@ -0,0 +1,112 @@
const members = [
{
name: 'Méschac Irung',
role: 'Creator',
avatar: 'https://avatars.githubusercontent.com/u/47919550?v=4',
},
{
name: 'Théo Balick',
role: 'Frontend Dev',
avatar: 'https://avatars.githubusercontent.com/u/68236786?v=4',
},
{
name: 'Glodie Lukose',
role: 'Frontend Dev',
avatar: 'https://avatars.githubusercontent.com/u/99137927?v=4',
},
{
name: 'Bernard Ngandu',
role: 'Backend Dev',
avatar: 'https://avatars.githubusercontent.com/u/31113941?v=4',
},
];
export default function TeamSection() {
return (
<section className="py-12 md:py-32">
<div className="mx-auto max-w-3xl px-8 lg:px-0">
<h2 className="mb-8 text-4xl font-bold md:mb-16 lg:text-5xl">
Our team
</h2>
<div>
<h3 className="mb-6 text-lg font-medium">Leadership</h3>
<div className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4">
{members.map((member, index) => (
<div key={index}>
<div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
<img
className="aspect-square rounded-full object-cover"
src={member.avatar}
alt={member.name}
height="460"
width="460"
loading="lazy"
/>
</div>
<span className="mt-2 block text-sm">{member.name}</span>
<span className="text-muted-foreground block text-xs">
{member.role}
</span>
</div>
))}
</div>
</div>
<div className="mt-6">
<h3 className="mb-6 text-lg font-medium">Engineering</h3>
<div
data-rounded="full"
className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4"
>
{members.map((member, index) => (
<div key={index}>
<div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
<img
className="aspect-square rounded-full object-cover"
src={member.avatar}
alt={member.name}
height="460"
width="460"
loading="lazy"
/>
</div>
<span className="mt-2 block text-sm">{member.name}</span>
<span className="text-muted-foreground block text-xs">
{member.role}
</span>
</div>
))}
</div>
</div>
<div className="mt-6">
<h3 className="mb-6 text-lg font-medium">Marketing</h3>
<div
data-rounded="full"
className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4"
>
{members.map((member, index) => (
<div key={index}>
<div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
<img
className="aspect-square rounded-full object-cover"
src={member.avatar}
alt={member.name}
height="460"
width="460"
loading="lazy"
/>
</div>
<span className="mt-2 block text-sm">{member.name}</span>
<span className="text-muted-foreground block text-xs">
{member.role}
</span>
</div>
))}
</div>
</div>
</div>
</section>
);
}

99
src/app/[locale]/preview/team/two/page.tsx Normal file
View File

@ -0,0 +1,99 @@
import Link from 'next/link';
const members = [
{
name: 'Liam Brown',
role: 'Founder - CEO',
avatar: 'https://alt.tailus.io/images/team/member-one.webp',
link: '#',
},
{
name: 'Elijah Jones',
role: 'Co-Founder - CTO',
avatar: 'https://alt.tailus.io/images/team/member-two.webp',
link: '#',
},
{
name: 'Isabella Garcia',
role: 'Sales Manager',
avatar: 'https://alt.tailus.io/images/team/member-three.webp',
link: '#',
},
{
name: 'Henry Lee',
role: 'UX Engeneer',
avatar: 'https://alt.tailus.io/images/team/member-four.webp',
link: '#',
},
{
name: 'Ava Williams',
role: 'Interaction Designer',
avatar: 'https://alt.tailus.io/images/team/member-five.webp',
link: '#',
},
{
name: 'Olivia Miller',
role: 'Visual Designer',
avatar: 'https://alt.tailus.io/images/team/member-six.webp',
link: '#',
},
];
export default function TeamSection() {
return (
<section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
<div className="mx-auto max-w-5xl border-t px-6">
<span className="text-caption -ml-6 -mt-3.5 block w-max bg-gray-50 px-6 dark:bg-gray-950">
Team
</span>
<div className="mt-12 gap-4 sm:grid sm:grid-cols-2 md:mt-24">
<div className="sm:w-2/5">
<h2 className="text-3xl font-bold sm:text-4xl">Our dream team</h2>
</div>
<div className="mt-6 sm:mt-0">
<p>
During the working process, we perform regular fitting with the
client because he is the only person who can feel whether a new
suit fits or not.
</p>
</div>
</div>
<div className="mt-12 md:mt-24">
<div className="grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
{members.map((member, index) => (
<div key={index} className="group overflow-hidden">
<img
className="h-96 w-full rounded-md object-cover object-top grayscale transition-all duration-500 hover:grayscale-0 group-hover:h-[22.5rem] group-hover:rounded-xl"
src={member.avatar}
alt="team member"
width="826"
height="1239"
/>
<div className="px-2 pt-2 sm:pb-0 sm:pt-4">
<div className="flex justify-between">
<h3 className="text-title text-base font-medium transition-all duration-500 group-hover:tracking-wider">
{member.name}
</h3>
<span className="text-xs">_0{index + 1}</span>
</div>
<div className="mt-1 flex items-center justify-between">
<span className="text-muted-foreground inline-block translate-y-6 text-sm opacity-0 transition duration-300 group-hover:translate-y-0 group-hover:opacity-100">
{member.role}
</span>
<Link
href={member.link}
className="group-hover:text-primary-600 dark:group-hover:text-primary-400 inline-block translate-y-8 text-sm tracking-wide opacity-0 transition-all duration-500 hover:underline group-hover:translate-y-0 group-hover:opacity-100"
>
{' '}
Linktree
</Link>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</section>
);
}

167
src/app/[locale]/preview/testimonials/five/page.tsx Normal file
View File

@ -0,0 +1,167 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent } from '@/components/ui/card';
type Testimonial = {
name: string;
role: string;
image: string;
quote: string;
};
const testimonials: Testimonial[] = [
{
name: 'Jonathan Yombo',
role: 'Software Engineer',
image: 'https://randomuser.me/api/portraits/men/1.jpg',
quote:
'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
},
{
name: 'Yves Kalume',
role: 'GDE - Android',
image: 'https://randomuser.me/api/portraits/men/6.jpg',
quote:
'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
},
{
name: 'Yucel Faruksahan',
role: 'Tailkits Creator',
image: 'https://randomuser.me/api/portraits/men/7.jpg',
quote:
'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
},
{
name: 'Anonymous author',
role: 'Doing something',
image: 'https://randomuser.me/api/portraits/men/8.jpg',
quote:
'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
},
{
name: 'Shekinah Tshiokufila',
role: 'Senior Software Engineer',
image: 'https://randomuser.me/api/portraits/men/4.jpg',
quote:
'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
},
{
name: 'Oketa Fred',
role: 'Fullstack Developer',
image: 'https://randomuser.me/api/portraits/men/2.jpg',
quote:
'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
},
{
name: 'Zeki',
role: 'Founder of ChatExtend',
image: 'https://randomuser.me/api/portraits/men/5.jpg',
quote:
"Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
},
{
name: 'Joseph Kitheka',
role: 'Fullstack Developer',
image: 'https://randomuser.me/api/portraits/men/9.jpg',
quote:
'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
},
{
name: 'Khatab Wedaa',
role: 'MerakiUI Creator',
image: 'https://randomuser.me/api/portraits/men/10.jpg',
quote:
"Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
},
{
name: 'Rodrigo Aguilar',
role: 'TailwindAwesome Creator',
image: 'https://randomuser.me/api/portraits/men/11.jpg',
quote:
'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
},
{
name: 'Eric Ampire',
role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
image: 'https://randomuser.me/api/portraits/men/12.jpg',
quote:
'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
},
{
name: 'Roland Tubonge',
role: 'Software Engineer',
image: 'https://randomuser.me/api/portraits/men/13.jpg',
quote:
'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
},
];
const chunkArray = (
array: Testimonial[],
chunkSize: number
): Testimonial[][] => {
const result: Testimonial[][] = [];
for (let i = 0; i < array.length; i += chunkSize) {
result.push(array.slice(i, i + chunkSize));
}
return result;
};
const testimonialChunks = chunkArray(
testimonials,
Math.ceil(testimonials.length / 3)
);
export default function WallOfLoveSection() {
return (
<section>
<div className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center">
<h2 className="text-title text-3xl font-semibold">
Loved by the Community
</h2>
<p className="text-body mt-6">
Harum quae dolore orrupti aut temporibus ariatur.
</p>
</div>
<div className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
{testimonialChunks.map((chunk, chunkIndex) => (
<div key={chunkIndex} className="space-y-3">
{chunk.map(({ name, role, quote, image }, index) => (
<Card key={index}>
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
<Avatar className="size-9">
<AvatarImage
alt={name}
src={image}
loading="lazy"
width="120"
height="120"
/>
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div>
<h3 className="font-medium">{name}</h3>
<span className="text-muted-foreground block text-sm tracking-wide">
{role}
</span>
<blockquote className="mt-3">
<p className="text-gray-700 dark:text-gray-300">
{quote}
</p>
</blockquote>
</div>
</CardContent>
</Card>
))}
</div>
))}
</div>
</div>
</div>
</section>
);
}

39
src/app/[locale]/preview/testimonials/four/page.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function TestimonialsSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-2xl text-center">
<blockquote>
<p className="text-lg font-medium sm:text-xl md:text-3xl">
Using TailsUI has been like unlocking a secret design superpower.
It's the perfect fusion of simplicity and versatility, enabling us
to create UIs that are as stunning as they are user-friendly.
</p>
<div className="mt-12 flex items-center justify-center gap-6">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/shekinah.webp"
alt="Shekinah Tshiokufila"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div className="space-y-1 border-l pl-6">
<cite className="font-medium">John Doe</cite>
<span className="text-muted-foreground block text-sm">
CEO, Nvidia
</span>
</div>
</div>
</blockquote>
</div>
</div>
</section>
);
}

158
src/app/[locale]/preview/testimonials/one/page.tsx Normal file
View File

@ -0,0 +1,158 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function Testimonials() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
<h2 className="text-4xl font-medium lg:text-5xl">
Build by makers, loved by thousand developers
</h2>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2">
<Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
<CardHeader>
<img
className="h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="24"
width="auto"
/>
</CardHeader>
<CardContent>
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p className="text-xl font-medium">
Tailus has transformed the way I develop web applications.
Their extensive collection of UI components, blocks, and
templates has significantly accelerated my workflow. The
flexibility to customize every aspect allows me to create
unique user experiences. Tailus is a game-changer for modern
web development
</p>
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/shekinah.webp"
alt="Shekinah Tshiokufila"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">
Shekinah Tshiokufila
</cite>
<span className="text-muted-foreground block text-sm">
Software Ingineer
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card className="md:col-span-2">
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p className="text-xl font-medium">
Tailus is really extraordinary and very practical, no need to
break your head. A real gold mine.
</p>
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/jonathan.webp"
alt="Jonathan Yombo"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>JY</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">Jonathan Yombo</cite>
<span className="text-muted-foreground block text-sm">
Software Ingineer
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card>
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p>
Great work on tailfolio template. This is one of the best
personal website that I have seen so far!
</p>
<div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/yucel.webp"
alt="Yucel Faruksahan"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>YF</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">
Yucel Faruksahan
</cite>
<span className="text-muted-foreground block text-sm">
Creator, Tailkits
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card className="card variant-mixed">
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p>
Great work on tailfolio template. This is one of the best
personal website that I have seen so far!
</p>
<div className="grid grid-cols-[auto_1fr] gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/rodrigo.webp"
alt="Rodrigo Aguilar"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>YF</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium">Rodrigo Aguilar</p>
<span className="text-muted-foreground block text-sm">
Creator, TailwindAwesome
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
</div>
</div>
</section>
);
}

170
src/app/[locale]/preview/testimonials/six/page.tsx Normal file
View File

@ -0,0 +1,170 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent } from '@/components/ui/card';
type Testimonial = {
name: string;
role: string;
image: string;
quote: string;
};
const testimonials: Testimonial[] = [
{
name: 'Jonathan Yombo',
role: 'Software Engineer',
image: 'https://randomuser.me/api/portraits/men/1.jpg',
quote:
'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
},
{
name: 'Yves Kalume',
role: 'GDE - Android',
image: 'https://randomuser.me/api/portraits/men/6.jpg',
quote:
'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
},
{
name: 'Yucel Faruksahan',
role: 'Tailkits Creator',
image: 'https://randomuser.me/api/portraits/men/7.jpg',
quote:
'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
},
{
name: 'Anonymous author',
role: 'Doing something',
image: 'https://randomuser.me/api/portraits/men/8.jpg',
quote:
'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
},
{
name: 'Shekinah Tshiokufila',
role: 'Senior Software Engineer',
image: 'https://randomuser.me/api/portraits/men/4.jpg',
quote:
'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
},
{
name: 'Oketa Fred',
role: 'Fullstack Developer',
image: 'https://randomuser.me/api/portraits/men/2.jpg',
quote:
'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
},
{
name: 'Zeki',
role: 'Founder of ChatExtend',
image: 'https://randomuser.me/api/portraits/men/5.jpg',
quote:
"Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
},
{
name: 'Joseph Kitheka',
role: 'Fullstack Developer',
image: 'https://randomuser.me/api/portraits/men/9.jpg',
quote:
'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
},
{
name: 'Khatab Wedaa',
role: 'MerakiUI Creator',
image: 'https://randomuser.me/api/portraits/men/10.jpg',
quote:
"Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
},
{
name: 'Rodrigo Aguilar',
role: 'TailwindAwesome Creator',
image: 'https://randomuser.me/api/portraits/men/11.jpg',
quote:
'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
},
{
name: 'Eric Ampire',
role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
image: 'https://randomuser.me/api/portraits/men/12.jpg',
quote:
'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
},
{
name: 'Roland Tubonge',
role: 'Software Engineer',
image: 'https://randomuser.me/api/portraits/men/13.jpg',
quote:
'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
},
];
const chunkArray = (
array: Testimonial[],
chunkSize: number
): Testimonial[][] => {
const result: Testimonial[][] = [];
for (let i = 0; i < array.length; i += chunkSize) {
result.push(array.slice(i, i + chunkSize));
}
return result;
};
const testimonialChunks = chunkArray(
testimonials,
Math.ceil(testimonials.length / 3)
);
export default function WallOfLoveSection() {
return (
<section>
<div className="py-16 md:py-32">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center">
<h2 className="text-title text-3xl font-semibold">
Loved by the Community
</h2>
<p className="text-body mt-6">
Harum quae dolore orrupti aut temporibus ariatur.
</p>
</div>
<div className="mt-8 grid gap-3 [--color-card:var(--color-muted)] sm:grid-cols-2 md:mt-12 lg:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
{testimonialChunks.map((chunk, chunkIndex) => (
<div
key={chunkIndex}
className="space-y-3 *:border-none *:shadow-none"
>
{chunk.map(({ name, role, quote, image }, index) => (
<Card key={index}>
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
<Avatar className="size-9">
<AvatarImage
alt={name}
src={image}
loading="lazy"
width="120"
height="120"
/>
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div>
<h3 className="font-medium">{name}</h3>
<span className="text-muted-foreground block text-sm tracking-wide">
{role}
</span>
<blockquote className="mt-3">
<p className="text-gray-700 dark:text-gray-300">
{quote}
</p>
</blockquote>
</div>
</CardContent>
</Card>
))}
</div>
))}
</div>
</div>
</div>
</section>
);
}

33
src/app/[locale]/preview/testimonials/three/page.tsx Normal file
View File

@ -0,0 +1,33 @@
export default function TestimonialsSection() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-2xl">
<blockquote>
<p className="text-lg font-semibold sm:text-xl md:text-3xl">
Using TailsUI has been like unlocking a secret design superpower.
It's the perfect fusion of simplicity and versatility, enabling us
to create UIs that are as stunning as they are user-friendly.
</p>
<div className="mt-12 flex items-center gap-6">
<img
className="h-7 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nvidia.svg"
alt="Nvidia Logo"
height="20"
width="auto"
/>
<div className="space-y-1 border-l pl-6">
<cite className="font-medium">John Doe</cite>
<span className="text-muted-foreground block text-sm">
CEO, Nvidia
</span>
</div>
</div>
</blockquote>
</div>
</div>
</section>
);
}

158
src/app/[locale]/preview/testimonials/two/page.tsx Normal file
View File

@ -0,0 +1,158 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
export default function Testimonials() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
<div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
<h2 className="text-4xl font-medium lg:text-5xl">
Build by makers, loved by thousand developers
</h2>
<p>
Gemini is evolving to be more than just the models. It supports an
entire to the APIs and platforms helping developers and businesses
innovate.
</p>
</div>
<div className="grid gap-4 [--color-card:var(--color-muted)] *:border-none *:shadow-none sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2 dark:[--color-muted:var(--color-zinc-900)]">
<Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
<CardHeader>
<img
className="h-6 w-fit dark:invert"
src="https://html.tailus.io/blocks/customers/nike.svg"
alt="Nike Logo"
height="24"
width="auto"
/>
</CardHeader>
<CardContent>
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p className="text-xl font-medium">
Tailus has transformed the way I develop web applications.
Their extensive collection of UI components, blocks, and
templates has significantly accelerated my workflow. The
flexibility to customize every aspect allows me to create
unique user experiences. Tailus is a game-changer for modern
web development
</p>
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/shekinah.webp"
alt="Shekinah Tshiokufila"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">
Shekinah Tshiokufila
</cite>
<span className="text-muted-foreground block text-sm">
Software Ingineer
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card className="md:col-span-2">
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p className="text-xl font-medium">
Tailus is really extraordinary and very practical, no need to
break your head. A real gold mine.
</p>
<div className="grid grid-cols-[auto_1fr] items-center gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/jonathan.webp"
alt="Jonathan Yombo"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>JY</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">Jonathan Yombo</cite>
<span className="text-muted-foreground block text-sm">
Software Ingineer
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card>
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p>
Great work on tailfolio template. This is one of the best
personal website that I have seen so far!
</p>
<div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/yucel.webp"
alt="Yucel Faruksahan"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>YF</AvatarFallback>
</Avatar>
<div>
<cite className="text-sm font-medium">
Yucel Faruksahan
</cite>
<span className="text-muted-foreground block text-sm">
Creator, Tailkits
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
<Card className="card variant-mixed">
<CardContent className="h-full pt-6">
<blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
<p>
Great work on tailfolio template. This is one of the best
personal website that I have seen so far!
</p>
<div className="grid grid-cols-[auto_1fr] gap-3">
<Avatar className="size-12">
<AvatarImage
src="https://tailus.io/images/reviews/rodrigo.webp"
alt="Rodrigo Aguilar"
height="400"
width="400"
loading="lazy"
/>
<AvatarFallback>YF</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-medium">Rodrigo Aguilar</p>
<span className="text-muted-foreground block text-sm">
Creator, TailwindAwesome
</span>
</div>
</div>
</blockquote>
</CardContent>
</Card>
</div>
</div>
</section>
);
}