70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { ExternalLink } from 'lucide-react';
|
|
import { milestones } from '@/data/milestones';
|
|
import styles from './MilestonesSection.module.css';
|
|
|
|
export const MilestonesSection: React.FC = () => {
|
|
return (
|
|
<section id="milestones" className={styles.milestonesSection}>
|
|
<div className="content-container">
|
|
{/* Section Header */}
|
|
<div className="section-header">
|
|
<span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
|
|
<div className="section-title-wrap">
|
|
<h2 className="section-title">Milestones Along the Way</h2>
|
|
<div className="section-underline" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Certificate Cards List */}
|
|
<div className={styles.cardsList}>
|
|
{milestones.map((item) => (
|
|
<div key={item.id} className={styles.certCard}>
|
|
{/* Thumbnail */}
|
|
<div className={styles.thumbnailContainer}>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className={styles.certImage}
|
|
/>
|
|
</div>
|
|
|
|
{/* Content Details */}
|
|
<div className={styles.certDetails}>
|
|
<div className={styles.titleRow}>
|
|
<h3 className={styles.certTitle}>{item.title}</h3>
|
|
</div>
|
|
|
|
<div className={styles.issuerRow}>
|
|
<span className={styles.issuerText}>{item.issuer}</span>
|
|
</div>
|
|
|
|
<div className={styles.dateBadge}>{item.date}</div>
|
|
|
|
<p className={styles.description}>{item.description}</p>
|
|
|
|
{/* View Certificate Link */}
|
|
<div className={styles.actionRow}>
|
|
<a
|
|
href={item.link || '#'}
|
|
className={styles.viewCertLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span>View certificate</span>
|
|
<ExternalLink size={20} strokeWidth={2.25} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|