diff --git a/components/index/cards/project-of-the-week.js b/components/index/cards/project-of-the-week.js
new file mode 100644
index 000000000..7663a0b09
--- /dev/null
+++ b/components/index/cards/project-of-the-week.js
@@ -0,0 +1,144 @@
+import CardModel from './card-model'
+import { Badge, Box, Flex, Grid, Image, Text } from 'theme-ui'
+import Icon from '../../icon'
+import Buttons from './button'
+import { useEffect } from 'react'
+import useSWR from 'swr'
+import featuredProject from '../../../lib/featured-project.json'
+
+/** @jsxImportSource theme-ui */
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+export default function ProjectOfTheWeek() {
+ const { data, mutate } = useSWR('/api/featured-project-views', fetcher)
+
+ useEffect(() => {
+ fetch('/api/featured-project-views', { method: 'POST' }).then(() => {
+ mutate()
+ })
+ }, [mutate])
+
+ return (
+ theme.util.gx('red', 'orange'),
+ borderRadius: '24px',
+ boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
+ mb: 5,
+ maxWidth: 'layout',
+ width: '90vw',
+ mx: 'auto',
+ transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
+ '&:hover': {
+ transform: 'scale(1.0625)',
+ boxShadow: '0 12px 32px rgba(0, 0, 0, 0.15)'
+ }
+ }}
+ highlight="white"
+ visible={true}
+ >
+
+
+
+ Project of the week: {featuredProject.name}!
+
+
+
+ {featuredProject.description} Built by {featuredProject.author}, {featuredProject.age}!
+
+
+
+
+ CHECK IT OUT
+
+
+ View more projects
+
+
+
+
+
+
+
+
+
+
+ {data ? data.views : '...'} views
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/lib/featured-project.json b/lib/featured-project.json
new file mode 100644
index 000000000..d59c4d242
--- /dev/null
+++ b/lib/featured-project.json
@@ -0,0 +1,10 @@
+{
+ "enabled": true,
+ "id": "hydra",
+ "name": "Hydra",
+ "description": "An experimental Nintendo Switch emulator for macOS.",
+ "author": "SamoZ256",
+ "age": 18,
+ "url": "https://github.com/SamoZ256/hydra",
+ "image": "https://hc-cdn.hel1.your-objectstorage.com/s/v3/37cdc4369fcfe6c5d941beac8d3cea0cdaa55296_image.png"
+}
\ No newline at end of file
diff --git a/pages/api/featured-project-views.js b/pages/api/featured-project-views.js
new file mode 100644
index 000000000..6a1599568
--- /dev/null
+++ b/pages/api/featured-project-views.js
@@ -0,0 +1,18 @@
+import featuredProject from '../../lib/featured-project.json'
+
+let projectViews = {}
+
+export default function handler(req, res) {
+ const currentProjectId = featuredProject.id
+
+ if (projectViews[currentProjectId] === undefined) {
+ projectViews[currentProjectId] = 0
+ }
+
+ if (req.method === 'POST') {
+ projectViews[currentProjectId] += 1
+ return res.status(200).json({ views: projectViews[currentProjectId] })
+ } else {
+ return res.status(200).json({ views: projectViews[currentProjectId] })
+ }
+}
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 64a9769c4..8da4ecb3d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -48,6 +48,8 @@ import Aces from '../components/index/cards/aces'
import Highway from '../components/index/cards/highway'
import Shipwrecked from '../components/index/cards/shipwrecked'
import CTAS from '../components/index/ctas'
+import ProjectOfTheWeek from '../components/index/cards/project-of-the-week'
+import featuredProject from '../lib/featured-project.json'
/** @jsxImportSource theme-ui */
function Page({
@@ -89,18 +91,6 @@ function Page({
window.paper = `Welcome, intrepid hacker! We'd love to have you in our community. Get your invite at hack.af/slack. Under "Why do you want to join the Hack Club Slack?" add a 🦄 and we'll ship you some exclusive stickers! `
}, [])
- // Decide which announcement to show on the client to avoid hydration mismatches
- useEffect(() => {
- const roll = Math.floor(Math.random() * 2) + 1 // 1d2
- if (roll === 2) setAnnouncementVariant('moonshot')
- }, [])
-
- // Decide which CTA to show on the client (default to Blueprint on SSR)
- useEffect(() => {
- const roll = Math.floor(Math.random() * 2) + 1 // 1d2
- if (roll === 2) setCtaVariant('moonshot')
- }, [])
-
const easterEgg = () => {
alert('Hey, you typed the Konami Code!')
@@ -212,7 +202,7 @@ function Page({
as="header"
sx={{
bg: 'dark',
- pt: [5, 6],
+ pt: [4, 5],
pb: [2, 3],
textAlign: 'left',
position: 'relative',
@@ -225,30 +215,13 @@ function Page({
priority
gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
/>
- {announcementVariant === 'blueprint' ? (
-
- ) : (
-
- )}
@@ -322,77 +295,6 @@ function Page({
rowGap: 3
}}
>
- {/* {ctaVariant === 'blueprint' ? (
-
- ) : (
- <>
-
-
-
- )} */}
+ {featuredProject.enabled && }
-
-
-
+
+
- {}
+ { }
-
+ <>
+
+
+
+
+
-
-
-
-
-
-
-
-
- )}
+
+
+
+
+ )}
-
+