Skip to content

Commit 1801c98

Browse files
corp-0corp-0
committed
feat: add hero image behind the call to action button
1 parent dd83f0b commit 1801c98

File tree

10 files changed

+114
-27
lines changed

10 files changed

+114
-27
lines changed

‎app/(home)/DownloadButtonClient.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const DownloadButtonClient = () => {
1515
}, []);
1616

1717
return (
18-
<div className={'flex flex-wrap justify-center mt-8 gap-4'}>
19-
<Button filled={true} text={'Download'} linkTo={downloadLink} iconRight={BiSolidDownload} />
18+
<div className={'flex flex-col lg:flex-row justify-center mt-8 gap-4'}>
19+
<Button className="shadow-2xl" filled={true} text={'Download'} linkTo={downloadLink} iconRight={BiSolidDownload} />
2020
</div>
2121
)
2222
}

‎app/(home)/HeroRandomImageClient.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use client';
2+
3+
import LayoutChildren from "../../types/layoutChildren";
4+
import {useEffect, useState} from "react";
5+
6+
const images: string[] = [
7+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/bar-engine.png",
8+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/clowns.png",
9+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/conveyor.jpg",
10+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/df.jpg",
11+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/go-outsid.png",
12+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/honk.jpg",
13+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/hugger.png",
14+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/lemons.png",
15+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/shuttlecrash.png",
16+
"https://unitystationfile.b-cdn.net/Website-Statics/heroImages/chairs.jpg",
17+
];
18+
19+
let currentIndex = 0;
20+
21+
const shuffleImages = () => {
22+
for (let i = images.length - 1; i > 0; i--) {
23+
const j = Math.floor(Math.random() * (i + 1));
24+
[images[i], images[j]] = [images[j], images[i]];
25+
}
26+
};
27+
28+
const getNextImage = () => {
29+
currentIndex = (currentIndex + 1) % images.length;
30+
return images[currentIndex];
31+
};
32+
33+
const HeroRandomImageClient = (props: LayoutChildren) => {
34+
const {children} = props;
35+
shuffleImages();
36+
const [image1, setImage1] = useState<string>(getNextImage());
37+
const [image2, setImage2] = useState<string>(getNextImage());
38+
const [showImage1, setShowImage1] = useState<boolean>(true);
39+
40+
useEffect(() => {
41+
const intervalId = setInterval(() => {
42+
setShowImage1(!showImage1);
43+
if (showImage1) {
44+
setImage2(getNextImage());
45+
} else {
46+
setImage1(getNextImage());
47+
}
48+
}, 10000);
49+
50+
return () => clearInterval(intervalId);
51+
}, [showImage1]);
52+
53+
return (
54+
<div className="relative w-full p-20 overflow-hidden">
55+
<div className="absolute inset-0 z-0">
56+
<div className={`absolute inset-0 bg-cover bg-center bg-no-repeat filter blur-xs transition-opacity duration-1000 ease-in-out ${showImage1 ? 'opacity-100' : 'opacity-0'}`} style={{backgroundImage: `url(${image1})`, backgroundPosition: `center`}}></div>
57+
<div className={`absolute inset-0 bg-cover bg-center bg-no-repeat filter blur-xs transition-opacity duration-1000 ease-in-out ${showImage1 ? 'opacity-0' : 'opacity-100'}`} style={{backgroundImage: `url(${image2})`, backgroundPosition: `center`}}></div>
58+
<div className="absolute inset-0 bg-black opacity-50 "></div>
59+
</div>
60+
<div className="relative z-10">
61+
{children}
62+
</div>
63+
</div>
64+
)
65+
}
66+
67+
export default HeroRandomImageClient;

‎app/(home)/LandingButtonsServer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import {DISCORD_INVITE_URL, GITHUB_URL, PATREON_URL} from "../../utils/urlContan
55

66
const LandingButtonsServer = () => {
77
return (
8-
<div className={'flex flex-wrap justify-center mt-8 gap-4'}>
9-
<Button filled={false} text={'Github'} linkTo={GITHUB_URL}/>
10-
<Button filled={false} text={'Discord'} linkTo={DISCORD_INVITE_URL}/>
11-
<Button filled={false} text={'Patreon'} linkTo={PATREON_URL}/>
8+
<div className={'flex flex-col lg:flex-row justify-center mt-8 gap-4'}>
9+
<Button className="shadow-2xl" filled={false} text={'Github'} linkTo={GITHUB_URL}/>
10+
<Button className="shadow-2xl" filled={false} text={'Discord'} linkTo={DISCORD_INVITE_URL}/>
11+
<Button className="shadow-2xl" filled={false} text={'Patreon'} linkTo={PATREON_URL}/>
1212
</div>
1313
)
1414
}

‎app/(home)/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ContactInformation from "./contactInformation";
1010
import FeaturesList, {FeatureData} from "./featuresList";
1111
import React from "react";
1212
import {RiGamepadLine, RiRefreshLine, RiRocket2Line, RiTeamLine} from "react-icons/ri";
13+
import HeroRandomImageClient from "./HeroRandomImageClient";
1314

