55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import React from 'react'
|
||
import { PageHero } from '../components/PageHero'
|
||
import { Reveal } from '../components/Reveal'
|
||
import { SectionHeading } from '../components/SectionHeading'
|
||
import { Stats } from '../components/home/Stats'
|
||
import { ContactSection } from '../components/ContactSection'
|
||
import { usePageHero, useSectionHeading, useSite } from '../api'
|
||
|
||
export function Investment() {
|
||
const { investment_models } = useSite()
|
||
const hero = usePageHero('investment')
|
||
const heading = useSectionHeading('investment_models')
|
||
|
||
return (
|
||
<>
|
||
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
|
||
|
||
<section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
|
||
<div className="mx-auto max-w-site px-6 lg:px-10">
|
||
<SectionHeading title={heading.title} lead={heading.lead} />
|
||
<div className="mt-14 grid gap-6 lg:grid-cols-3">
|
||
{investment_models.map((model, i) => (
|
||
<Reveal key={model.id} delay={0.06 * i} className="h-full">
|
||
<article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
|
||
<p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
|
||
|
||
<h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
|
||
{model.title}
|
||
</h3>
|
||
|
||
<p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
|
||
|
||
<div className="mt-auto pt-10">
|
||
<ul className="space-y-4 border-t border-ivory/10 pt-8">
|
||
{model.points.map((point) => (
|
||
<li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
|
||
<span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper transition-transform duration-300 ease-out group-hover:scale-[1.5]" aria-hidden="true" />
|
||
{point}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Stats />
|
||
<ContactSection />
|
||
</>
|
||
)
|
||
}
|