311 lines
12 KiB
TypeScript
311 lines
12 KiB
TypeScript
|
|
import { cn, nanoid } from '@/lib/utils'
|
|
import { auth } from '@/auth'
|
|
|
|
// import { Header } from '@/components/header'
|
|
// import { Web3Provider } from '@/components/providers/web3-provider'
|
|
import { Metadata } from 'next'
|
|
|
|
|
|
import { Message } from '@aigxion/isdk'
|
|
import { baseTitle, descriptionRoot } from '@/lib/metadata'
|
|
import Image from "next/image";
|
|
|
|
import aImage from '../../components/images/a.png'
|
|
import bImage from '../../components/images/b.png';
|
|
import cImage from '../../components/images/c.png';
|
|
import dImage from '../../components/images/d.png';
|
|
import naturalImage from '../../components/images/natural.png';
|
|
import voiceImage from '../../components/images/voice.png';
|
|
import signlangImage from '../../components/images/signlang.png';
|
|
import lipreadImage from '../../components/images/lipread.png';
|
|
|
|
|
|
export const metadata: Metadata = {
|
|
metadataBase: new URL('https://blogai.ai'),
|
|
title: {
|
|
default: baseTitle,
|
|
template: baseTitle
|
|
},
|
|
description: `${descriptionRoot}`,
|
|
icons: {
|
|
icon: '/favicon.png'
|
|
}
|
|
}
|
|
|
|
import Link from "next/link";
|
|
|
|
import { IconChevronUpDown, IconGitHub } from '@/components/ui/icons'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Frame } from '@/components/frame'
|
|
import { redirect } from 'next/navigation'
|
|
|
|
|
|
// const Line: React.FC = ({ className, IconLeft, label, IconRight }) => {
|
|
|
|
|
|
|
|
const Line: React.FC<{ className?: string }> = ({ className }) => {
|
|
|
|
return (
|
|
<div className='bg-clip-border overflow-clip border-b border-[#FFFFFF] md:border-[#FFFFFF]/15 text-[#FFD55D] rounded-lg '></div>
|
|
);
|
|
};
|
|
|
|
export default async function IndexPage({ params: { locale } }: { params: { locale: string } }) {
|
|
|
|
return redirect("/staff");
|
|
|
|
const session = await auth()
|
|
const avatarUrl = session?.user?.image
|
|
const id = nanoid()
|
|
|
|
|
|
|
|
// const { t, resources } = await initTranslations(locale, i18nNamespaces);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 px-4 mx-auto lg:px-0 max-w-7xl" id="index-target">
|
|
{/* <HeroSvg className="absolute inset-x-0 top-0 pointer-events-none" /> */}
|
|
|
|
<div className="flex flex-col items-start justify-center mt-32 min-h-72 mb-[14rem]">
|
|
<h1 className="section-title-heading-gradient font-medium text-[4rem] text-[#fff] leading-[5rem] text-left mb-[1rem]">
|
|
Intent-Driven SDK: <br />Empowering Seamless User <br />Experiences
|
|
</h1>
|
|
|
|
{/* <p className="mt-8 bg-gradient-to-br text-transparent bg-gradient-stop bg-clip-text from-white via-white via-40% to-white/30 max-w-lg text-center">
|
|
We wanted pricing to be simple and affordable for anyone, so we've created flexible plans
|
|
that don't need an accounting degree to figure out.
|
|
</p> */}
|
|
|
|
|
|
<Link href="https://github.com">
|
|
<Button variant="outline" className='bg-[#000] text-[#fff] gap-2'>
|
|
<IconGitHub />
|
|
<span className=" ">Code</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className={cn("grid md:grid-cols-2 xl:grid-cols-4 gap-[1rem] mb-24 px-4 text-[#fff] my-[2rem]")}>
|
|
{[
|
|
{ image: aImage, title: "Natural language interaction", url: "/#a" },
|
|
{ image: bImage, title: "Voice interaction", url: "/#b" },
|
|
{ image: cImage, title: "Sign language interaction", url: "/#c" },
|
|
{ image: dImage, title: "Lip language interaction", url: "/#d" },
|
|
].map((post, index) => (
|
|
// <Link href={`/blog/${post.url}`} key={index}>
|
|
<div key={index} className={cn("flex flex-col p-0 m-0 gap-4 text-left rounded-[18px] col-span-2 md:col-span-1")}>
|
|
<div className="rounded bg-clip-border overflow-clip">
|
|
<figure
|
|
className='w-full'
|
|
><Image src={post.image} className='w-full' alt="Hero Image" /></figure>
|
|
</div>
|
|
|
|
<h2 className="text-3xl font-medium leading-10 sm:text-xl blog-heading-gradient">{post.title}</h2>
|
|
|
|
<Link href={`/blog/${post.url}`} >
|
|
<Button variant="link" className="p-0 h-8 text-[#CCCCCC]" >Explore more</Button>
|
|
</Link>
|
|
|
|
</div>
|
|
// </Link>
|
|
))}
|
|
</div>
|
|
|
|
<Line />
|
|
|
|
<div className="flex flex-col items-start justify-center mt-32 min-h-62 mb-[14rem] text-left">
|
|
<h1 className="section-title-heading-gradient font-medium text-[4rem] text-[#fff] leading-[5rem] mb-[1rem]">
|
|
Natural language interaction
|
|
</h1>
|
|
|
|
<p className="mt-8 bg-gradient-to-br text-transparent bg-gradient-stop bg-clip-text from-white via-white via-40% to-white/30 max-w-lg my-[2rem]">
|
|
Use natural language to convey intentions to the machine, fulfilling the user's objectives.
|
|
</p>
|
|
|
|
|
|
<Frame className="order-2 w-full my-auto shadow-sm p-0 max-w-8xl" >
|
|
<Image src={naturalImage} className='w-full' alt="Hero Image" />
|
|
</Frame>
|
|
</div>
|
|
|
|
<Line />
|
|
|
|
|
|
<div className=''>
|
|
{[
|
|
{ image: voiceImage, title: " Voice interaction", details: "Use spoken language to convey intentions, making human-machine interaction simpler and more direct.", order: false },
|
|
{ image: signlangImage, title: "Sign language interaction", details: "Use sign language to convey intentions, allowing the machine to understand sign language and facilitate the integration of disabled individuals with society.", order: true },
|
|
{ image: lipreadImage, title: "Lip reading language interaction", details: "Support lip reading to convey intentions, enabling interaction with the machine through lip reading in noisy or confidential environments.", order: false },
|
|
].map((item, index) => (
|
|
<div className='pb-[2rem]' key={index}>
|
|
<div className={cn("flex flex-col xl:flex-row w-full relative z-1 text-[#fff]", "py-[2.5rem]")}>
|
|
|
|
<div className="flex flex-col order-1 w-full xl:order-2 md:pl-12">
|
|
|
|
<h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
|
|
{item.title}
|
|
</h2>
|
|
<p className="flex justify-start text-base font-normal leading-7 text-white/60 lg:pr-16 xl:justify-start">
|
|
{item.details}
|
|
</p>
|
|
</div>
|
|
|
|
<Frame
|
|
|
|
className={cn(
|
|
"order-2 w-full my-auto shadow-sm xl:order-2",
|
|
{
|
|
"xl:order-1": item.order,
|
|
},
|
|
)}
|
|
|
|
>
|
|
<Image src={item.image} width={1920} height={1080} alt="Hero Image" />
|
|
</Frame>
|
|
|
|
|
|
</div>
|
|
|
|
<Line />
|
|
|
|
</div>
|
|
|
|
))}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* <ShinyCardGroup className="grid h-full max-w-4xl grid-cols-2 gap-6 mx-auto mt-32 group">
|
|
<PricingCard color={Color.White} className="col-span-2 md:col-span-1">
|
|
<FreeCardHighlight className="absolute top-0 right-0 pointer-events-none" />
|
|
|
|
<PricingCardHeader
|
|
title="Free Tier"
|
|
description="Everything you need to start!"
|
|
className="bg-gradient-to-tr from-transparent to-[#ffffff]/10 "
|
|
color={Color.White}
|
|
/>
|
|
<Separator />
|
|
|
|
<PricingCardContent>
|
|
<Cost dollar="$0" />
|
|
<Bullets>
|
|
<Bullet Icon={Check} label="100 active keys / month" color={Color.White} />
|
|
<Bullet
|
|
Icon={Check}
|
|
label="2.5k successful verifications / month"
|
|
color={Color.White}
|
|
/>
|
|
<Bullet Icon={Check} label="7-day analytics retention" color={Color.White} />
|
|
<Bullet Icon={Check} label="Unlimited APIs" color={Color.White} />
|
|
</Bullets>
|
|
</PricingCardContent>
|
|
</PricingCard>
|
|
<PricingCard color={Color.Yellow} className="col-span-2 md:col-span-1">
|
|
<ProCardHighlight className="absolute top-0 right-0 pointer-events-none" />
|
|
|
|
<PricingCardHeader
|
|
title="Pro Tier"
|
|
description="For growing teams with powerful demands"
|
|
className="bg-gradient-to-tr from-black/50 to-[#FFD600]/10 "
|
|
color={Color.Yellow}
|
|
/>
|
|
<Separator />
|
|
|
|
<PricingCardContent>
|
|
<Cost dollar="$25" />
|
|
<Bullets>
|
|
<Bullet Icon={Check} label="250 active keys / month" color={Color.Yellow} />
|
|
<Bullet
|
|
Icon={Check}
|
|
label="150k successful verifications / month"
|
|
color={Color.Yellow}
|
|
/>
|
|
<Bullet Icon={Check} label="90-day analytics retention" color={Color.Yellow} />
|
|
<Bullet Icon={Check} label="90-day audit log retention" color={Color.Yellow} />
|
|
<Bullet Icon={Check} label="Unlimited APIs" color={Color.Yellow} />
|
|
<Bullet Icon={Check} label="Workspaces with team members" color={Color.Yellow} />
|
|
<Bullet
|
|
Icon={Stars}
|
|
label="More coming soon"
|
|
color={Color.Yellow}
|
|
textColor="text-white/40"
|
|
/>
|
|
</Bullets>
|
|
</PricingCardContent>
|
|
<PricingCardFooter>
|
|
<div className="flex flex-col gap-2">
|
|
<Asterisk tag="$0.10" label="/ additional active key" />
|
|
<Asterisk tag="$1" label="/ additional 10k successful verifications" />
|
|
</div>
|
|
</PricingCardFooter>
|
|
</PricingCard>
|
|
|
|
<PricingCard color={Color.Purple} className="col-span-2">
|
|
<EnterpriseCardHighlight className="absolute top-0 right-0 pointer-events-none" />
|
|
|
|
<div className="flex flex-col h-full md:flex-row">
|
|
<div className="flex flex-col w-full gap-8">
|
|
<PricingCardHeader
|
|
title="Enterprise Tier"
|
|
description={
|
|
<>
|
|
Need something custom?
|
|
<br /> We'll find a way.
|
|
</>
|
|
}
|
|
color={Color.Purple}
|
|
className="bg-gradient-to-tr from-transparent to-[#9D72FF]/10 "
|
|
/>
|
|
<PricingCardContent>
|
|
<Cost dollar="Custom $" />
|
|
<Link href="mailto:support@unkey.dev?subject=Unkey Enterprise Quote">
|
|
<div className="w-full p-px rounded-lg h-10 bg-gradient-to-r from-[#02DEFC] via-[#0239FC] to-[#7002FC] overflow-hidden">
|
|
<div className="bg-black rounded-[7px] h-full bg-opacity-95 hover:bg-opacity-25 duration-1000">
|
|
<div className="flex items-center justify-center w-full h-full bg-gradient-to-tr from-[#02DEFC]/20 via-[#0239FC]/20 to-[#7002FC]/20 rounded-[7px]">
|
|
<span className="text-sm font-semibold text-white">Contact Us</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</PricingCardContent>
|
|
</div>
|
|
<Separator orientation="vertical" className="hidden md:flex" />
|
|
<Separator orientation="horizontal" className="md:hidden" />
|
|
<div className="relative w-full p-8">
|
|
<Particles
|
|
className="absolute inset-0 duration-500 opacity-50 -z-10 group-hover:opacity-100"
|
|
quantity={50}
|
|
color={Color.Purple}
|
|
vx={0.1}
|
|
vy={-0.1}
|
|
/>
|
|
<Bullets>
|
|
<Bullet Icon={Check} label="Custom Quotas" color={Color.Purple} />
|
|
<Bullet Icon={Check} label="IP Whitelisting" color={Color.Purple} />
|
|
<Bullet Icon={Check} label="Dedicated Support" color={Color.Purple} />
|
|
<Bullet
|
|
Icon={Stars}
|
|
label="More coming soon"
|
|
color={Color.Purple}
|
|
textColor="text-white/40"
|
|
/>
|
|
</Bullets>
|
|
</div>
|
|
</div>
|
|
</PricingCard>
|
|
</ShinyCardGroup>
|
|
<BelowEnterpriseSvg className="container inset-x-0 top-0 mx-auto -mt-64 -mb-32" />
|
|
|
|
<Discover /> */}
|
|
|
|
{/* <div className="-mx-4 lg:mx-0">
|
|
<CTA />
|
|
</div> */}
|
|
</div>
|
|
);
|
|
}
|