feat: render CMS-driven public redesign
This commit is contained in:
@@ -1,130 +1,121 @@
|
||||
/**
|
||||
* Home page highlighting the association mission, key offerings, and primary calls to action.
|
||||
*/
|
||||
|
||||
import Image from "next/image";
|
||||
import { ArrowUpLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Helmet } from "@/lib/helmet";
|
||||
import { Link } from "@/lib/router";
|
||||
import FeaturedEvents from "@/components/home/FeaturedEvents";
|
||||
import FeaturedPosts from "@/components/home/FeaturedPosts";
|
||||
import ContentActionLink from "@/components/ContentActionLink";
|
||||
import type { HomeContentPage, SiteContent } from "@/lib/content-cms";
|
||||
import type { EventListItemSchema, PostListSchema } from "@/lib/types";
|
||||
|
||||
const heroTitle = "انجمن علمی کامپیوتر دانشگاه گیلان";
|
||||
const heroDescription =
|
||||
"با ما همراه شوید و در دنیای مهندسی/علوم کامپیوتر و فناوری پیشرفت کنید. رویدادها، محتوای آموزشی و جامعه‌ای پویا برای رشد شما فراهم است.";
|
||||
|
||||
const structuredData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
name: heroTitle,
|
||||
url: "https://east-guilan-ce.ir",
|
||||
sameAs: ["https://east-guilan-ce.ir/blog", "https://east-guilan-ce.ir/events"],
|
||||
description: heroDescription,
|
||||
logo: "https://east-guilan-ce.ir/favicon.ico",
|
||||
contactPoint: {
|
||||
"@type": "ContactPoint",
|
||||
email: "admin@east-guilan-ce.ir",
|
||||
contactType: "customer support",
|
||||
availableLanguage: ["fa", "en"]
|
||||
}
|
||||
type HomeProps = {
|
||||
content: HomeContentPage;
|
||||
siteContent: SiteContent;
|
||||
events: EventListItemSchema[];
|
||||
posts: PostListSchema[];
|
||||
isEventArchive: boolean;
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
export default function Home({ content, siteContent, events, posts, isEventArchive }: HomeProps) {
|
||||
const heroImage = content.hero_image || siteContent.logo || {
|
||||
url: "/favicon.ico",
|
||||
alt: siteContent.short_name || "نشان انجمن",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{heroTitle}</title>
|
||||
<meta name="description" content={heroDescription} />
|
||||
<meta property="og:title" content={heroTitle} />
|
||||
<meta property="og:description" content={heroDescription} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://east-guilan-ce.ir" />
|
||||
<meta property="og:image" content="https://east-guilan-ce.ir/favicon.ico" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={heroTitle} />
|
||||
<meta name="twitter:description" content={heroDescription} />
|
||||
<script type="application/ld+json">{JSON.stringify(structuredData)}</script>
|
||||
</Helmet>
|
||||
|
||||
<main className="min-h-screen bg-background" dir="rtl">
|
||||
<header className="bg-gradient-to-b from-primary/10 to-background py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="mb-6 text-4xl font-extrabold leading-tight text-primary sm:text-5xl">{heroTitle}</h1>
|
||||
<p className="mx-auto mb-10 max-w-2xl text-lg text-muted-foreground sm:text-xl">{heroDescription}</p>
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<Link to="/events">
|
||||
<Button size="lg" aria-label="مشاهده رویدادهای انجمن">
|
||||
مشاهده رویدادها
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/blog">
|
||||
<Button size="lg" variant="outline" aria-label="مطالعه مقالات آموزشی">
|
||||
خواندن مقالات
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="py-16" aria-labelledby="about-section">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 id="about-section" className="mb-12 text-center text-3xl font-bold">
|
||||
درباره انجمن
|
||||
</h2>
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>رویدادهای تخصصی</CardTitle>
|
||||
<CardDescription>برگزاری کارگاه‌ها، سمینارها و نشست‌های علمی</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground">
|
||||
با شرکت در رویدادهای ما، دانش و مهارت‌های خود را در کنار اساتید و متخصصان ارتقا دهید.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>مقالات آموزشی</CardTitle>
|
||||
<CardDescription>دسترسی به مطالب آموزشی و پژوهشی باکیفیت</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground">
|
||||
تازه‌ترین مقالات تخصصی در حوزه‌های مختلف علوم کامپیوتر برای یادگیری و توسعه فردی.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>جامعه فعال</CardTitle>
|
||||
<CardDescription>ارتباط با دانشجویان و اساتید علاقه‌مند به فناوری</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground">
|
||||
به جامعه‌ای پویا بپیوندید و از فرصت‌های همکاری، شبکه‌سازی و رشد شخصی بهره‌مند شوید.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-primary/5 py-16" aria-labelledby="cta-section">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 id="cta-section" className="mb-4 text-3xl font-bold">
|
||||
آماده عضویت هستید؟
|
||||
</h2>
|
||||
<p className="mx-auto mb-8 max-w-xl text-muted-foreground">
|
||||
همین حالا به جمع ما بپیوندید و از برنامه‌ها و فرصت‌های یادگیری انجمن علمی کامپیوتر دانشگاه گیلان استفاده کنید.
|
||||
<main className="bg-background" dir="rtl">
|
||||
<section className="border-b border-border/70 bg-brand-wash/45" aria-labelledby="home-hero-title">
|
||||
<div className="container mx-auto grid items-center gap-8 px-4 py-10 md:grid-cols-[1.15fr_0.85fr] md:gap-12 md:py-16">
|
||||
<div>
|
||||
<p className="mb-3 text-sm font-semibold text-brand-deep">
|
||||
{siteContent.faculty_subline}
|
||||
</p>
|
||||
<Link to="/auth">
|
||||
<Button size="lg" aria-label="ثبت نام در انجمن علمی کامپیوتر">
|
||||
ثبت‌نام کنید
|
||||
<h1 id="home-hero-title" className="max-w-3xl text-3xl font-extrabold leading-[1.45] tracking-tight text-brand-deep sm:text-4xl md:text-5xl">
|
||||
{content.hero_heading || content.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-base leading-8 text-muted-foreground md:text-lg">
|
||||
{content.intro}
|
||||
</p>
|
||||
{content.hero_body ? (
|
||||
<p className="mt-2 max-w-2xl text-sm leading-7 text-muted-foreground">
|
||||
{content.hero_body}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
||||
<Button asChild className="min-h-11 rounded-[10px] px-5">
|
||||
<ContentActionLink
|
||||
href={content.hero_action_url}
|
||||
fallbackHref="/events"
|
||||
className="inline-flex items-center gap-2"
|
||||
>
|
||||
{content.hero_action_label}
|
||||
<ArrowUpLeft aria-hidden="true" className="h-4 w-4" />
|
||||
</ContentActionLink>
|
||||
</Button>
|
||||
</Link>
|
||||
<Button asChild variant="outline" className="home-hero-secondary min-h-11 rounded-[10px] border-primary/35 bg-background px-5 text-primary">
|
||||
<ContentActionLink href={content.hero_secondary_action_url} fallbackHref="/blog">
|
||||
{content.hero_secondary_action_label || siteContent.navigation.blog}
|
||||
</ContentActionLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</>
|
||||
|
||||
<div className="relative grid min-h-48 place-items-center overflow-hidden rounded-2xl border border-border/80 bg-brand-wash px-6 py-10 md:min-h-[320px]">
|
||||
<div className="pointer-events-none absolute inset-4 rounded-xl border border-primary/20" aria-hidden="true" />
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-1.5 bg-accent" aria-hidden="true" />
|
||||
<div className="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full border border-primary/20" aria-hidden="true" />
|
||||
<Image
|
||||
src={heroImage.url}
|
||||
alt={heroImage.alt || "تصویر معرفی انجمن"}
|
||||
width={240}
|
||||
height={240}
|
||||
unoptimized
|
||||
className="relative z-10 h-36 w-36 object-contain drop-shadow-xl md:h-48 md:w-48"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<FeaturedEvents content={content} events={events} isArchive={isEventArchive} />
|
||||
<FeaturedPosts content={content} siteContent={siteContent} posts={posts} />
|
||||
|
||||
<section className="bg-primary text-primary-foreground" aria-labelledby="home-participation-title">
|
||||
<div className="container mx-auto flex flex-col gap-6 px-4 py-12 md:flex-row md:items-center md:justify-between md:py-16">
|
||||
{content.participation_image ? (
|
||||
<div className="hidden h-24 w-24 shrink-0 place-items-center overflow-hidden rounded-2xl border border-primary-foreground/20 bg-background/10 p-2 md:grid">
|
||||
<Image
|
||||
src={content.participation_image.url}
|
||||
alt={content.participation_image.alt || ""}
|
||||
width={96}
|
||||
height={96}
|
||||
unoptimized
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="max-w-2xl">
|
||||
<h2 id="home-participation-title" className="text-2xl font-bold leading-relaxed md:text-3xl">
|
||||
{content.participation_heading}
|
||||
</h2>
|
||||
<p className="mt-2 text-sm leading-7 opacity-90 md:text-base">
|
||||
{content.participation_body}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<Button asChild className="min-h-11 rounded-[10px] bg-accent px-5 text-accent-foreground hover:bg-accent/90">
|
||||
<ContentActionLink href={content.participation_action_url} fallbackHref="/auth" className="inline-flex items-center gap-2">
|
||||
{content.participation_action_label}
|
||||
<ArrowUpLeft aria-hidden="true" className="h-4 w-4" />
|
||||
</ContentActionLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="min-h-11 rounded-[10px] border-primary-foreground/45 bg-transparent px-5 text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground">
|
||||
<ContentActionLink href={content.participation_secondary_action_url} fallbackHref="/about">
|
||||
{content.participation_secondary_action_label}
|
||||
</ContentActionLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user