Build GameForgeViewPortfolio - Released games showcase with stats
cgen-d31d2feaad3c4c88a95c4c9d9b62641d
This commit is contained in:
Builder.io
parent
2661b3e652
commit
9a76f9561b
1 changed files with 123 additions and 199 deletions
|
|
@ -1,95 +1,55 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useState } from "react";
|
||||
import { Gamepad2, Filter, Star, Users, TrendingUp } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Star, Download, Calendar, Users, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface Game {
|
||||
id: number;
|
||||
title: string;
|
||||
creator: string;
|
||||
genre: "Action" | "Puzzle" | "Adventure" | "RPG" | "Casual";
|
||||
image: string;
|
||||
plays: number;
|
||||
rating: number;
|
||||
releaseDate: string;
|
||||
}
|
||||
|
||||
const FEATURED_GAMES: Game[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Pixel Quest Adventure",
|
||||
creator: "Alex Dev Studios",
|
||||
genre: "Adventure",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Pixel+Quest",
|
||||
plays: 15400,
|
||||
rating: 4.8,
|
||||
releaseDate: "2024-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Logic Maze Pro",
|
||||
creator: "Puzzle Labs",
|
||||
genre: "Puzzle",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Logic+Maze",
|
||||
plays: 12300,
|
||||
rating: 4.6,
|
||||
releaseDate: "2024-01",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Battle Royale X",
|
||||
creator: "Epic Creators",
|
||||
genre: "Action",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Battle+Royale",
|
||||
plays: 28900,
|
||||
rating: 4.9,
|
||||
releaseDate: "2023-12",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Mystic Realms RPG",
|
||||
creator: "Story Crafters",
|
||||
genre: "RPG",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Mystic+Realms",
|
||||
plays: 9200,
|
||||
rating: 4.7,
|
||||
releaseDate: "2023-12",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Casual Match",
|
||||
creator: "Fun Games Co",
|
||||
genre: "Casual",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Casual+Match",
|
||||
plays: 45600,
|
||||
rating: 4.5,
|
||||
releaseDate: "2023-11",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Speedrun Challenge",
|
||||
creator: "Speed Demons",
|
||||
genre: "Action",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Speedrun",
|
||||
plays: 18700,
|
||||
rating: 4.8,
|
||||
releaseDate: "2023-11",
|
||||
},
|
||||
];
|
||||
|
||||
const GENRES = ["All", "Action", "Puzzle", "Adventure", "RPG", "Casual"];
|
||||
const SORT_OPTIONS = ["Trending", "Most Played", "Highest Rated", "Newest"];
|
||||
|
||||
export default function GameForgeViewPortfolio() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedGenre, setSelectedGenre] = useState("All");
|
||||
const [sortBy, setSortBy] = useState("Trending");
|
||||
|
||||
const filteredGames = FEATURED_GAMES.filter(
|
||||
(game) => selectedGenre === "All" || game.genre === selectedGenre
|
||||
);
|
||||
const games = [
|
||||
{
|
||||
title: "Battle Royale X",
|
||||
releaseDate: "December 2024",
|
||||
genre: "Action",
|
||||
players: "50K+",
|
||||
rating: 4.7,
|
||||
downloads: "145K",
|
||||
revenue: "$85K",
|
||||
team: "10 devs, 2 designers",
|
||||
},
|
||||
{
|
||||
title: "Casual Match",
|
||||
releaseDate: "November 2024",
|
||||
genre: "Puzzle",
|
||||
players: "100K+",
|
||||
rating: 4.5,
|
||||
downloads: "320K",
|
||||
revenue: "$125K",
|
||||
team: "6 devs, 1 designer",
|
||||
},
|
||||
{
|
||||
title: "Speedrun Challenge",
|
||||
releaseDate: "October 2024",
|
||||
genre: "Action",
|
||||
players: "35K+",
|
||||
rating: 4.8,
|
||||
downloads: "98K",
|
||||
revenue: "$52K",
|
||||
team: "8 devs, 1 designer",
|
||||
},
|
||||
{
|
||||
title: "Story Adventure",
|
||||
releaseDate: "September 2024",
|
||||
genre: "Adventure",
|
||||
players: "28K+",
|
||||
rating: 4.6,
|
||||
downloads: "76K",
|
||||
revenue: "$38K",
|
||||
team: "12 devs, 3 designers",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
|
|
@ -101,8 +61,7 @@ export default function GameForgeViewPortfolio() {
|
|||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative py-16">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -112,139 +71,104 @@ export default function GameForgeViewPortfolio() {
|
|||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<div className="mb-12">
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
|
||||
<Gamepad2 className="h-4 w-4 mr-2" />
|
||||
Game Gallery
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Discover Amazing Games
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80">
|
||||
Explore games built by our community using GameForge
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters & Sorting */}
|
||||
<div className="flex flex-col md:flex-row gap-6 items-stretch">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Filter className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm font-medium text-green-300">
|
||||
Genre
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{GENRES.map((genre) => (
|
||||
<Button
|
||||
key={genre}
|
||||
variant={
|
||||
selectedGenre === genre ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => setSelectedGenre(genre)}
|
||||
className={
|
||||
selectedGenre === genre
|
||||
? "bg-green-400 text-black hover:bg-green-300"
|
||||
: "border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
}
|
||||
>
|
||||
{genre}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-48">
|
||||
<label className="text-sm font-medium text-green-300 block mb-2">
|
||||
Sort by
|
||||
</label>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-green-950/40 border border-green-400/30 rounded text-green-300 text-sm focus:outline-none focus:border-green-400/60"
|
||||
>
|
||||
{SORT_OPTIONS.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
|
||||
Released Games
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-3xl">
|
||||
Games shipped by GameForge. See player stats, revenue, and team sizes from our monthly releases.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Games Grid */}
|
||||
<section className="py-12">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredGames.map((game) => (
|
||||
<div
|
||||
key={game.id}
|
||||
className="group bg-green-950/20 border border-green-400/30 rounded-lg overflow-hidden hover:border-green-400/60 transition-all hover:shadow-lg hover:shadow-green-500/20"
|
||||
<div className="space-y-6">
|
||||
{games.map((game, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all"
|
||||
>
|
||||
<div className="relative overflow-hidden h-48 bg-gradient-to-b from-green-500/20 to-transparent">
|
||||
<img
|
||||
src={game.image}
|
||||
alt={game.title}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className="bg-green-400/80 text-black">
|
||||
{game.genre}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{game.title}
|
||||
</h3>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
|
||||
{game.genre}
|
||||
</Badge>
|
||||
<p className="text-xs text-green-200/60 mt-2">
|
||||
{game.releaseDate}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-3">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{game.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/60">
|
||||
by {game.creator}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
PLAYERS
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300">
|
||||
{game.players}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">
|
||||
active
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-green-300/70 pt-2 border-t border-green-400/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1">
|
||||
<Gamepad2 className="h-3 w-3" />
|
||||
{(game.plays / 1000).toFixed(1)}K
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Star className="h-3 w-3 fill-green-400 text-green-400" />
|
||||
{game.rating}
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
RATING
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300 flex items-center gap-1">
|
||||
{game.rating} <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">
|
||||
{game.downloads} downloads
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
REVENUE
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300">
|
||||
{game.revenue}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">
|
||||
{game.team}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
Details →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-green-400 text-black hover:bg-green-300"
|
||||
size="sm"
|
||||
>
|
||||
Play Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Submit CTA */}
|
||||
<section className="py-16 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Built Something Amazing?
|
||||
Games in Development
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Submit your game to our gallery and showcase your work to
|
||||
thousands of players.
|
||||
View the current production pipeline and upcoming releases.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
Submit Your Game
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => navigate("/gameforge/start-building")}
|
||||
>
|
||||
View Pipeline
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue