251 lines
12 KiB
TypeScript
251 lines
12 KiB
TypeScript
import { channels } from '@/data/channels';
|
|
import { notFound } from 'next/navigation';
|
|
import styles from './channel-page.module.css';
|
|
import SafeImage from '@/components/SafeImage';
|
|
import Link from 'next/link';
|
|
import TestimonialSlider from '@/components/TestimonialSlider';
|
|
import {
|
|
Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
|
|
Palette, Layout, Smartphone, Zap, PenTool, Repeat,
|
|
CheckCircle
|
|
} from 'lucide-react';
|
|
|
|
// Define Props interface
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
return channels.map((channel) => ({
|
|
slug: channel.slug,
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata(props: PageProps) {
|
|
const params = await props.params;
|
|
const channel = channels.find((c) => c.slug === params.slug);
|
|
if (!channel) return { title: 'Channel Not Found' };
|
|
|
|
return {
|
|
title: `${channel.title} Management Tool - SocialBuddy`,
|
|
description: channel.description,
|
|
};
|
|
}
|
|
|
|
// Icon mapping helper
|
|
const getIcon = (iconName: string) => {
|
|
switch (iconName) {
|
|
case 'Calendar': return <Calendar />;
|
|
case 'Eye': return <Eye />;
|
|
case 'BarChart': return <BarChart />;
|
|
case 'Trophy': return <Trophy />;
|
|
case 'Inbox': return <Inbox />;
|
|
case 'ShieldCheck': return <ShieldCheck />;
|
|
case 'Palette': return <Palette />;
|
|
case 'Layout': return <Layout />;
|
|
case 'Smartphone': return <Smartphone />;
|
|
case 'Zap': return <Zap />;
|
|
case 'PenTool': return <PenTool />;
|
|
case 'Repeat': return <Repeat />;
|
|
case 'CheckCircle': return <CheckCircle />;
|
|
default: return <CheckCircle />;
|
|
}
|
|
};
|
|
|
|
export default async function ChannelPage(props: PageProps) {
|
|
const params = await props.params;
|
|
|
|
// Ensure params exists
|
|
if (!params?.slug) {
|
|
notFound();
|
|
}
|
|
|
|
const channel = channels.find((c) => c.slug === params.slug);
|
|
|
|
if (!channel) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<main className={styles.page}>
|
|
{/* 1. Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className={styles.container}>
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>{channel.title}</h1>
|
|
<div className={styles.breadcrumbs}>
|
|
<Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> {channel.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 2. About Section */}
|
|
{channel.about && (
|
|
<section className={styles.aboutSection}>
|
|
<div className={styles.container}>
|
|
<div className={styles.aboutGrid}>
|
|
<div className={styles.aboutImages}>
|
|
<div className={styles.aboutMainImgWrapper}>
|
|
<SafeImage
|
|
src={channel.about.mainImage}
|
|
alt={`${channel.title} Main Feature`}
|
|
className={styles.img}
|
|
fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
|
|
/>
|
|
</div>
|
|
<div className={styles.aboutSubImgWrapper}>
|
|
<SafeImage
|
|
src={channel.about.subImage}
|
|
alt={`${channel.title} Sub Feature`}
|
|
className={styles.img}
|
|
fallbackSrc={`https://placehold.co/400x400/png?text=${encodeURIComponent(channel.title)}+Sub`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.aboutContent}>
|
|
<span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
|
|
<h2 className={styles.sectionTitle}>{channel.about.title}</h2>
|
|
<p className={styles.aboutDescription}>{channel.about.description}</p>
|
|
<div className={styles.aboutPoints}>
|
|
{channel.about.bulletPoints.map((point, i) => (
|
|
<div key={i} className={styles.aboutPointItem}>
|
|
<span className={styles.aboutPointIcon}>
|
|
{getIcon(point.icon)}
|
|
</span>
|
|
<span className={styles.aboutPointText}>{point.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<a href="#" className="btn btn-primary">Start Free Trial</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* 3. Benefits / Why Choose */}
|
|
<section className={styles.benefitsSection}>
|
|
<div className={styles.container}>
|
|
<div className={styles.benefitsContainer}>
|
|
<div className={styles.benefitsContent}>
|
|
<span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
|
|
<h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
|
|
<p className={styles.aboutDescription}>
|
|
We've built specific tools to help you succeed on {channel.title}.
|
|
Stop guessing and start growing with data-driven insights.
|
|
</p>
|
|
<a href="#" className="btn btn-primary">See All Features</a>
|
|
</div>
|
|
<div className={styles.benefitsGrid}>
|
|
{channel.benefits.slice(0, 4).map((benefit, index) => (
|
|
<div key={index} className={styles.benefitCard}>
|
|
<div className={styles.benefitIcon}>
|
|
{getIcon(benefit.icon)}
|
|
</div>
|
|
<h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
|
|
<p className={styles.benefitCardDesc}>{benefit.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 4. Testimonials */}
|
|
{channel.testimonials && channel.testimonials.length > 0 && (
|
|
<section className={styles.testimonialSection}>
|
|
<div className={styles.container}>
|
|
<div className={styles.testimonialGrid}>
|
|
<div className={styles.testimonialImages}>
|
|
<div className={styles.testImgWrapper}>
|
|
<SafeImage
|
|
src={channel.heroImage}
|
|
alt="Happy Customer"
|
|
className={styles.img}
|
|
fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
|
|
/>
|
|
</div>
|
|
<div className={styles.testImgWrapper}>
|
|
<SafeImage
|
|
src={channel.about.mainImage}
|
|
alt="Community"
|
|
className={styles.img}
|
|
fallbackSrc="https://placehold.co/400x400/png?text=Customer+2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={styles.testimonialSliderWrapper}>
|
|
<span className={styles.sectionSubtitle}>Testimonials</span>
|
|
<h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
|
|
<TestimonialSlider testimonials={channel.testimonials} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* 5. FAQ */}
|
|
{channel.faqs && channel.faqs.length > 0 && (
|
|
<section className={styles.faqSection}>
|
|
<div className={styles.container}>
|
|
<div className={styles.faqGrid}>
|
|
<div className={styles.faqContent}>
|
|
<span className={styles.sectionSubtitle}>FAQ</span>
|
|
<h2 className={styles.sectionTitle}>Frequently Asked Questions about {channel.title}</h2>
|
|
<div className={styles.accordion}>
|
|
{channel.faqs.map((faq, index) => (
|
|
<details key={index} className={styles.accordionItem}>
|
|
<summary className={styles.accordionTrigger}>
|
|
{faq.question}
|
|
<span className={styles.accordionIcon}>+</span>
|
|
</summary>
|
|
<div className={styles.accordionContentOpen}>
|
|
<p style={{ paddingBottom: '1.5rem', color: 'var(--text-secondary)' }}>{faq.answer}</p>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className={styles.faqImageWrapper}>
|
|
<SafeImage
|
|
src="/images/faq-illustration.png"
|
|
alt="FAQ Illustration"
|
|
className={styles.img}
|
|
fallbackSrc="https://placehold.co/600x600/png?text=FAQ+Support"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* 6. CTA (Full Width Floating) */}
|
|
<section className={styles.ctaFullWidth}>
|
|
<SafeImage
|
|
src="/images/shape-left.png"
|
|
alt=""
|
|
className={`${styles.floatElem} ${styles.floatLeft}`}
|
|
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
|
/>
|
|
<SafeImage
|
|
src="/images/shape-right.png"
|
|
alt=""
|
|
className={`${styles.floatElem} ${styles.floatRight}`}
|
|
fallbackSrc="https://placehold.co/150x150/png?text=Shape"
|
|
/>
|
|
|
|
<div className={styles.ctaContentCentered}>
|
|
<h2 className={styles.ctaFullTitle}>Ready to Master {channel.title}?</h2>
|
|
<p className={styles.ctaFullText}>
|
|
Join thousands of marketers who are growing their {channel.title} presence with SocialBuddy.
|
|
</p>
|
|
<a href="https://app.socialbuddy.co/signup" className={styles.ctaFullBtn}>
|
|
Start Free Trial
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|