feat: add landing page blocks and block pages
This commit is contained in:
javayhu
parent
416e184a59
commit
f2d616cd2f
@ -158,7 +158,10 @@
|
||||
"title": "Features Blocks"
|
||||
},
|
||||
"faq": {
|
||||
"title": "Faq Blocks"
|
||||
"title": "FAQ Blocks"
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "Testimonials Blocks"
|
||||
},
|
||||
"stats": {
|
||||
"title": "Stats Blocks"
|
||||
|
||||
@ -155,7 +155,10 @@
|
||||
"title": "Features组件"
|
||||
},
|
||||
"faq": {
|
||||
"title": "Faq组件"
|
||||
"title": "FAQ组件"
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "Testimonials组件"
|
||||
},
|
||||
"stats": {
|
||||
"title": "Stats组件"
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import CallToAction from "@/components/nsui/call-to-action";
|
||||
import ContentSection from "@/components/nsui/content-2";
|
||||
import FAQs from "@/components/nsui/faqs";
|
||||
import FeaturesSection from "@/components/nsui/features-8";
|
||||
import HeroSection from "@/components/nsui/hero-section";
|
||||
import LogoCloud from "@/components/nsui/logo-cloud";
|
||||
import Pricing from "@/components/nsui/pricing";
|
||||
import StatsSection from "@/components/nsui/stats";
|
||||
import WallOfLoveSection from "@/components/nsui/testimonials";
|
||||
import CallToAction3 from "@/components/blocks/call-to-action/call-to-action-3";
|
||||
import Content2 from "@/components/blocks/content/content-2";
|
||||
import FAQs from "@/components/blocks/faq/faqs";
|
||||
import FeaturesSection from "@/components/blocks/features/features-8";
|
||||
import HeroSection from "@/components/blocks/hero/hero-section";
|
||||
import LogoCloud from "@/components/blocks/logo-cloud/logo-cloud";
|
||||
import Pricing from "@/components/blocks/pricing/pricing";
|
||||
import StatsSection from "@/components/blocks/stats/stats";
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
|
||||
interface HomePageProps {
|
||||
|
||||
21
src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx
Normal file
21
src/app/[locale]/(marketing)/blocks/call-to-action/page.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import CallToAction from "@/components/blocks/call-to-action/call-to-action";
|
||||
import CallToAction2 from "@/components/blocks/call-to-action/call-to-action-2";
|
||||
import CallToAction3 from "@/components/blocks/call-to-action/call-to-action-3";
|
||||
|
||||
interface CallToActionPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function CallToActionPage(props: CallToActionPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<CallToAction />
|
||||
<CallToAction2 />
|
||||
<CallToAction3 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
17
src/app/[locale]/(marketing)/blocks/content/page.tsx
Normal file
17
src/app/[locale]/(marketing)/blocks/content/page.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import Content2 from "@/components/blocks/content/content-2";
|
||||
|
||||
interface ContentPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function ContentPage(props: ContentPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Content2 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
17
src/app/[locale]/(marketing)/blocks/faq/page.tsx
Normal file
17
src/app/[locale]/(marketing)/blocks/faq/page.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import FAQs from "@/components/blocks/faq/faqs";
|
||||
|
||||
interface FAQPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function FAQPage(props: FAQPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<FAQs />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
src/app/[locale]/(marketing)/blocks/features/page.tsx
Normal file
19
src/app/[locale]/(marketing)/blocks/features/page.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import Features2 from "@/components/blocks/features/features-2";
|
||||
import Features8 from "@/components/blocks/features/features-8";
|
||||
|
||||
interface FeaturesPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function FeaturesPage(props: FeaturesPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Features2 />
|
||||
<Features8 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,28 +1,16 @@
|
||||
import Pricing3 from "@/components/nsui/pricing3";
|
||||
import Pricing4 from "@/components/nsui/pricing4";
|
||||
import Pricing5 from "@/components/nsui/pricing5";
|
||||
import PricingComparator from "@/components/pricing-comparator";
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import HeroSection from "@/components/blocks/hero/hero-section";
|
||||
|
||||
interface PricingPageProps {
|
||||
interface HeroPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function PricingPage(props: PricingPageProps) {
|
||||
export default async function HeroPage(props: HeroPageProps) {
|
||||
const params = await props.params;
|
||||
const { locale } = params;
|
||||
const t = await getTranslations('PricingPage');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Pricing5 />
|
||||
|
||||
<Pricing4 />
|
||||
|
||||
<Pricing3 />
|
||||
|
||||
<PricingComparator />
|
||||
<HeroSection />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Pricing3 from "@/components/nsui/pricing3";
|
||||
import Pricing4 from "@/components/nsui/pricing4";
|
||||
import Pricing5 from "@/components/nsui/pricing5";
|
||||
import Pricing3 from "@/components/blocks/pricing/pricing-3";
|
||||
import Pricing4 from "@/components/blocks/pricing/pricing-4";
|
||||
import Pricing5 from "@/components/blocks/pricing/pricing-5";
|
||||
import PricingComparator from "@/components/pricing-comparator";
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
|
||||
|
||||
23
src/app/[locale]/(marketing)/blocks/stats/page.tsx
Normal file
23
src/app/[locale]/(marketing)/blocks/stats/page.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import Stats from "@/components/blocks/stats/stats";
|
||||
import Stats2 from "@/components/blocks/stats/stats-2";
|
||||
import Stats3 from "@/components/blocks/stats/stats-3";
|
||||
import Stats4 from "@/components/blocks/stats/stats-4";
|
||||
|
||||
interface StatsPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function StatsPage(props: StatsPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Stats />
|
||||
<Stats2 />
|
||||
<Stats3 />
|
||||
<Stats4 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/app/[locale]/(marketing)/blocks/testimonials/page.tsx
Normal file
25
src/app/[locale]/(marketing)/blocks/testimonials/page.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import Testimonials from "@/components/blocks/testimonials/testimonials";
|
||||
import Testimonials2 from "@/components/blocks/testimonials/testimonials-2";
|
||||
import Testimonials4 from "@/components/blocks/testimonials/testimonials-4";
|
||||
import Testimonials5 from "@/components/blocks/testimonials/testimonials-5";
|
||||
import Testimonials6 from "@/components/blocks/testimonials/testimonials-6";
|
||||
|
||||
interface TestimonialsPageProps {
|
||||
params: Promise<{ locale: string }>;
|
||||
};
|
||||
|
||||
export default async function TestimonialsPage(props: TestimonialsPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-8 flex flex-col gap-16 pb-16">
|
||||
<Testimonials />
|
||||
<Testimonials2 />
|
||||
<Testimonials4 />
|
||||
<Testimonials5 />
|
||||
<Testimonials6 />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import Pricing3 from "@/components/nsui/pricing3";
|
||||
import Pricing4 from "@/components/nsui/pricing4";
|
||||
import Pricing5 from "@/components/nsui/pricing5";
|
||||
import Pricing3 from "@/components/blocks/pricing/pricing-3";
|
||||
import Pricing4 from "@/components/blocks/pricing/pricing-4";
|
||||
import Pricing5 from "@/components/blocks/pricing/pricing-5";
|
||||
import PricingComparator from "@/components/pricing-comparator";
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
|
||||
|
||||
34
src/components/blocks/call-to-action/call-to-action-2.tsx
Normal file
34
src/components/blocks/call-to-action/call-to-action-2.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-2.json
|
||||
*/
|
||||
export default function CallToAction2() {
|
||||
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>
|
||||
)
|
||||
}
|
||||
35
src/components/blocks/call-to-action/call-to-action-3.tsx
Normal file
35
src/components/blocks/call-to-action/call-to-action-3.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Mail, SendHorizonal } from 'lucide-react'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-3.json
|
||||
*/
|
||||
export default function CallToAction3() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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-full">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
34
src/components/blocks/call-to-action/call-to-action.tsx
Normal file
34
src/components/blocks/call-to-action/call-to-action.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import Link from 'next/link'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/call-to-action
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/call-to-action-1.json
|
||||
*/
|
||||
export default function CallToAction() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
49
src/components/blocks/content/content-2.tsx
Normal file
49
src/components/blocks/content/content-2.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { Cpu, Zap } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/content
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-2.json
|
||||
*/
|
||||
export default function Content2() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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="/images/charts.webp" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
|
||||
<Image src="/images/charts-light.webp" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
51
src/components/blocks/faq/faqs.tsx
Normal file
51
src/components/blocks/faq/faqs.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
/**
|
||||
* https://nsui.irung.me/faqs
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/faqs-1.json
|
||||
*/
|
||||
export default function FAQs() {
|
||||
return (
|
||||
<section className="scroll-py-16 py-16 md:scroll-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>
|
||||
)
|
||||
}
|
||||
72
src/components/blocks/features/features-2.tsx
Normal file
72
src/components/blocks/features/features-2.tsx
Normal file
@ -0,0 +1,72 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Settings2, Sparkles, Zap } from 'lucide-react'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/features
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-2.json
|
||||
*/
|
||||
export default function Features2() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
@ -1,9 +1,9 @@
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Shield, Users } from 'lucide-react'
|
||||
|
||||
export default function FeaturesSection() {
|
||||
export default function Features8() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
|
||||
<section className="bg-gray-50 py-16 dark:bg-transparent">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="relative">
|
||||
<div className="relative z-10 grid grid-cols-6 gap-3">
|
||||
32
src/components/blocks/stats/stats-2.tsx
Normal file
32
src/components/blocks/stats/stats-2.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-2.json
|
||||
*/
|
||||
export default function Stats2() {
|
||||
return (
|
||||
<section className="py-12">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
32
src/components/blocks/stats/stats-3.tsx
Normal file
32
src/components/blocks/stats/stats-3.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-3.json
|
||||
*/
|
||||
export default function Stats3() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
46
src/components/blocks/stats/stats-4.tsx
Normal file
46
src/components/blocks/stats/stats-4.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-4.json
|
||||
*
|
||||
* 1. fix number text colors
|
||||
*/
|
||||
export default function Stats4() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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-transparent text-primary text-5xl font-bold">+1200</div>
|
||||
<p>Stars on GitHub</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-transparent text-primary text-5xl font-bold">+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>
|
||||
)
|
||||
}
|
||||
32
src/components/blocks/stats/stats.tsx
Normal file
32
src/components/blocks/stats/stats.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* https://nsui.irung.me/stats
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/stats-1.json
|
||||
*/
|
||||
export default function Stats() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
99
src/components/blocks/testimonials/testimonials-2.tsx
Normal file
99
src/components/blocks/testimonials/testimonials-2.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-2.json
|
||||
*/
|
||||
export default function Testimonials2() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
32
src/components/blocks/testimonials/testimonials-4.tsx
Normal file
32
src/components/blocks/testimonials/testimonials-4.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-4.json
|
||||
*/
|
||||
export default function Testimonials4() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
140
src/components/blocks/testimonials/testimonials-5.tsx
Normal file
140
src/components/blocks/testimonials/testimonials-5.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
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))
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-5.json
|
||||
*/
|
||||
export default function Testimonials5() {
|
||||
return (
|
||||
<section>
|
||||
<div className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
140
src/components/blocks/testimonials/testimonials-6.tsx
Normal file
140
src/components/blocks/testimonials/testimonials-6.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
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))
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-6.json
|
||||
*/
|
||||
export default function Testimonials6() {
|
||||
return (
|
||||
<section>
|
||||
<div className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
99
src/components/blocks/testimonials/testimonials.tsx
Normal file
99
src/components/blocks/testimonials/testimonials.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
|
||||
/**
|
||||
* https://nsui.irung.me/testimonials
|
||||
*
|
||||
* pnpm dlx shadcn@canary add https://nsui.irung.me/r/testimonials-1.json
|
||||
*/
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section className="py-16">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
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="/images/charts.webp" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
|
||||
<Image src="/images/charts-light.webp" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
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>
|
||||
)
|
||||
@ -1,27 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -1,135 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
94
src/components/testimonials.tsx
Normal file
94
src/components/testimonials.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -29,6 +29,7 @@ import {
|
||||
ShieldCheckIcon,
|
||||
SquareKanbanIcon,
|
||||
SquarePenIcon,
|
||||
ThumbsUpIcon,
|
||||
WandSparklesIcon
|
||||
} from 'lucide-react';
|
||||
|
||||
@ -195,6 +196,12 @@ export function getMenuLinks(t: TranslationFunction): NestedMenuItem[] {
|
||||
href: Routes.FAQBlocks,
|
||||
external: false
|
||||
},
|
||||
{
|
||||
title: t('Marketing.navbar.blocks.items.testimonials.title'),
|
||||
icon: <ThumbsUpIcon className="size-5 shrink-0" />,
|
||||
href: Routes.TestimonialsBlocks,
|
||||
external: false
|
||||
},
|
||||
{
|
||||
title: t('Marketing.navbar.blocks.items.stats.title'),
|
||||
icon: <ChartNoAxesCombinedIcon className="size-5 shrink-0" />,
|
||||
@ -269,43 +276,43 @@ export function getSocialLinks(): MenuItem[] {
|
||||
title: 'Email',
|
||||
href: 'mailto:mksaas@gmail.com',
|
||||
icon: <MailIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
href: 'https://github.com/MkSaaSHQ',
|
||||
icon: <GitHubIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
href: 'https://twitter.com/mksaas',
|
||||
icon: <TwitterIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Bluesky',
|
||||
href: 'https://bsky.app/profile/mksaas.com',
|
||||
icon: <BlueskyIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'YouTube',
|
||||
href: 'https://www.youtube.com/@MkSaaSHQ',
|
||||
icon: <YouTubeIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'LinkedIn',
|
||||
href: 'https://www.linkedin.com/company/mksaas',
|
||||
icon: <LinkedInIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Facebook',
|
||||
href: 'https://www.facebook.com/mksaas',
|
||||
icon: <FacebookIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Instagram',
|
||||
href: 'https://www.instagram.com/mksaas',
|
||||
icon: <InstagramIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
href: 'https://github.com/MkSaaSHQ',
|
||||
icon: <GitHubIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
href: 'https://twitter.com/mksaas',
|
||||
icon: <TwitterIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Bluesky',
|
||||
href: 'https://bsky.app/profile/mksaas.com',
|
||||
icon: <BlueskyIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'YouTube',
|
||||
href: 'https://www.youtube.com/@MkSaaSHQ',
|
||||
icon: <YouTubeIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'LinkedIn',
|
||||
href: 'https://www.linkedin.com/company/mksaas',
|
||||
icon: <LinkedInIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Facebook',
|
||||
href: 'https://www.facebook.com/mksaas',
|
||||
icon: <FacebookIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'Instagram',
|
||||
href: 'https://www.instagram.com/mksaas',
|
||||
icon: <InstagramIcon className="size-4 shrink-0" />
|
||||
},
|
||||
{
|
||||
title: 'TikTok',
|
||||
href: 'https://www.tiktok.com/@mksaas',
|
||||
icon: <TikTokIcon className="size-4 shrink-0" />
|
||||
|
||||
@ -22,18 +22,18 @@ export function ForgotPassword({
|
||||
|
||||
return (
|
||||
<EmailLayout>
|
||||
<Text>{t("mail.forgotPassword.title", { name })}</Text>
|
||||
<Text>{t("Mail.forgotPassword.title", { name })}</Text>
|
||||
|
||||
<Text>{t("mail.forgotPassword.body")}</Text>
|
||||
<Text>{t("Mail.forgotPassword.body")}</Text>
|
||||
|
||||
<EmailButton href={url}>
|
||||
{t("mail.forgotPassword.resetPassword")}
|
||||
{t("Mail.forgotPassword.resetPassword")}
|
||||
</EmailButton>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<Text>{t("mail.common.team", { name: siteConfig.name })}</Text>
|
||||
<Text>{t("mail.common.copyright", { year: new Date().getFullYear() })}</Text>
|
||||
<Text>{t("Mail.common.team", { name: siteConfig.name })}</Text>
|
||||
<Text>{t("Mail.common.copyright", { year: new Date().getFullYear() })}</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,9 +16,9 @@ export function SubscribeNewsletter({
|
||||
return (
|
||||
<EmailLayout>
|
||||
<Heading className="text-xl">
|
||||
{t("mail.subscribeNewsletter.subject")}
|
||||
{t("Mail.subscribeNewsletter.subject")}
|
||||
</Heading>
|
||||
<Text>{t("mail.subscribeNewsletter.body")}</Text>
|
||||
<Text>{t("Mail.subscribeNewsletter.body")}</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,18 +22,18 @@ export function VerifyEmail({
|
||||
|
||||
return (
|
||||
<EmailLayout>
|
||||
<Text>{t("mail.verifyEmail.title", { name })}</Text>
|
||||
<Text>{t("Mail.verifyEmail.title", { name })}</Text>
|
||||
|
||||
<Text>{t("mail.verifyEmail.body")}</Text>
|
||||
<Text>{t("Mail.verifyEmail.body")}</Text>
|
||||
|
||||
<EmailButton href={url}>
|
||||
{t("mail.verifyEmail.confirmEmail")}
|
||||
{t("Mail.verifyEmail.confirmEmail")}
|
||||
</EmailButton>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<Text>{t("mail.common.team", { name: siteConfig.name })}</Text>
|
||||
<Text>{t("mail.common.copyright", { year: new Date().getFullYear() })}</Text>
|
||||
<Text>{t("Mail.common.team", { name: siteConfig.name })}</Text>
|
||||
<Text>{t("Mail.common.copyright", { year: new Date().getFullYear() })}</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -39,6 +39,7 @@ export enum Routes {
|
||||
PricingBlocks = '/blocks/pricing',
|
||||
FeaturesBlocks = '/blocks/features',
|
||||
FAQBlocks = '/blocks/faq',
|
||||
TestimonialsBlocks = '/blocks/testimonials',
|
||||
StatsBlocks = '/blocks/stats',
|
||||
CallToActionBlocks = '/blocks/call-to-action',
|
||||
ContentBlocks = '/blocks/content',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user