Skip to content

Commit 62d7cf1

Browse files
LarskrsLarskrs
committed
fix(home): spacing, contrast, saturation
1 parent 42f74d2 commit 62d7cf1

3 files changed

Lines changed: 85 additions & 73 deletions

File tree

‎app/(home)/page.tsx‎

Lines changed: 81 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ type GitHubMember = {
1919
html_url: string
2020
}
2121

22-
function Divider () {
22+
function Divider ({className}:{className?: string}) {
2323
return (
24-
<div className="container mx-auto w-full h-0.5 bg-gradient-to-r to-transparent via-neutral-700 from-transparent" />
24+
<div className={cn("container mx-auto my-16 w-full h-0.5 bg-gradient-to-r to-transparent via-neutral-700/50 from-transparent", className)} />
2525
)
2626
}
2727

@@ -33,12 +33,12 @@ export default function HomePage() {
3333

3434

3535
return (
36-
<main className="text-white flex flex-1 relative flex-col gap-16 text-center overflow-x-hidden bg-neutral-950">
36+
<main className="text-white flex flex-1 relative flex-col gap-0 text-center overflow-x-hidden bg-neutral-950">
3737
<div className="mx-auto w-full h-full">
3838
<BentoGrid />
3939
</div>
40-
41-
<Divider />
40+
41+
<Divider className="mt-0" />
4242

4343
<section id="mcplugins" className="mt-16 bg-radial from-rose-700/25 to-75% px-4 xl:px-0 to-transparent">
4444
<h1 className="text-5xl font-black mb-8 tracking-wider">Our Solutions</h1>
@@ -136,81 +136,91 @@ function Contributor ({name, avatar, github}:{name: string, avatar: string, gith
136136

137137
function BentoGrid() {
138138
return (
139-
<header className="flex flex-col bg-radial from-violet-950 via-violet-950/25 to-black min-h-200 w-full pb-20 p-0">
140-
141-
<div className="h-60 mt-25 flex flex-col items-center justify-center">
142-
<h1 className="text-6xl font-black tracking-wider">WAYS TO CREATE <span className="text-violet-500 text-shadow-sm text-shadow-violet-900">MORE</span> <span className="italic font-medium">faster</span></h1>
143-
</div>
139+
<header className="relative flex flex-col min-h-200 w-full bg-black pb-20 p-0">
144140

145141
<motion.div
146-
// initial={{translateY: 500, scale: 1.2, opacity: 0}}
147-
// animate={{translateY: 0, scale: 1, opacity: 1}}
148-
// transition={{delay: 0, duration: 1, ease: "anticipate"}}
149-
className={cn(
150-
"w-full h-260 sm:h-200 lg:h-160 container mx-auto",
151-
"grid grid-cols-12 grid-rows-12 gap-4 p-4",
152-
)}
153-
>
154-
<div className={cn(
155-
"col-start-1 col-end-13 row-start-1 row-end-5",
156-
"sm:col-start-1 sm:col-end-13 sm:row-start-1 sm:row-end-8",
157-
"lg:col-start-4 lg:col-end-13 lg:row-start-1 lg:row-end-13",
158-
"relative bg-neutral-950 rounded-2xl")} >
159-
<div className="duration-200 shadow-2xl shadow-black inset-0 z-0 absolute rounded-xl overflow-hidden object-cover">
160-
<Image alt="gradle" className="object-cover object-left" fill quality={100} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/happy-ghast.png"} />
161-
<motion.div
162-
initial={{translateY: "100%"}}
163-
animate={{translateY: "5%"}}
164-
style={{translateX: "-120%", rotate: "25deg", scale: "125%"}}
165-
transition={{duration: 2, ease: "circInOut"}}
166-
className="h-full absolute right-0 w-1/2"
167-
>
168-
<Image quality={100} className="absolute inset-0 object-cover object-top w-full h-full" alt="team" height={927} width={422} src={"/undefined-render.png"} />
169-
</motion.div>
170-
</div>
171-
</div>
172-
<div
173-
className={cn(
174-
"col-start-1 col-end-13 row-start-9 row-end-13",
175-
"sm:col-start-7 sm:col-end-13 sm:row-start-8 sm:row-end-13",
176-
"lg:col-start-1 lg:col-end-4 lg:row-start-7 lg:row-end-13",
177-
"flex cursor-pointer bg-gradient-to-tr group from-neutral-950/75 to-neutral-950/50")}
178-
>
179-
180-
<Link href={"#gradleplugins"} className="relative flex flex-col items-start justify-end text-start gap-4">
181-
<div className="skew-y-4 group-hover:-translate-y-10 duration-200 shadow-2xl shadow-black left-4 top-4 z-0 right-4 bottom-12 absolute rounded-md overflow-hidden object-cover">
182-
<Image alt="gradle" className="object-cover" fill quality={25} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/nova-spinning.gif"} />
183-
</div>
142+
initial={{opacity: 0}}
143+
animate={{opacity: 1}}
144+
transition={{duration: 1, ease: "easeInOut"}}
145+
className="z-0 mx-auto absolute inset-0 w-full h-full bg-radial from-violet-800 via-violet-950/36 to-black"
146+
/>
184147

185-
<div className="rounded-lg flex flex-col z-10 gap-2 h-full items-start justify-end p-4 bg-gradient-to-t from-neutral-950 via-neutral-950/90 to-transparent">
186-
<h2 className="text-neutral-300/90 text-3xl flex items-center font-semibold"><SiGradle className="mr-4 inline" />Gradle Plugins</h2>
187-
<p className="font-normal text-neutral-500">Improve the experience of project setup & create <span className="text-violet-600 font-bold">better, faster</span></p>
188-
</div>
189-
</Link>
148+
<div className="z-1 flex flex-col w-full">
190149

150+
<div className="h-60 mt-25 flex flex-col items-center justify-center">
151+
<h1 className="text-6xl font-black tracking-wider">WAYS TO CREATE <span className="text-violet-500 text-shadow-sm text-shadow-violet-900">MORE</span> <span className="italic font-medium">faster</span></h1>
191152
</div>
192153

193-
<div
154+
<motion.div
155+
// initial={{translateY: 500, scale: 1.2, opacity: 0}}
156+
// animate={{translateY: 0, scale: 1, opacity: 1}}
157+
// transition={{delay: 0, duration: 1, ease: "anticipate"}}
194158
className={cn(
195-
"col-start-1 col-end-13 row-start-5 row-end-9",
196-
"sm:col-start-1 sm:col-end-7 sm:row-start-8 sm:row-end-13",
197-
"lg:col-start-1 lg:col-end-4 lg:row-start-1 lg:row-end-7",
198-
"relative flex rounded-lg bg-gradient-to-tr group from-rose-950/0 to-violet-700/25 gap-4"
159+
"w-full h-260 sm:h-200 lg:h-160 container mx-auto",
160+
"grid grid-cols-12 grid-rows-12 gap-4 p-4",
199161
)}
200162
>
201-
<Link href={"#mcplugins"} className="flex flex-col items-start justify-end text-start gap-4 p-4">
202-
203-
<div className="shadow-2xl group-hover:-translate-x-8 duration-200 shadow-black relative w-full rounded-md overflow-hidden object-cover">
204-
<Image alt="stellar" className="object-cover w-full h-full flex-1" height={700} width={500} quality={25} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/tpahere.gif"} />
205-
</div>
206-
<div className="rounded-lg flex flex-col z-10 gap-2 -m-4 h-fit mt-auto items-start justify-end p-4 bg-gradient-to-t from-neutral-950 via-neutral-950/90 to-transparent">
207-
<h2 className="text-neutral-300/90 text-3xl flex items-center font-semibold">Minecraft APIs</h2>
208-
<p className="font-normal text-neutral-500">Performant and developer friendly libraries for creating advanced features easily.</p>
163+
<div className={cn(
164+
"col-start-1 col-end-13 row-start-1 row-end-5",
165+
"sm:col-start-1 sm:col-end-13 sm:row-start-1 sm:row-end-8",
166+
"lg:col-start-4 lg:col-end-13 lg:row-start-1 lg:row-end-13",
167+
"relative bg-neutral-950 rounded-2xl")} >
168+
<div className="duration-200 shadow-2xl shadow-black inset-0 z-0 absolute rounded-xl overflow-hidden object-cover">
169+
<Image alt="gradle" className="object-cover object-left" fill quality={100} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/happy-ghast.png"} />
170+
<motion.div
171+
initial={{translateY: "100%"}}
172+
animate={{translateY: "5%"}}
173+
style={{translateX: "-120%", rotate: "25deg", scale: "125%"}}
174+
transition={{duration: 2, ease: "circInOut"}}
175+
className="h-full absolute right-0 w-1/2"
176+
>
177+
<Image quality={100} className="absolute inset-0 object-cover object-top w-full h-full" alt="team" height={927} width={422} src={"/undefined-render.png"} />
178+
</motion.div>
209179
</div>
210-
</Link>
211-
</div>
212-
213-
</motion.div>
180+
</div>
181+
<div
182+
className={cn(
183+
"col-start-1 col-end-13 row-start-9 row-end-13",
184+
"sm:col-start-7 sm:col-end-13 sm:row-start-8 sm:row-end-13",
185+
"lg:col-start-1 lg:col-end-4 lg:row-start-7 lg:row-end-13",
186+
"flex cursor-pointer bg-gradient-to-tr group from-neutral-950/75 to-neutral-950/50")}
187+
>
188+
189+
<Link href={"#gradleplugins"} className="relative flex flex-col items-start justify-end text-start gap-4">
190+
<div className="skew-y-4 group-hover:-translate-y-10 duration-200 shadow-2xl shadow-black left-4 top-4 z-0 right-4 bottom-12 absolute rounded-md overflow-hidden object-cover">
191+
<Image alt="gradle" className="object-cover" fill quality={25} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/nova-spinning.gif"} />
192+
</div>
193+
194+
<div className="rounded-lg flex flex-col z-10 gap-2 h-full items-start justify-end p-4 bg-gradient-to-t from-neutral-950 via-neutral-950/90 to-transparent">
195+
<h2 className="text-neutral-300/90 text-3xl flex items-center font-semibold"><SiGradle className="mr-4 inline" />Gradle Plugins</h2>
196+
<p className="font-normal text-neutral-500">Improve the experience of project setup & create <span className="text-violet-600 font-bold">better, faster</span></p>
197+
</div>
198+
</Link>
199+
200+
</div>
201+
202+
<div
203+
className={cn(
204+
"col-start-1 col-end-13 row-start-5 row-end-9",
205+
"sm:col-start-1 sm:col-end-7 sm:row-start-8 sm:row-end-13",
206+
"lg:col-start-1 lg:col-end-4 lg:row-start-1 lg:row-end-7",
207+
"relative flex rounded-lg bg-gradient-to-tr group from-rose-950/0 to-violet-700/25 gap-4"
208+
)}
209+
>
210+
<Link href={"#mcplugins"} className="flex flex-col items-start justify-end text-start gap-4 p-4">
211+
212+
<div className="shadow-2xl group-hover:-translate-x-8 duration-200 shadow-black relative w-full rounded-md overflow-hidden object-cover">
213+
<Image alt="stellar" className="object-cover w-full h-full flex-1" height={700} width={500} quality={25} src={"https://cdn.undefinedcreations.com/undefinedcreations/website/tpahere.gif"} />
214+
</div>
215+
<div className="rounded-lg flex flex-col z-10 gap-2 -m-4 h-fit mt-auto items-start justify-end p-4 bg-gradient-to-t from-neutral-950 via-neutral-950/90 to-transparent">
216+
<h2 className="text-neutral-300/90 text-3xl flex items-center font-semibold">Minecraft APIs</h2>
217+
<p className="font-normal text-neutral-500">Performant and developer friendly libraries for creating advanced features easily.</p>
218+
</div>
219+
</Link>
220+
</div>
221+
222+
</motion.div>
223+
</div>
214224
</header>
215225
)
216226
}
@@ -252,6 +262,7 @@ import "prismjs/components/prism-kotlin"
252262
import "prismjs/themes/prism-okaidia.css"
253263
import { SiGradle } from "react-icons/si";
254264
import LatestVersion from "../components/latest-version";
265+
import { BiSupport } from "react-icons/bi";
255266

256267
function AppleCodeBlock ({code}:{code: string}) {
257268

‎app/components/Split-media-body.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export function SplitMB({ media, title, description, direction, link, className,
6969
direction === "right" ? "md:order-1" : "md:order-2"
7070
)}
7171
>
72-
<div className="text-4xl font-bold">{title}</div>
73-
<div className="text-xl">{description}</div>
72+
<div className="text-4xl font-bold text-neutral-200">{title}</div>
73+
<div className="text-xl text-neutral-400">{description}</div>
7474
{link && <Link className="bg-neutral-200 hover:bg-neutral-300 text-neutral-800 font-semibold px-6 py-2 rounded-md" href={link.href} >{link.label}</Link>}
7575
</div>
7676
</section>

‎app/components/layout/basic-footer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default function BasicFooter () {
88
<h1>© {new Date().getFullYear()} Undefined Creations | All Rights Reserved</h1>
99
</div>
1010
<div className='flex flex-row gap-4'>
11-
<Link href={"https://discord.gg/VxJMQ24pUF"} className='flex flex-row text-violet-300 gap-2 items-center'><BsDiscord /> Discord</Link>
11+
<Link href={"https://discord.undefinedcreations.com"} className='flex flex-row text-violet-300 gap-2 items-center'><BsDiscord /> Discord</Link>
12+
<Link href={"https://discord.undefinedcreations.com"} className='flex flex-row text-neutral-800 font-semibold px-4 py-1 rounded-lg bg-neutral-300 gap-2 items-center'> Support</Link>
1213
</div>
1314
</footer>
1415
)

0 commit comments

Comments
 (0)