diff options
Diffstat (limited to 'apps/website/src/pages/index.astro')
| -rw-r--r-- | apps/website/src/pages/index.astro | 167 |
1 files changed, 163 insertions, 4 deletions
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index ccc6852..3b09bf9 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -1,11 +1,170 @@ --- +import Button from '@components/base/Button.astro'; +import Header from '@components/base/Header.astro'; +import Link from '@components/base/Link.astro'; +import Paragraph from '@components/base/Paragraph.astro'; import Section from '@components/base/Section.astro'; +import Icon from '@components/icons/Icon.astro'; +import configConst from '@config'; import Layout from '@layouts/Layout.astro'; --- <Layout> - <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]"> - <h1>500</h1> - <p>Internal Staff Error</p> - <p>(placeholder until I start copying over the old index page)</p> + <Section wrapperClass="min-h-screen" class="relative isolate px-6 lg:px-8"> + <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80 opacity-50"> + <svg + class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]" + viewBox="0 0 1155 678"> + <path + fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)" + fill-opacity=".3" + d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z" + /> + <defs> + <linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse"> + <stop stop-color="#2463EB" /> + <stop offset={1} stop-color="#0080B5" /> + </linearGradient> + </defs> + </svg> + </div> + <div class="mx-auto max-w-3xl py-36 lg:py-48"> + <div class="mt-4 mb-8 flex md:justify-center"> + <div class="font-medium relative rounded-full py-1 px-3 text-sm leading-6 text-navy-peony ring-1 ring-gray-900/10 hover:ring-gray-900/20 transition"> + Introducing OneConfig 1.0 + <Link href="/projects/oneconfig" class="font-semibold text-brand-600 ml-1"> + <span class="absolute inset-0" aria-hidden="true" /> + Read more + </Link> + </div> + </div> + <div class="text-left md:text-center"> + <Header size="xxl" class="tracking-tight text-navy-peony max-sm:!text-header"> + Passionate creators redefining the modding community + </Header> + <Paragraph class="mt-6 text-lg leading-8 text-navy-peony"> + With a dedicated team of developers and a passionate community of players, Polyfrost continues to push the boundaries of what's possible in Minecraft modding. + </Paragraph> + <div class="mt-7 flex items-center justify-start md:justify-center gap-x-6"> + <Button style="secondary" href="/about" iconLeft="book-open">About us</Button> + <Button style="secondary" href="/contact" iconLeft="chat">Socials</Button> + </div> + </div> + </div> + <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-35rem)] opacity-50"> + <svg + class="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]" + viewBox="0 0 1155 678"> + <path + fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)" + fill-opacity=".3" + d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z" + /> + <defs> + <linearGradient id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse"> + <stop stop-color="#2463EB" /> + <stop offset={1} stop-color="#0080B5" /> + </linearGradient> + </defs> + </svg> + </div> </Section> + <Section wFull maxWidth="1024px" class="mt-0 sm:-mt-52 max-sm:!px-0 !px-5 items-center justify-center"> + <div class="flex flex-col justify-center items-center py-12 px-0 sm:py-12"> + <div class="relative isolate overflow-hidden bg-blue-75 pt-6 md:shadow sm:rounded-3xl px-6 md:pt-12 lg:flex lg:gap-x-20 lg:px-16 lg:pt-0 z-50 md:ring-gray-400/50 md:ring-1"> + <svg + viewBox="0 0 1024 1024" + class="absolute -z-10 h-[64rem] w-[64rem] [mask-image:radial-gradient(closest-side,white,transparent)] translate-x-64" + aria-hidden="true"> + <circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" /> + <defs> + <radial-gradient id="759c1415-0410-454c-8f7c-9a820de03641"> + <stop stop-color="#7775D6" /> + <stop offset={1} stop-color="#2463EB" /> + </radial-gradient> + </defs> + </svg> + <div class="flex flex-col justify-center items-center lg:justify-start lg:items-start max-w-screen-md text-center lg:py-8 lg:text-left"> + <div class="flex flex-col justify-center items-center"> + <Icon icon="oneconfig" size={48} class="text-navy-peony mb-4"></Icon> + <Header size="lg" class="text-3xl font-semibold tracking-tight text-navy-peony"> + OneConfig has <br>finally arrived. + </Header> + </div> + <Paragraph class="mt-6 text-lg leading-8 text-gray-700"> + Learn more about what OneConfig is, and how it's revolutionized modding and user experience. + </Paragraph> + <div class="mt-10 flex items-center justify-center gap-x-4 lg:justify-start"> + <Button href="/projects/oneconfig" size="sm" iconLeft="oneconfig" style="secondary">Learn more</Button> + <Button href="/mods" size="sm" iconLeft="link-external" style="secondary">Discover mods</Button> + </div> + </div> + <div class="relative mt-16 h-40 lg:h-80 lg:mt-8 w-full"> + <img + class="absolute top-0 left-1/2 -translate-x-1/2 lg:top-1/2 lg:-left-12 lg:translate-x-0 max-w-80 rounded-md bg-white/5 ring-1 ring-white/10 pointer-events-none" + src="/media/oneconfig/page_media_3.svg" + alt="OneConfig Screenshot" + width={912} + height={540} + /> + </div> + </div> + </div> + </Section> + + <Section wFull maxWidth="1024px" wrapperClass="bg-blue-100 mb-40" class="-mt-20 flex flex-col"> + <div class="relative isolate overflow-hidden pt-24 mt-10"> + <div class="mx-auto max-w-7xl md:px-6 lg:px-8"> + <div class="mx-auto max-w-2xl lg:mx-0"> + <Header class="text-5xl font-bold tracking-tight text-navy-peony mt-8">Who we are</Header> + <Paragraph class="mt-3 text-md leading-8 text-navy-peony"> + We're a group of passionate, self-driven designers, developers, and modders creating mods and libraries for the Minecraft community. + </Paragraph> + </div> + <div class="mt-3 flex flex-row gap-y-6 gap-x-8 text-base font-semibold leading-7 text-gray-600 lg:gap-x-10"> + <Button style="secondary" size="sm" iconLeft="link-external">Meet the team</Button> + </div> + </div> + </div> + <div class="flex justify-start md:justify-end mb-20"> + <div class="flex flex-col"> + <Header class="text-5xl font-bold tracking-tight text-navy-peony mt-8"> + Our commitment + </Header> + <Paragraph class="mt-3 text-md leading-8 text-navy-peony"> + Above all, we're committed to bringing quality, open sourced tools built <br> around usability, accessibility to the greater modding community. + </Paragraph> + <div class="flex flex-row justify-start items-start mt-3 gap-y-6 text-base font-semibold leading-7 text-brand-600 gap-x-4"> + <Button iconLeft="book-open" size="sm" href="/oss">Why open source?</Button> + <Button iconLeft="github" style="secondary" size="sm" href={configConst.socials.github}>GitHub</Button> + </div> + </div> + </div> + </Section> + <!-- <Section> + <div class="bg-white pt-12 sm:pt-16"> + <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> + <div class="max-w-4xl mx-auto text-center"> + <h2 class="text-4xl font-semibold tracking-tight text-gray-800">About our projects</h2> + <p class="mt-3 text-xl text-gray-500 sm:mt-4"></p> + </div> + </div> + <div class="mt-10 pb-12 bg-white sm:pb-16"> + <div class="relative"> + <div class="absolute inset-0 h-1/2 bg-white" /> + <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> + <div class="max-w-3xl mx-auto"> + <dl class="sm:grid sm:grid-cols-3"> + {lang.home.blocks.stats.items.map((item, index) => ( + <div key={item.name} class="flex flex-col p-3 text-center"> + <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">{item.name}</dt> + <dd class="order-1 text-5xl font-extrabold text-brand-600">{humanNumber(item.number)}</dd> + </div> + ))} + </dl> + </div> + </div> + </div> + </div> + </div> + </Section> --> </Layout> |