Title of post

import { FaEnvelope, FaInstagram, FaImdb } from"react-icons/fa";importImagefrom"next/image";importsanityClientfrom"@/lib/config/sanity.config";import { groq, PortableText } from"next-sanity";importHeadingfrom"@/components/ui/heading";importSocialIconsfrom"@/components/socials";import { Metadata } from"next/types";import { siteConfig } from"@/lib/config/metadata.config";import { unstable_noStoreasnoStore } from"next/cache";
exportconstmetadata:Metadata= {title:"Bio | Rickaya Sykes",description:"Watch the latest reel of Rickaya Sykes.",openGraph: {title:"Rickaya Sykes Bio",description:"Watch the latest reel of Rickaya Sykes.",url:`${siteConfig.url}/bio`,images:[ {url:`${siteConfig.url}/api/og?title=Rickaya%20Sykes%20Bio&type=Bio`,width:1200,height:630,alt:"Rickaya Sykes Bio", },], },twitter: {card:"summary_large_image",title:"Rickaya Sykes Bio",description:"Watch the latest reel of Rickaya Sykes.",images:[`${siteConfig.url}/api/og?title=Rickaya%20Sykes%20Bio&type=Bio`], },};
exportdefaultasyncfunctionBio() {noStore();constbio=awaitsanityClient.fetch(groq`*[_type == "bio"] { sectionOne, sectionTwo, coverImage }` );constptComponents= {types: {}, };
return (<mainclassName="min-h-screen grid grid-cols-1 lg:grid-cols-[1fr_1.2fr_1fr]">{/* Left Section - White Background with Overlapping Card */}<sectionclassName="relative bg-white min-h-screen lg:block hidden"><divclassName="absolute left-0 top-1/2 max-w-2xl -translate-y-1/2 bg-white shadow-xl p-8 lg:p-10 z-20 w-[140%] max-h-[80vh] overflow-y-auto"><div><Headinglevel="h1"className="text-5xl font-light mb-6 tracking-tight text-center"> Creative</Heading><articleclassName="leading-relaxed prose text-justify max-w-none [&_p]:leading-[2em]"><PortableTextcomponents={ptComponents}value={bio[0].sectionOne}/></article>{/* <div className="flex flex-col justify-end"> <div className="flex gap-6 justify-start"> <SocialIcons /> </div> </div> */}</div></div></section>
{/* Mobile Bio Section */}<sectionclassName="lg:hidden flex flex-col px-6 py-8"><h1className="text-4xl font-light mb-6 tracking-tight">Bio.</h1><divclassName="aspect-[3/4] relative w-full mb-8"><Imagesrc="/assets/bio-main.svg"alt="Rickaya Sykes"fillpriorityclassName="object-cover"/></div><articleclassName="leading-relaxed prose text-justify max-w-none [&_p]:leading-[2em]"><PortableTextcomponents={ptComponents}value={bio[0].sectionTwo}/></article><divclassName="flex gap-6 mt-4 mb-8"><ahref="mailto:contact@rickayasykes.com"className="text-gray-800 hover:text-gray-600 transition-colors duration-200"aria-label="Email"><FaEnvelopesize={20}/></a><ahref="https://instagram.com/rickayasykes"target="_blank"rel="noopener noreferrer"className="text-gray-800 hover:text-gray-600 transition-colors duration-200"aria-label="Instagram"><FaInstagramsize={20}/></a><ahref="https://www.imdb.com/name/rickayasykes"target="_blank"rel="noopener noreferrer"className="text-gray-800 hover:text-gray-600 transition-colors duration-200"aria-label="IMDb"><FaImdbsize={20}/></a></div>
{/* Mobile Additional Bio Content */}<divclassName="-mx-6 px-6 py-8"><articleclassName="leading-relaxed prose text-justify max-w-none [&_p]:leading-[2em]"><PortableTextcomponents={ptComponents}value={bio[0].sectionTwo}/></article></div></section>
{/* Middle Section - Full Image Background */}<sectionclassName="relative min-h-screen lg:block hidden"><Imagesrc="/assets/bio-main.svg"alt="Rickaya Sykes"fillpriorityclassName="object-cover"/><divclassName="absolute inset-0 bg-black/10"/></section>
{/* Right Section */}<sectionclassName="bg-[#D1D5DB] p-8 lg:p-12 flex-col justify-center lg:block hidden"><divclassName="max-w-[500px]"><articleclassName="leading-relaxed prose text-justify max-w-none [&_p]:leading-[2em]"><PortableTextcomponents={ptComponents}value={bio[0].sectionTwo}/></article></div></section></main> );}