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

css

Browse Source
This commit is contained in:
Desktop
2025-11-14 14:34:44 +05:00
parent 628620406d
commit 9eee5168bb
7 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/marketing/pages/CaseStudies.tsx
View File

@@ -96,7 +96,7 @@ const CaseStudies: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
{caseStudies.map((cs, idx) => {
const metricColors = [
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--igny8-blue)]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "igny8-text-blue" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
];
@@ -216,7 +216,7 @@ const CaseStudies: React.FC = () => {
</Link>
<Link
to="/resources"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Download case study pack

6
frontend/src/marketing/pages/Home.tsx
View File

@@ -136,7 +136,7 @@ const Home: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 mt-2">
{renderCta(
{ label: "Start Free", href: "https://app.igny8.com/signup" },
"inline-flex items-center justify-center rounded-xl bg-white text-[var(--igny8-blue)] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
"inline-flex items-center justify-center rounded-xl bg-white igny8-text-blue px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
)}
{renderCta(
{ label: "Book Demo", href: "/contact" },
@@ -397,7 +397,7 @@ const Home: React.FC = () => {
<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-12">
<span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
<span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] igny8-text-blue mb-4">
Loved by scaling teams
</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
@@ -474,7 +474,7 @@ const Home: React.FC = () => {
href="https://app.igny8.com/signup"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Start Free

8
frontend/src/marketing/pages/Partners.tsx
View File

@@ -112,7 +112,7 @@ const Partners: React.FC = () => {
<p className="text-sm text-slate-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-slate-700 flex-1">
{tier.benefits.map((benefit, benefitIdx) => {
const dotColors = ["bg-[var(--igny8-blue)]", "bg-[var(--igny8-green)]", "bg-[var(--igny8-amber)]", "bg-[var(--igny8-purple)]"];
const dotColors = ["igny8-bg-blue", "igny8-bg-green", "igny8-bg-amber", "igny8-bg-purple"];
return (
<li key={benefit} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
@@ -167,9 +167,9 @@ const Partners: React.FC = () => {
</div>
<ul className="space-y-4 text-sm text-slate-700">
{[
{ text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--igny8-blue)]" },
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--igny8-green)]" },
{ text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[var(--igny8-amber)]" },
{ text: "Sales playbooks, ROI calculators, and demo environments.", color: "igny8-bg-blue" },
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "igny8-bg-green" },
{ text: "Quarterly partner labs to showcase launches and integrations.", color: "igny8-bg-amber" },
].map((item, index) => (
<li key={item.text} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />

22
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -239,7 +239,7 @@ const Pricing: React.FC = () => {
key={tier.name}
className={`relative rounded-3xl border-2 ${
tier.featured
? "border-[var(--igny8-blue)]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
? "igny8-border-blue/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
: "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"
} p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${
tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
@@ -258,8 +258,8 @@ const Pricing: React.FC = () => {
<span
className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${
tier.featured
? "border-[var(--igny8-blue)]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
: "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[var(--igny8-blue)]"
? "igny8-border-blue/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
: "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 igny8-text-blue"
}`}
>
{tier.badge}
@@ -287,7 +287,7 @@ const Pricing: React.FC = () => {
{tier.features.map((feature, idx) => {
// Subtle check icons: light bg with dark check for starter/scale, colored for growth
const checkStyle = tier.featured
? "bg-[var(--igny8-green)]/10 text-[#0bbf87]"
? "igny8-bg-green/10 text-[#0bbf87]"
: "bg-slate-100 text-slate-600";
return (
<li key={feature} className="flex gap-3 items-start">
@@ -305,7 +305,7 @@ const Pricing: React.FC = () => {
className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
tier.featured
? "bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
: "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[var(--igny8-blue)] hover:bg-white"
: "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:igny8-border-blue hover:bg-white"
}`}
>
Start free trial
@@ -329,7 +329,7 @@ const Pricing: React.FC = () => {
<tr>
<th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
<th className="px-6 py-4 text-center font-semibold text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<th className="px-6 py-4 text-center font-semibold igny8-text-blue bg-gradient-to-br from-[#0693e3]/5 to-transparent">
Growth
</th>
<th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
@@ -349,19 +349,19 @@ const Pricing: React.FC = () => {
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--igny8-blue)]"></span>
<span className="size-1.5 rounded-full igny8-bg-blue"></span>
{row.starter}
</span>
)}
</td>
<td className="px-6 py-5 text-center font-medium text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<td className="px-6 py-5 text-center font-medium igny8-text-blue bg-gradient-to-br from-[#0693e3]/5 to-transparent">
{row.growth === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
) : row.growth === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--igny8-blue)]"></span>
<span className="size-1.5 rounded-full igny8-bg-blue"></span>
{row.growth}
</span>
)}
@@ -389,7 +389,7 @@ const Pricing: React.FC = () => {
{/* INFO BLOCKS SECTION */}
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="rounded-3xl border-2 igny8-border-blue/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<CreditCardIcon className="h-6 w-6" />
@@ -445,7 +445,7 @@ const Pricing: React.FC = () => {
href="https://app.igny8.com/signup"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Start free trial

6
frontend/src/marketing/pages/Product.tsx
View File

@@ -138,7 +138,7 @@ const Product: React.FC = () => {
)}
{renderCta(
{ label: "Book a demo", href: "/contact" },
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:text-[var(--igny8-blue)] transition"
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:igny8-border-blue hover:igny8-text-blue transition"
)}
</div>
</div>
@@ -344,7 +344,7 @@ const Product: React.FC = () => {
<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-12">
<span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
<span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] igny8-text-blue mb-4">
Loved by scaling teams
</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
@@ -421,7 +421,7 @@ const Product: React.FC = () => {
href="https://app.igny8.com/signup"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Start free

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

@@ -235,7 +235,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] group"
>
{resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
@@ -247,7 +247,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-blue transition"
>
View All Guides
<ArrowRightIcon className="h-5 w-5" />
@@ -308,7 +308,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] group"
>
<ArrowDownTrayIcon className="h-4 w-4" />
Download {resource.type.toLowerCase()}
@@ -323,7 +323,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-blue transition"
>
Explore Templates
<ArrowRightIcon className="h-5 w-5" />
@@ -392,7 +392,7 @@ const Resources: React.FC = () => {
className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
resource.tag === "Live"
? "bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white hover:shadow-lg"
: "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--igny8-blue)]"
: "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:igny8-text-blue"
}`}
>
{resource.tag === "Live" ? (
@@ -414,7 +414,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:igny8-text-blue transition"
>
View Schedule
<ArrowRightIcon className="h-5 w-5" />
@@ -462,7 +462,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
className="inline-flex items-center gap-2 text-sm font-semibold igny8-text-blue hover:text-[var(--igny8-blue-dark)] group"
>
<ArrowDownTrayIcon className="h-4 w-4" />
Download Now
@@ -511,7 +511,7 @@ const Resources: React.FC = () => {
href="https://app.igny8.com/signup"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Start for $1

14
frontend/src/marketing/pages/Solutions.tsx
View File

@@ -59,7 +59,7 @@ const Solutions: React.FC = () => {
borderColor: "border-[var(--igny8-blue)]/20",
iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
painColor: "bg-rose-500",
outcomeColor: "bg-[var(--igny8-blue)]",
outcomeColor: "igny8-bg-blue",
},
{
name: "Agencies & Consultancies",
@@ -79,7 +79,7 @@ const Solutions: React.FC = () => {
borderColor: "border-[var(--igny8-green)]/20",
iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
painColor: "bg-rose-500",
outcomeColor: "bg-[var(--igny8-green)]",
outcomeColor: "igny8-bg-green",
},
{
name: "In-house Marketing Teams",
@@ -99,7 +99,7 @@ const Solutions: React.FC = () => {
borderColor: "border-[var(--igny8-purple)]/20",
iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
painColor: "bg-rose-500",
outcomeColor: "bg-[var(--igny8-purple)]",
outcomeColor: "igny8-bg-purple",
},
];
@@ -165,7 +165,7 @@ const Solutions: React.FC = () => {
)}
{renderCta(
{ label: "Talk to sales", href: "/contact" },
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:text-[var(--igny8-blue)] transition"
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:igny8-text-blue transition"
)}
</div>
</div>
@@ -215,8 +215,8 @@ const Solutions: React.FC = () => {
{/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`}>
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`}>
IGNY8 Outcomes
</h4>
</div>
@@ -360,7 +360,7 @@ const Solutions: React.FC = () => {
href="https://app.igny8.com/signup"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Start free