206 lines
7.8 KiB
TypeScript
206 lines
7.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Heart, Search, Filter } from "lucide-react";
|
|
import { Construction } from "lucide-react";
|
|
|
|
const MOCK_GALLERIES = [
|
|
{
|
|
id: 1,
|
|
title: "Formatura Medicina UNICAMP 2024",
|
|
category: "Medicina",
|
|
images: [
|
|
"https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800",
|
|
"https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=800",
|
|
"https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=800",
|
|
],
|
|
likes: 234,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Engenharia Civil - USP 2024",
|
|
category: "Engenharia",
|
|
images: [
|
|
"https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?w=800",
|
|
"https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=800",
|
|
"https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800",
|
|
],
|
|
likes: 189,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Direito PUC 2023",
|
|
category: "Direito",
|
|
images: [
|
|
"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800",
|
|
"https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=800",
|
|
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800",
|
|
],
|
|
likes: 312,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Arquitetura UNESP 2024",
|
|
category: "Arquitetura",
|
|
images: [
|
|
"https://images.unsplash.com/photo-1528605248644-14dd04022da1?w=800",
|
|
"https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800",
|
|
"https://images.unsplash.com/photo-1519337265831-281ec6cc8514?w=800",
|
|
],
|
|
likes: 278,
|
|
},
|
|
];
|
|
|
|
const CATEGORIES = [
|
|
"Todas",
|
|
"Medicina",
|
|
"Engenharia",
|
|
"Direito",
|
|
"Arquitetura",
|
|
"Administração",
|
|
];
|
|
|
|
export const InspirationPage: React.FC = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [selectedCategory, setSelectedCategory] = useState("Todas");
|
|
|
|
const filteredGalleries = MOCK_GALLERIES.filter((gallery) => {
|
|
const matchesSearch = gallery.title
|
|
.toLowerCase()
|
|
.includes(searchTerm.toLowerCase());
|
|
const matchesCategory =
|
|
selectedCategory === "Todas" || gallery.category === selectedCategory;
|
|
return matchesSearch && matchesCategory;
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 pt-24 pb-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-12 fade-in">
|
|
<h1 className="text-4xl sm:text-5xl font-serif font-bold text-brand-black mb-4">
|
|
Galeria de Inspiração
|
|
</h1>
|
|
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
|
|
Explore álbuns de formaturas anteriores e inspire-se para criar o
|
|
seu evento perfeito
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search and Filter */}
|
|
<div className="mb-8 space-y-4">
|
|
{/* Search Bar */}
|
|
<div className="relative max-w-2xl mx-auto">
|
|
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar por curso, universidade..."
|
|
className="w-full pl-12 pr-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-gold focus:border-transparent text-sm shadow-sm"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<div className="flex flex-wrap justify-center gap-2">
|
|
{CATEGORIES.map((category) => (
|
|
<button
|
|
key={category}
|
|
onClick={() => setSelectedCategory(category)}
|
|
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
|
selectedCategory === category
|
|
? "bg-brand-gold text-white shadow-lg scale-105"
|
|
: "bg-white text-gray-700 hover:bg-gray-50 border border-gray-200"
|
|
}`}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gallery Grid */}
|
|
{filteredGalleries.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredGalleries.map((gallery) => (
|
|
<div
|
|
key={gallery.id}
|
|
className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group"
|
|
>
|
|
{/* Main Image */}
|
|
<div className="relative h-64 overflow-hidden">
|
|
<img
|
|
src={gallery.images[0]}
|
|
alt={gallery.title}
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
{/* Category Badge */}
|
|
<div className="absolute top-3 left-3 bg-white/95 backdrop-blur-sm px-3 py-1 rounded-full">
|
|
<span className="text-xs font-semibold text-brand-gold">
|
|
{gallery.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-5">
|
|
<h3 className="text-lg font-bold text-brand-black mb-2 line-clamp-1">
|
|
{gallery.title}
|
|
</h3>
|
|
|
|
{/* Thumbnail Preview */}
|
|
<div className="flex gap-2 mb-3">
|
|
{gallery.images.slice(1, 3).map((img, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="w-16 h-16 rounded-lg overflow-hidden border border-gray-200"
|
|
>
|
|
<img
|
|
src={img}
|
|
alt=""
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
<div className="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center text-xs text-gray-500 font-medium border border-gray-200">
|
|
+12
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
|
|
<div className="flex items-center gap-2 text-gray-500">
|
|
<Heart size={16} className="text-red-400" />
|
|
<span className="text-sm font-medium">
|
|
{gallery.likes} curtidas
|
|
</span>
|
|
</div>
|
|
<button className="text-sm text-brand-gold font-semibold hover:underline">
|
|
Ver álbum →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16">
|
|
<p className="text-gray-500 text-lg">Nenhuma galeria encontrada</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Coming Soon Banner */}
|
|
<div className="mt-16 bg-gradient-to-r from-brand-purple to-brand-gold/20 rounded-2xl p-8 text-center">
|
|
<Construction className="mx-auto text-white mb-4" size={48} />
|
|
<h2 className="text-2xl font-bold text-white mb-2">
|
|
Em Breve: Mais Funcionalidades
|
|
</h2>
|
|
<p className="text-white/90 max-w-2xl mx-auto">
|
|
Estamos trabalhando para trazer mais galerias, filtros avançados e a
|
|
possibilidade de salvar seus favoritos!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|