1415
const mainText = "Welcome to Unitystation!";
1516
const secondaryText = "Free and open-source remake of the cult classic Space Station 13, made in Unity Engine.";
@@ -56,11 +57,11 @@ const HomePage: () => Promise<JSX.Element> = async () => {
5657
return (
5758
<>
5859
<PageSection className="gap-16">
59-
<div>
60+
<HeroRandomImageClient>
6061
<LandingText mainText={mainText} secondaryText={secondaryText}/>
6162
<DownloadButtonClient/>
6263
<LandingButtonsServer/>
63-
</div>
64+
</HeroRandomImageClient>
6465
<FeaturesList features={features}/>
6566
</PageSection>
6667
<PageSection verticalCenter={false}>

‎app/clown/clown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Clown = () => {
5757
if (timesClicked < 500) {
5858
return (
5959
<picture>
60-
<img className={"clown-img"}
60+
<img className={"clown-img z-20"}
6161
onClick={handleClick}
6262
src="/clown/clown.png"
6363
alt="me"
@@ -88,7 +88,7 @@ const Clown = () => {
8888
});
8989

9090
return (
91-
<div className={'-z-10'}>
91+
<div>
9292
{renderTimesClicked()}
9393
<audio ref={audioRef} src={"/clown/bikehorn.ogg"}></audio>
9494
{renderClown()}

‎app/common/uiLibrary/button.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
11
import {IconType} from "react-icons";
2+
import classNames from "classnames";
23

34
type ButtonProps = {
45
filled: boolean,
56
text: string,
67
linkTo: string,
78
iconLeft?: IconType,
8-
iconRight?: IconType
9+
iconRight?: IconType,
10+
className?: string
911
}
1012

1113
const Button = (props: ButtonProps) => {
1214
const {filled, text, linkTo, iconLeft: IconLeft, iconRight: IconRight} = props;
1315
const filledClass = 'bg-gray-800 border-2 border-transparent text-white text-md mr-4 hover:bg-gray-900';
14-
const outlineClass = 'bg-transparent border-2 border-gray-800 text-white text-md hover:bg-gray-800';
16+
const outlineClass = 'bg-gray-800 bg-opacity-30 border-2 border-gray-800 text-white text-md hover:bg-gray-800';
17+
const classes = classNames(
18+
'uppercase py-2 px-4 flex justify-center items-center',
19+
filled ? filledClass : outlineClass,
20+
props.className
21+
)
1522

1623
return (
17-
<a href={linkTo} className={`uppercase py-2 px-4 flex justify-center items-center ${filled ? filledClass : outlineClass}` }>
24+
<a
25+
href={linkTo}
26+
className={classes}>
1827
{IconLeft && <IconLeft className="mr-3 w-7 h-7" />}
1928
<div>
2029
{text}

‎app/globals.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,13 @@ a {
2323
box-sizing: border-box;
2424
}
2525

26-
26+
.inset-shadow::after {
27+
content: '';
28+
position: absolute;
29+
top: 0;
30+
right: 0;
31+
bottom: 0;
32+
left: 0;
33+
box-shadow: var(--tw-shadow);
34+
pointer-events: none;
35+
}

‎app/layout.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Clown from "./clown/clown";
44
import {Metadata} from "next";
55
import DefaultNavbar from "./common/defaultNavbar";
66

7-
export const metadata : Metadata = {
7+
export const metadata: Metadata = {
88
title: 'Unitystation - The Space Station 13 Remake Made in Unity',
99
keywords: [
1010
'unitystation',
@@ -21,8 +21,8 @@ export const metadata : Metadata = {
2121
description: 'Unitystation is a free and open-source chaotic multiplayer role-playing and simulation game made in Unity. Remake of the cult classic Space Station 13.',
2222
colorScheme: 'dark',
2323
authors: {name: 'Unitystation Team', url: 'https://github.com/unitystation'},
24-
viewport: { width: "device-width", initialScale: 1 },
25-
robots: { follow: true, index: true },
24+
viewport: {width: "device-width", initialScale: 1},
25+
robots: {follow: true, index: true},
2626
openGraph: {
2727
type: 'website',
2828
locale: 'en_US',
@@ -33,21 +33,19 @@ export const metadata : Metadata = {
3333
{
3434
url: 'https://unitystationfile.b-cdn.net/Branding/US13_OG_image_preview_1.png',
3535
},
36-
]
36+
]
3737
}
3838
}
3939

4040
export default function RootLayout({children,}: { children: React.ReactNode; }) {
4141

4242
return (
4343
<html>
44-
<body className="dark">
45-
<Clown />
46-
<>
47-
<DefaultNavbar/>
48-
{children}
49-
</>
50-
</body>
44+
<body className="dark">
45+
<Clown/>
46+
<DefaultNavbar/>
47+
{children}
48+
</body>
5149
</html>
5250
)
5351
}

‎tailwind.config.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ module.exports = {
1616
center: true,
1717
},
1818
backgroundImage: {
19-
"layer1" : "url('../public/background/layer1.png')",
19+
"layer1": "url('../public/background/layer1.png')",
20+
},
21+
blur: {
22+
'xs': '2px',
23+
'xxs': '1px',
2024
}
2125
},
2226
},

‎utils/platform.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ function getUserPlatform(): string | undefined {
55
const parser = new UAParser();
66
const result = parser.getResult();
77
const { os } = result;
8-
console.log(result);
98
let minifiedPlatform: string | undefined;
109

1110
switch (os.name?.toLowerCase()) {

0 commit comments

Comments
 (0)