Amirhossein Khalili
f34bea05cd
Replace the blocking asset loader with progressive rendering, defer expensive media and Three.js work, and reduce hydration and animation costs. Move deployment from a static Nginx export to the standalone Next.js runtime with optimized dynamic images.
54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
import { BookOpenText, GraduationCap, MessageCircle } from 'lucide-react';
|
|
import { messagesByLocale, type Locale } from '@/i18n/content';
|
|
import { HeroControls } from './HeroControls';
|
|
import { ImageWithSkeleton } from './ImageWithSkeleton';
|
|
import styles from './HeroSection.module.css';
|
|
|
|
export const HeroSection = ({ locale }: { locale: Locale }) => {
|
|
const copy = messagesByLocale[locale].hero;
|
|
|
|
return (
|
|
<div className={styles.heroContentWrapper}>
|
|
<HeroControls locale={locale} />
|
|
<div className={styles.heroContent}>
|
|
<div className={styles.avatarWrapper}>
|
|
<div className={styles.avatarRingOuter}>
|
|
<div className={styles.avatarContainer}>
|
|
<ImageWithSkeleton
|
|
src="/images/avatar.png"
|
|
alt={copy.avatarAlt}
|
|
fill
|
|
sizes="192px"
|
|
preload
|
|
skeletonShape="circle"
|
|
className={styles.avatarImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className={`font-display ${styles.heroTitle}`} aria-label={copy.titleLabel}>
|
|
<span className={styles.heroGreeting}>{copy.greeting}</span>
|
|
<span className={styles.heroName}>{copy.name}</span>
|
|
</h1>
|
|
<p className={styles.heroSubtitle}>{copy.subtitle}</p>
|
|
|
|
<div className={styles.actionButtons}>
|
|
<button type="button" className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`} aria-label={copy.blogLabel} title={copy.comingSoon} disabled>
|
|
<BookOpenText size={17} strokeWidth={2} aria-hidden="true" />
|
|
{copy.blog}
|
|
</button>
|
|
<button type="button" className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`} aria-label={copy.coursesLabel} title={copy.comingSoon} disabled>
|
|
<GraduationCap size={18} strokeWidth={2} aria-hidden="true" />
|
|
{copy.courses}
|
|
</button>
|
|
<a href="https://www.linkedin.com/messaging/compose/?recipient=ACoAAEJsAwMBCv3L9dYcEXWam-l3pLOJ3UspX7w" target="_blank" rel="noreferrer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`} aria-label={copy.contactLabel}>
|
|
<MessageCircle size={17} strokeWidth={2} aria-hidden="true" />
|
|
{copy.contact}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|