diff --git a/app/routes/_libraries/config.$version.index.tsx b/app/routes/_libraries/config.$version.index.tsx
index 52285dae..610a6283 100644
--- a/app/routes/_libraries/config.$version.index.tsx
+++ b/app/routes/_libraries/config.$version.index.tsx
@@ -30,159 +30,161 @@ const librariesRouteApi = getRouteApi('/_libraries')
export default function FormVersionIndex() {
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
- const { version } = Route.useParams()
const library = getLibrary('config')
const gradientText = `pr-1 inline-block leading-snug text-transparent bg-clip-text bg-gradient-to-r ${configProject.colorFrom} ${configProject.colorTo}`
return (
- <>
- <div className="flex flex-col gap-20 md:gap-32 pt-32">
- <div className="flex flex-col items-center gap-8 text-center px-4">
- <h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
- <span>TanStack</span>
- <span className={twMerge(gradientText)}>Config</span>
- </h1>
- <h2
- className="font-bold text-2xl max-w-[600px]
- md:text-3xl
- lg:text-5xl lg:max-w-[800px]"
- >
- <span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
- Configuration and tools
- </span>{' '}
- for publishing and maintaining high-quality JavaScript packages
- </h2>
- <Link
- to="./docs/"
- className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
- >
- Get Started
- </Link>
- </div>
+ <div className="flex flex-1 flex-col min-h-0 relative overflow-x-hidden">
+ <div className="flex flex-1 min-h-0 relative justify-center overflow-x-hidden">
+ <div className="flex flex-col gap-20 md:gap-32 max-w-full py-32">
+ <div className="flex flex-col items-center gap-8 text-center px-4">
+ <h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
+ <span>TanStack</span>
+ <span className={twMerge(gradientText)}>Config</span>
+ </h1>
+ <h2
+ className="font-bold text-2xl max-w-md
+ md:text-3xl
+ lg:text-5xl lg:max-w-2xl"
+ >
+ <span className="underline decoration-dashed decoration-gray-500 decoration-3 underline-offset-2">
+ Configuration and tools
+ </span>{' '}
+ for publishing and maintaining high-quality JavaScript packages
+ </h2>
+ <Link
+ to="./docs/"
+ className={`py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
+ >
+ Get Started
+ </Link>
+ </div>
- <LibraryFeatureHighlights
- featureHighlights={library.featureHighlights}
- />
+ <LibraryFeatureHighlights
+ featureHighlights={library.featureHighlights}
+ />
- <div className="px-4 sm:px-6 lg:px-8 mx-auto container">
- <div className=" sm:text-center pb-16">
- <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
- Hassle-Free Setup
- </h3>
- <p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
- Incorporate TanStack Config into your development toolkit and
- experience a new level of efficiency, speed, and customization in
- building and releasing high-quality JavaScript packages.
- </p>
- </div>
- <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 w-[max-content] mx-auto">
- {[
- // A list of features that @tanstack/config provides
- 'Vite ecosystem',
- 'Opinionated defaults',
- 'Publint-compliant',
- 'Minimal configuration',
- 'Package versioning',
- 'Automated changelogs',
- ].map((d, i) => {
- return (
- <span key={i} className="flex items-center gap-2">
- <FaCheckCircle className="text-green-500 " /> {d}
- </span>
- )
- })}
+ <div className="px-4 sm:px-6 lg:px-8 mx-auto">
+ <div className="sm:text-center pb-16">
+ <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
+ Hassle-Free Setup
+ </h3>
+ <p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
+ Incorporate TanStack Config into your development toolkit and
+ experience a new level of efficiency, speed, and customization
+ in building and releasing high-quality JavaScript packages.
+ </p>
+ </div>
+ <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 mx-auto">
+ {[
+ // A list of features that @tanstack/config provides
+ 'Vite ecosystem',
+ 'Opinionated defaults',
+ 'Publint-compliant',
+ 'Minimal configuration',
+ 'Package versioning',
+ 'Automated changelogs',
+ ].map((d, i) => {
+ return (
+ <span key={i} className="flex items-center gap-2">
+ <FaCheckCircle className="text-green-500 " /> {d}
+ </span>
+ )
+ })}
+ </div>
</div>
- </div>
- <div className="px-4 w-[500px] max-w-full mx-auto">
- <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
- Partners
- </h3>
- <div className="h-8" />
- <div
- className="flex-1 flex flex-col items-center text-sm text-center
+ <div className="px-4 w-[500px] max-w-full mx-auto">
+ <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+ Partners
+ </h3>
+ <div className="h-8" />
+ <div
+ className="flex-1 flex flex-col items-center text-sm text-center
bg-white/80 shadow-xl shadow-gray-500/20 rounded-lg
divide-y-2 divide-gray-500 divide-opacity-10 overflow-hidden
dark:bg-black/40 dark:shadow-none"
- >
- <span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
- Config <TbHeartHandshake /> You?
- </span>
- <div className="flex flex-col p-4 gap-4">
- <div>
- We're looking for a TanStack Config OSS Partner to go above and
- beyond the call of sponsorship. Are you as invested in TanStack
- Config as we are? Let's push the boundaries of Config together!
+ >
+ <span className="flex items-center gap-2 p-12 text-4xl text-rose-500 font-black uppercase">
+ Config <TbHeartHandshake /> You?
+ </span>
+ <div className="flex flex-col p-4 gap-4">
+ <div>
+ We're looking for a TanStack Config OSS Partner to go above
+ and beyond the call of sponsorship. Are you as invested in
+ TanStack Config as we are? Let's push the boundaries of Config
+ together!
+ </div>
+ <a
+ href="mailto:partners@tanstack.com?subject=TanStack Config Partnership"
+ className="text-blue-500 uppercase font-black text-sm"
+ >
+ Let's chat
+ </a>
</div>
- <a
- href="mailto:partners@tanstack.com?subject=TanStack Config Partnership"
- className="text-blue-500 uppercase font-black text-sm"
- >
- Let's chat
- </a>
</div>
</div>
- </div>
- <div className="relative text-lg overflow-hidden">
- <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
- Sponsors
- </h3>
- <div
- className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
- style={{
- aspectRatio: '1/1',
- }}
- >
- <Await
- promise={sponsorsPromise}
- fallback={<CgSpinner className="text-2xl animate-spin" />}
- children={(sponsors) => {
- return <SponsorPack sponsors={sponsors} />
+ <div className="relative text-lg overflow-hidden">
+ <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+ Sponsors
+ </h3>
+ <div
+ className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
+ style={{
+ aspectRatio: '1/1',
}}
- />
- </div>
- <div className="text-center">
- <a
- href="https://github.com/sponsors/tannerlinsley"
- className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
>
- Become a Sponsor!
- </a>
+ <Await
+ promise={sponsorsPromise}
+ fallback={<CgSpinner className="text-2xl animate-spin" />}
+ children={(sponsors) => {
+ return <SponsorPack sponsors={sponsors} />
+ }}
+ />
+ </div>
+ <div className="text-center">
+ <a
+ href="https://github.com/sponsors/tannerlinsley"
+ className="inline-block bg-green-500 px-4 py-2 text-xl mx-auto leading-tight font-extrabold tracking-tight text-white rounded-full"
+ >
+ Become a Sponsor!
+ </a>
+ </div>
</div>
- </div>
- <div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
- <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
- <Carbon />
+ <div className="mx-auto max-w-[400px] flex flex-col gap-2 items-center">
+ <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white">
+ <Carbon />
+ </div>
+ <span
+ className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
+ dark:bg-opacity-20"
+ >
+ This ad helps us keep the lights on 😉
+ </span>
</div>
- <span
- className="text-[.7rem] bg-gray-500 bg-opacity-10 py-1 px-2 rounded text-gray-500
- dark:bg-opacity-20"
- >
- This ad helps us keep the lights on 😉
- </span>
- </div>
- <div className="flex flex-col gap-4 items-center">
- <div className="font-extrabold text-xl lg:text-2xl">
- Wow, you've come a long way!
- </div>
- <div className="italic font-sm opacity-70">
- Only one thing left to do...
- </div>
- <div>
- <Link
- to="./docs/"
- className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
- >
- Get Started!
- </Link>
+ <div className="flex flex-col gap-4 items-center">
+ <div className="font-extrabold text-xl lg:text-2xl">
+ Wow, you've come a long way!
+ </div>
+ <div className="italic font-sm opacity-70">
+ Only one thing left to do...
+ </div>
+ <div>
+ <Link
+ to="./docs/"
+ className={`inline-block py-2 px-4 bg-gray-500 text-white rounded uppercase font-extrabold`}
+ >
+ Get Started!
+ </Link>
+ </div>
</div>
+ <Footer />
</div>
- <Footer />
</div>
- </>
+ </div>
)
}