From 9f38f16d2b768b5667fa90cf7f831cc76c30729d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 15 Jun 2024 13:51:42 -0500 Subject: [PATCH] feat: homepage ads --- src/app/components/PatreonPlug.tsx | 6 +- src/app/components/ToolCard.tsx | 142 ++++++++++++++++++++++ src/app/page.tsx | 182 ++++++++--------------------- src/constants/tools.tsx | 167 +++++++++++++------------- src/hooks/useAdExempt.ts | 2 - 5 files changed, 281 insertions(+), 218 deletions(-) create mode 100644 src/app/components/ToolCard.tsx diff --git a/src/app/components/PatreonPlug.tsx b/src/app/components/PatreonPlug.tsx index 527eba5b1..e36c26639 100644 --- a/src/app/components/PatreonPlug.tsx +++ b/src/app/components/PatreonPlug.tsx @@ -23,11 +23,13 @@ export function PatreonPlug() { py="8" > - Active Patreon supports go ad-free + + Active Patreon supports go ad-free + - + + + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 6bbbc6b97..86081fa11 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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() { - - + - {TOOLS.map((tool) => { - const size = tool.significant - ? ImgurSize.HugeThumbnail - : ImgurSize.LargeThumbnail; + /> - return ( - - - + + - - - - {tool.title} - - - {tool.description} - - + - - - - - ); - })} - - + + + + + + + + + + + + + + + + + + + +
diff --git a/src/constants/tools.tsx b/src/constants/tools.tsx index dd5821259..0df8a2e02 100644 --- a/src/constants/tools.tsx +++ b/src/constants/tools.tsx @@ -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, ]; diff --git a/src/hooks/useAdExempt.ts b/src/hooks/useAdExempt.ts index 77617de48..1aae3da9a 100644 --- a/src/hooks/useAdExempt.ts +++ b/src/hooks/useAdExempt.ts @@ -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;