salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site design updates

Browse Source
This commit is contained in:
Desktop
2025-11-14 01:16:08 +05:00
parent f8bab8d432
commit e74c048f46
17 changed files with 429 additions and 1618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/marketing/pages/Resources.tsx
View File

@@ -38,7 +38,7 @@ const webinars = [
const Resources: React.FC = () => {
return (
<div className="bg-white text-slate-900">
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading
eyebrow="Resources"
@@ -48,40 +48,55 @@ const Resources: React.FC = () => {
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-6">
{articles.map((article) => (
<article
key={article.title}
className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6"
>
<span className="text-xs uppercase tracking-[0.3em] text-slate-500">
{article.date}
</span>
<h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{article.description}</p>
<div className="rounded-2xl border border-slate-200 bg-slate-100 h-40 flex items-center justify-center text-xs text-slate-500">
Article cover placeholder (800×600) → /marketing/images/resource-hero.png
</div>
</article>
))}
{articles.map((article, idx) => {
const colors = [
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white" },
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white" },
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white" },
];
const colorScheme = colors[idx % colors.length];
return (
<article
key={article.title}
className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 flex flex-col gap-6 hover:shadow-xl transition-all hover:-translate-y-1`}
>
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
{article.date}
</span>
<h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{article.description}</p>
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-40 flex items-center justify-center text-xs text-slate-500 shadow-inner">
Article cover placeholder (800×600) → /marketing/images/resource-hero.png
</div>
</article>
);
})}
</section>
<section className="bg-slate-50/70 border-y border-slate-200">
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
{webinars.map((webinar) => (
<div
key={webinar.title}
className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-4"
>
<span className="text-xs uppercase tracking-[0.3em] text-slate-500">
{webinar.date}
</span>
<h3 className="text-lg font-semibold text-slate-900">{webinar.title}</h3>
<p className="text-sm text-slate-600">{webinar.description}</p>
<button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
Save my seat
</button>
</div>
))}
{webinars.map((webinar, idx) => {
const colors = [
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white" },
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white" },
];
const colorScheme = colors[idx % colors.length];
return (
<div
key={webinar.title}
className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 flex flex-col gap-4 hover:shadow-xl transition-all hover:-translate-y-1`}
>
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
{webinar.date}
</span>
<h3 className="text-lg font-semibold text-slate-900">{webinar.title}</h3>
<p className="text-sm text-slate-600">{webinar.description}</p>
<button className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all">
Save my seat
</button>
</div>
);
})}
</div>
</section>
@@ -108,8 +123,11 @@ const Resources: React.FC = () => {
</li>
</ul>
</div>
<div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
<h3 className="text-2xl font-semibold text-slate-900">Join the Igny8 newsletter</h3>
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg">
<h3 className="text-2xl font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0693e3]"></span>
Join the Igny8 newsletter
</h3>
<p className="text-sm text-slate-600">
Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites.
</p>
@@ -117,11 +135,11 @@ const Resources: React.FC = () => {
<input
type="email"
placeholder="you@company.com"
className="flex-1 rounded-full border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
className="flex-1 rounded-full border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20"
/>
<button
type="submit"
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm font-semibold"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all"
>
Subscribe
</button>