mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: homepage ads
This commit is contained in:
TrèsAbhi committed
1 parent
57fa29cc6e
commit
9f38f16d2b
5 files changed
+281
-218
No files matched your search
@@ -23,11 +23,13 @@ export function PatreonPlug() {
|
||||
py="8"
|
||||
>
|
||||
<Flex gap="1" align="center">
|
||||
<Text size="4">Active Patreon supports go ad-free</Text>
|
||||
<Text size="4" align="center">
|
||||
Active Patreon supports go ad-free
|
||||
</Text>
|
||||
<CheckIcon width="1em" height="1em" />
|
||||
</Flex>
|
||||
|
||||
<Flex gap="2">
|
||||
<Flex gap="2" wrap="wrap" justify="center">
|
||||
<Link href="https://www.patreon.com/tresabhi" target="_blank">
|
||||
<Button>
|
||||
<PatreonIcon width={15} height={15} /> Support on Patreon
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FlexProps,
|
||||
Heading,
|
||||
Link,
|
||||
Text,
|
||||
} from '@radix-ui/themes';
|
||||
import { Tool } from '../../constants/tools';
|
||||
import { ImgurSize, imgur } from '../../core/blitzkit/imgur';
|
||||
|
||||
type ToolCardProps = FlexProps & {
|
||||
tool: Tool;
|
||||
};
|
||||
|
||||
export function ToolCard({ tool, style, ...props }: ToolCardProps) {
|
||||
const size = tool.significant
|
||||
? ImgurSize.HugeThumbnail
|
||||
: ImgurSize.LargeThumbnail;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
||||
...style,
|
||||
}}
|
||||
flexGrow={tool.significant ? undefined : '1'}
|
||||
flexBasis={
|
||||
tool.significant
|
||||
? undefined
|
||||
: {
|
||||
initial: undefined,
|
||||
sm: '0',
|
||||
}
|
||||
}
|
||||
{...props}
|
||||
>
|
||||
<Link
|
||||
href={`/tools/${tool.id}`}
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flexGrow="1"
|
||||
style={{
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
<Flex
|
||||
px={{
|
||||
initial: '6',
|
||||
md: tool.significant ? '8' : '6',
|
||||
}}
|
||||
py={{
|
||||
initial: '4',
|
||||
sm: tool.significant ? '6' : '4',
|
||||
}}
|
||||
gap="4"
|
||||
align="center"
|
||||
justify="between"
|
||||
width="100%"
|
||||
direction={{
|
||||
initial: 'column',
|
||||
sm: 'row',
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
backdropFilter: 'blur(64px)',
|
||||
WebkitBackdropFilter: 'blur(64px)',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'start',
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '6',
|
||||
sm: tool.significant ? '7' : '5',
|
||||
}}
|
||||
weight="medium"
|
||||
>
|
||||
{tool.title}
|
||||
</Heading>
|
||||
<Text
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '3',
|
||||
sm: tool.significant ? '4' : '3',
|
||||
}}
|
||||
color="gray"
|
||||
>
|
||||
{tool.description}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Button
|
||||
size={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '3' : undefined,
|
||||
}}
|
||||
color={tool.button.color}
|
||||
style={{
|
||||
cursor: 'inherit',
|
||||
}}
|
||||
>
|
||||
{tool.button.text}
|
||||
<CaretRightIcon />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
+50
-132
@@ -1,11 +1,19 @@
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import { Box, Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
|
||||
import Link from 'next/link';
|
||||
import PageWrapper from '../components/PageWrapper';
|
||||
import { TOOLS } from '../constants/tools';
|
||||
import { ImgurSize, imgur } from '../core/blitzkit/imgur';
|
||||
'use client';
|
||||
|
||||
import { Box, Flex } from '@radix-ui/themes';
|
||||
import { Ad, AdType } from '../components/Ad';
|
||||
import { AdMidSectionResponsive } from '../components/AdMidSectionResponsive';
|
||||
import {
|
||||
compareTool,
|
||||
discordTool,
|
||||
moreTool,
|
||||
ratingTool,
|
||||
sessionTool,
|
||||
tankopediaTool,
|
||||
} from '../constants/tools';
|
||||
import { Hero } from './components/Hero';
|
||||
import { PatreonPlug } from './components/PatreonPlug';
|
||||
import { ToolCard } from './components/ToolCard';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
@@ -14,136 +22,46 @@ export default function Page() {
|
||||
|
||||
<PatreonPlug />
|
||||
|
||||
<PageWrapper size={1028}>
|
||||
<Grid
|
||||
gap="4"
|
||||
columns={{
|
||||
initial: undefined,
|
||||
sm: '2',
|
||||
<Flex p="4" justify="between" gap="4">
|
||||
<Ad
|
||||
type={AdType.WideSkyscraperVerticalPurple}
|
||||
display={{
|
||||
initial: 'none',
|
||||
lg: 'block',
|
||||
}}
|
||||
flow="row-dense"
|
||||
>
|
||||
{TOOLS.map((tool) => {
|
||||
const size = tool.significant
|
||||
? ImgurSize.HugeThumbnail
|
||||
: ImgurSize.LargeThumbnail;
|
||||
/>
|
||||
|
||||
return (
|
||||
<Flex
|
||||
key={tool.id}
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
||||
}}
|
||||
gridColumn={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '1 / 3' : undefined,
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={tool.href ?? `/tools/${tool.id}`}
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flexGrow="1"
|
||||
style={{
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
<Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
|
||||
<ToolCard tool={tankopediaTool} />
|
||||
|
||||
<Flex
|
||||
px={{
|
||||
initial: '6',
|
||||
md: tool.significant ? '8' : '6',
|
||||
}}
|
||||
py={{
|
||||
initial: '4',
|
||||
sm: tool.significant ? '6' : '4',
|
||||
}}
|
||||
gap="4"
|
||||
align="center"
|
||||
justify="between"
|
||||
width="100%"
|
||||
direction={{
|
||||
initial: 'column',
|
||||
sm: 'row',
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
backdropFilter: 'blur(64px)',
|
||||
WebkitBackdropFilter: 'blur(64px)',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'start',
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '6',
|
||||
sm: tool.significant ? '7' : '5',
|
||||
}}
|
||||
weight="medium"
|
||||
>
|
||||
{tool.title}
|
||||
</Heading>
|
||||
<Text
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '3',
|
||||
sm: tool.significant ? '4' : '3',
|
||||
}}
|
||||
color="gray"
|
||||
>
|
||||
{tool.description}
|
||||
</Text>
|
||||
</Flex>
|
||||
<AdMidSectionResponsive />
|
||||
|
||||
<Button
|
||||
size={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '3' : undefined,
|
||||
}}
|
||||
color={tool.button.color}
|
||||
style={{
|
||||
cursor: 'inherit',
|
||||
}}
|
||||
>
|
||||
{tool.button.text}
|
||||
<CaretRightIcon />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
</PageWrapper>
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={compareTool} />
|
||||
<ToolCard tool={sessionTool} />
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={ratingTool} />
|
||||
<ToolCard tool={discordTool} />
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={moreTool} />
|
||||
<Box flexGrow="1" flexBasis="0" />
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Ad
|
||||
type={AdType.WideSkyscraperVerticalPurple}
|
||||
display={{
|
||||
initial: 'none',
|
||||
md: 'block',
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<AdMidSectionResponsive />
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
</>
|
||||
|
||||
+85
-82
@@ -1,7 +1,7 @@
|
||||
import { Button } from '@radix-ui/themes';
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
interface Tool {
|
||||
export interface Tool {
|
||||
id: string;
|
||||
image: string;
|
||||
title: string;
|
||||
@@ -16,86 +16,89 @@ interface Tool {
|
||||
significant?: boolean;
|
||||
}
|
||||
|
||||
export const tankopediaTool: Tool = {
|
||||
id: 'tankopedia',
|
||||
title: 'Tankopedia',
|
||||
description: 'Blitz tank encyclopedia',
|
||||
pageDescription:
|
||||
'Statistics, armor, and more for all tanks in World of Tanks Blitz',
|
||||
image: 'D8j6GZx',
|
||||
button: {
|
||||
text: 'Find your tank',
|
||||
color: 'purple',
|
||||
},
|
||||
significant: true,
|
||||
};
|
||||
|
||||
export const ratingTool: Tool = {
|
||||
id: 'rating',
|
||||
title: 'Rating',
|
||||
description: 'Full rating leaderboard',
|
||||
pageDescription:
|
||||
'Live and archived full rating leaderboard for World of Tanks Blitz',
|
||||
image: 'WEyMZH3',
|
||||
button: {
|
||||
text: 'View leaderboard',
|
||||
color: 'orange',
|
||||
},
|
||||
};
|
||||
|
||||
export const compareTool: Tool = {
|
||||
id: 'compare',
|
||||
title: 'Compare',
|
||||
description: 'Compare tank statistics',
|
||||
pageDescription:
|
||||
'Compare tanks statistics and loadouts in World of Tanks Blitz',
|
||||
image: 'O6VNl6e',
|
||||
button: {
|
||||
text: 'Compare tanks',
|
||||
color: 'crimson',
|
||||
},
|
||||
};
|
||||
|
||||
export const sessionTool: Tool = {
|
||||
// TODO: rename to tracker
|
||||
id: 'session',
|
||||
title: 'Session',
|
||||
description: 'Live session stats',
|
||||
pageDescription:
|
||||
'Track your stats in real time as you play World of Tanks Blitz',
|
||||
image: 'HdG9sTf',
|
||||
button: {
|
||||
text: 'Start tracking',
|
||||
color: 'blue',
|
||||
},
|
||||
};
|
||||
|
||||
export const discordTool: Tool = {
|
||||
id: 'discord',
|
||||
title: 'Discord bot',
|
||||
description: 'Stats right in Discord',
|
||||
href: 'https://discord.com/application-directory/1097673957865443370',
|
||||
image: '0bWE5hC',
|
||||
button: {
|
||||
text: 'Install now',
|
||||
color: 'indigo',
|
||||
},
|
||||
};
|
||||
|
||||
export const moreTool: Tool = {
|
||||
id: 'more',
|
||||
title: 'More coming soon',
|
||||
description: "What we're making",
|
||||
href: 'https://discord.gg/nDt7AjGJQH',
|
||||
image: '1nPm6VI',
|
||||
button: {
|
||||
text: 'Join Discord',
|
||||
color: 'indigo',
|
||||
},
|
||||
};
|
||||
|
||||
export const TOOLS: Tool[] = [
|
||||
// {
|
||||
// id: 'statistics',
|
||||
// title: 'Statistics',
|
||||
// description: 'Periodical player statistics',
|
||||
// pageDescription:
|
||||
// 'Periodical player statistics and tanks played in World of Tanks Blitz',
|
||||
// disabled: true,
|
||||
// image: '8gJGkKP'
|
||||
// },
|
||||
{
|
||||
id: 'tankopedia',
|
||||
title: 'Tankopedia',
|
||||
description: 'Blitz tank encyclopedia',
|
||||
pageDescription:
|
||||
'Statistics, armor, and more for all tanks in World of Tanks Blitz',
|
||||
image: 'D8j6GZx',
|
||||
button: {
|
||||
text: 'Find your tank',
|
||||
color: 'purple',
|
||||
},
|
||||
significant: true,
|
||||
},
|
||||
{
|
||||
id: 'rating',
|
||||
title: 'Rating',
|
||||
description: 'Full rating leaderboard',
|
||||
pageDescription:
|
||||
'Live and archived full rating leaderboard for World of Tanks Blitz',
|
||||
image: 'WEyMZH3',
|
||||
button: {
|
||||
text: 'View leaderboard',
|
||||
color: 'orange',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'compare',
|
||||
title: 'Compare',
|
||||
description: 'Compare tank statistics',
|
||||
pageDescription:
|
||||
'Compare tanks statistics and loadouts in World of Tanks Blitz',
|
||||
image: 'O6VNl6e',
|
||||
button: {
|
||||
text: 'Compare tanks',
|
||||
color: 'crimson',
|
||||
},
|
||||
},
|
||||
{
|
||||
// TODO: rename to tracker
|
||||
id: 'session',
|
||||
title: 'Session',
|
||||
description: 'Live session stats',
|
||||
pageDescription:
|
||||
'Track your stats in real time as you play World of Tanks Blitz',
|
||||
image: 'HdG9sTf',
|
||||
button: {
|
||||
text: 'Start tracking',
|
||||
color: 'blue',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'discord',
|
||||
title: 'Discord bot',
|
||||
description: 'Stats right in Discord',
|
||||
href: 'https://discord.com/application-directory/1097673957865443370',
|
||||
image: '0bWE5hC',
|
||||
button: {
|
||||
text: 'Install now',
|
||||
color: 'indigo',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'more',
|
||||
title: 'More coming soon',
|
||||
description: "What we're making",
|
||||
href: 'https://discord.gg/nDt7AjGJQH',
|
||||
image: '1nPm6VI',
|
||||
button: {
|
||||
text: 'Join Discord',
|
||||
color: 'indigo',
|
||||
},
|
||||
},
|
||||
tankopediaTool,
|
||||
ratingTool,
|
||||
compareTool,
|
||||
sessionTool,
|
||||
discordTool,
|
||||
moreTool,
|
||||
];
|
||||
@@ -2,8 +2,6 @@ import { use } from 'react';
|
||||
import { useApp } from '../stores/app';
|
||||
|
||||
export function useAdExempt() {
|
||||
return true;
|
||||
|
||||
const patreon = useApp((state) => state.logins.patreon);
|
||||
|
||||
if (!patreon) return false;
|
||||
|
||||
Reference in new issue
Block a user