generated from Nicholai/astro-template
212 lines
12 KiB
TypeScript
212 lines
12 KiB
TypeScript
|
||
import React, { useState } from 'react';
|
||
import { Publication, PublicationType } from '../types';
|
||
import { Download, BookOpen, Star, Filter } from 'lucide-react';
|
||
import { Reveal } from './Reveal';
|
||
|
||
interface PublicationsProps {
|
||
t: any;
|
||
}
|
||
|
||
const SAMPLE_PUBLICATIONS: Publication[] = [
|
||
{
|
||
id: '1',
|
||
title: 'KAMPÜS CADILARI FANZİN #12',
|
||
type: 'FANZIN',
|
||
date: 'OCAK 2025',
|
||
coverUrl: 'https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400',
|
||
description: 'Yeni dönem, yeni mücadeleler. Kampüslerdeki cadı avına karşı sesimizi yükseltiyoruz.',
|
||
},
|
||
{
|
||
id: '2',
|
||
title: 'GÜVENLİ KAMPÜS REHBERİ',
|
||
type: 'BROSUR',
|
||
date: 'ARALIK 2024',
|
||
coverUrl: 'https://images.unsplash.com/photo-1535905557558-afc4877a26fc?auto=format&fit=crop&q=80&w=400',
|
||
description: 'Cinsel taciz ve saldırıya karşı haklarımız, başvuru mekanizmaları ve dayanışma ağları.',
|
||
},
|
||
{
|
||
id: '3',
|
||
title: 'AKADEMİDE CİNSİYETÇİLİK RAPORU',
|
||
type: 'RAPOR',
|
||
date: 'KASIM 2024',
|
||
coverUrl: 'https://images.unsplash.com/photo-1555449377-a8b411132a58?auto=format&fit=crop&q=80&w=400',
|
||
description: 'Türkiye genelinde 50 üniversitede yapılan araştırmanın çarpıcı sonuçları.',
|
||
},
|
||
{
|
||
id: '4',
|
||
title: '8 MART ÖZEL SAYI',
|
||
type: 'FANZIN',
|
||
date: 'MART 2024',
|
||
coverUrl: 'https://images.unsplash.com/photo-1532012197267-da84d127e765?auto=format&fit=crop&q=80&w=400',
|
||
description: 'Geceyi de, sokakları da, meydanları da istiyoruz! Feminist isyan her yerde.',
|
||
},
|
||
{
|
||
id: '5',
|
||
title: 'CADI SÖZLÜĞÜ',
|
||
type: 'KITAP',
|
||
date: 'EYLÜL 2023',
|
||
coverUrl: 'https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&q=80&w=400',
|
||
description: 'Feminizmin temel kavramları, bizden kelimeler ve cadıların dili.',
|
||
},
|
||
];
|
||
|
||
export const Publications: React.FC<PublicationsProps> = ({ t }) => {
|
||
const [filter, setFilter] = useState<PublicationType | 'ALL'>('ALL');
|
||
|
||
const filteredPublications = filter === 'ALL'
|
||
? SAMPLE_PUBLICATIONS
|
||
: SAMPLE_PUBLICATIONS.filter(p => p.type === filter);
|
||
|
||
return (
|
||
<div className="bg-brand-lilac min-h-screen pt-32 pb-32">
|
||
{/* Background Decoration */}
|
||
<div className="fixed inset-0 pointer-events-none opacity-20 bg-[url('https://www.transparenttextures.com/patterns/dust.png')]"></div>
|
||
|
||
{/* --- HEADER SECTION --- */}
|
||
<div className="max-w-7xl mx-auto px-6 lg:px-12 mb-20 relative z-10">
|
||
<Reveal>
|
||
<div className="flex flex-col items-start gap-6">
|
||
<div className="bg-brand-deep text-white px-8 py-4 transform -skew-x-12 inline-block shadow-[12px_12px_0px_#6B2C91] border-4 border-white">
|
||
<h1 className="text-6xl md:text-9xl font-display font-bold uppercase tracking-tighter transform skew-x-12">
|
||
{t.publications.header}
|
||
</h1>
|
||
</div>
|
||
<p className="text-xl md:text-2xl font-medium text-brand-deep max-w-2xl mt-4 bg-white/50 p-4 rounded-xl border border-brand-deep/10 backdrop-blur-sm">
|
||
Kampüs Cadıları'nın ürettiği tüm fanzin, broşür, rapor ve kitaplara buradan ulaşabilir, dijital kopyalarını indirebilirsiniz.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* --- FEATURED SECTION --- */}
|
||
<div className="max-w-7xl mx-auto px-6 lg:px-12 mb-24 relative z-10">
|
||
<div className="bg-white border-4 border-brand-deep rounded-[2rem] p-6 md:p-12 shadow-[20px_20px_0px_#ED1C24] overflow-hidden relative">
|
||
<div className="absolute top-0 right-0 w-64 h-64 bg-brand-lilac rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/2"></div>
|
||
|
||
<div className="flex flex-col md:flex-row gap-12 items-center relative z-10">
|
||
<div className="w-full md:w-1/2">
|
||
<div className="relative group">
|
||
<div className="absolute inset-0 bg-brand-deep rounded-xl transform rotate-3 transition-transform group-hover:rotate-6"></div>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1621351183012-e2f9972dd9bf?auto=format&fit=crop&q=80&w=800"
|
||
alt="Featured Zine"
|
||
className="relative rounded-xl border-4 border-brand-deep shadow-lg transform -rotate-2 transition-transform group-hover:rotate-0 w-full h-96 object-cover"
|
||
/>
|
||
<div className="absolute top-4 left-4">
|
||
<span className="bg-brand-red text-white px-4 py-1 font-bold font-marker tracking-widest text-lg border-2 border-brand-deep shadow-[4px_4px_0px_#2D0F41] rounded-full rotate-[-5deg] inline-block">
|
||
{t.publications.featured}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-full md:w-1/2 space-y-8">
|
||
<h2 className="text-5xl md:text-7xl font-display font-bold text-brand-deep uppercase leading-[0.9]">
|
||
KAMPÜS CADILARI<br/>
|
||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-purple to-brand-red">FANZİN #13</span>
|
||
</h2>
|
||
<p className="text-xl text-gray-600 font-medium leading-relaxed">
|
||
Yeni sayımızda "Kampüslerde Barınma Krizi" dosyasını açıyoruz. Yurtlardaki niteliksiz koşullar, fahiş kiralar ve barınma hakkımız üzerine sözümüz var.
|
||
</p>
|
||
<div className="flex flex-wrap gap-4">
|
||
<button className="bg-brand-deep text-white px-8 py-4 font-bold text-xl uppercase tracking-wider flex items-center gap-3 hover:bg-brand-purple transition-all shadow-[8px_8px_0px_rgba(0,0,0,0.2)] hover:translate-y-1 hover:shadow-none rounded-lg">
|
||
<Download size={24} />
|
||
{t.publications.download}
|
||
</button>
|
||
<button className="bg-transparent border-4 border-brand-deep text-brand-deep px-8 py-4 font-bold text-xl uppercase tracking-wider flex items-center gap-3 hover:bg-brand-lilac transition-all rounded-lg">
|
||
<BookOpen size={24} />
|
||
İNCELE
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* --- FILTERS --- */}
|
||
<div className="max-w-7xl mx-auto px-6 lg:px-12 mb-12 sticky top-24 z-30">
|
||
<div className="flex flex-wrap justify-center gap-4 bg-white/80 backdrop-blur-md p-4 rounded-2xl border-2 border-brand-deep/20 shadow-lg inline-flex mx-auto">
|
||
<button
|
||
onClick={() => setFilter('ALL')}
|
||
className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'ALL' ? 'bg-brand-deep text-white border-brand-deep' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
|
||
>
|
||
{t.publications.filters.all}
|
||
</button>
|
||
<button
|
||
onClick={() => setFilter('FANZIN')}
|
||
className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'FANZIN' ? 'bg-brand-purple text-white border-brand-purple' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
|
||
>
|
||
{t.publications.filters.fanzine}
|
||
</button>
|
||
<button
|
||
onClick={() => setFilter('RAPOR')}
|
||
className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'RAPOR' ? 'bg-brand-red text-white border-brand-red' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
|
||
>
|
||
{t.publications.filters.report}
|
||
</button>
|
||
<button
|
||
onClick={() => setFilter('BROSUR')}
|
||
className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'BROSUR' ? 'bg-[#FFC107] text-brand-deep border-[#FFC107]' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
|
||
>
|
||
{t.publications.filters.brochure}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* --- GRID --- */}
|
||
<div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
||
{filteredPublications.map((pub) => (
|
||
<div key={pub.id} className="group relative">
|
||
{/* Card Background Layer */}
|
||
<div className="absolute inset-0 bg-brand-deep rounded-2xl transform translate-x-3 translate-y-3 transition-transform group-hover:translate-x-4 group-hover:translate-y-4"></div>
|
||
|
||
{/* Main Card */}
|
||
<div className="relative bg-white border-4 border-brand-deep rounded-2xl overflow-hidden flex flex-col h-full transition-transform group-hover:-translate-y-1">
|
||
|
||
{/* Image Area */}
|
||
<div className="h-64 overflow-hidden relative border-b-4 border-brand-deep bg-gray-100">
|
||
<img src={pub.coverUrl} alt={pub.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
|
||
|
||
<div className="absolute top-4 right-4">
|
||
<div className="bg-white text-brand-deep px-3 py-1 font-bold text-xs border-2 border-brand-deep rounded shadow-[2px_2px_0px_#2D0F41]">
|
||
{pub.date}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Type Badge */}
|
||
<div className="absolute bottom-4 left-4">
|
||
<span className={`px-4 py-1 font-bold uppercase tracking-widest text-xs border-2 border-brand-deep rounded-full shadow-md ${
|
||
pub.type === 'FANZIN' ? 'bg-brand-purple text-white' :
|
||
pub.type === 'RAPOR' ? 'bg-brand-red text-white' :
|
||
pub.type === 'BROSUR' ? 'bg-[#FFC107] text-brand-deep' : 'bg-gray-800 text-white'
|
||
}`}>
|
||
{pub.type}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content Area */}
|
||
<div className="p-6 flex flex-col flex-grow">
|
||
<h3 className="text-2xl font-display font-bold text-brand-deep leading-tight mb-3 uppercase group-hover:text-brand-purple transition-colors">
|
||
{pub.title}
|
||
</h3>
|
||
<p className="text-gray-600 font-medium text-sm mb-6 flex-grow line-clamp-3">
|
||
{pub.description}
|
||
</p>
|
||
|
||
<button className="w-full bg-brand-lilac border-2 border-brand-deep text-brand-deep font-bold py-3 px-4 rounded-lg uppercase tracking-wider flex items-center justify-center gap-2 hover:bg-brand-deep hover:text-white transition-colors">
|
||
<Download size={18} />
|
||
İNDİR
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
};
|