aboutsummaryrefslogtreecommitdiff
path: root/apps/website/src/pages/index.astro
blob: c2835ac1d3a10fb92f41d961d0ddbc62c1d0f6ee (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
---
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 title="Main Page">
	<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="0.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="flex flex-row justify-center items-center font-medium relative rounded-full py-1 px-3 text-sm text-blue-450 hover:text-blue-600 border border-1 border-gray-800/20 hover:border-blue-600">
					Introducing OneConfig
					<Link href="/projects/oneconfig" class="transition-none">
						<span class="absolute inset-0" aria-hidden="true"></span>
						<Icon icon="link-external" size={18} class="ml-1"></Icon>
					</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="flex flex-wrap flex-col-reverse md:flex-row justify-center lg:justify-normal lg:flex-nowrap relative isolate overflow-hidden bg-blue-75 py-6 md:shadow sm:rounded-3xl px-6 gap-6 lg:gap-20 lg:px-8 lg:py-0 z-50 md:ring-gray-400/50 md:ring-1">
				<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-start">
						<Icon icon="oneconfig" size={38} class="hidden md:block text-blue-500 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="flex flex-col justify-center items-center">
					<img
						class="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 lg:-ml-10">
			<div class="mx-auto max-w-7xl">
				<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 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" href="/about" size="sm" iconLeft="user">Meet the team</Button>
				</div>
			</div>
		</div>
		<div class="flex justify-start md:justify-end mb-20 lg:-mr-10">
			<div class="flex flex-col text-right">
				<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-end items-end 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>