Add Upcoming Features page with timeline-based roadmap
New Page: /upcoming - Created comprehensive Upcoming Features page with 3 timeline phases - Phase 1 (Feb 2026): Linker Module, Optimizer Module - Phase 2 (Q2 2026): Products Pages, Services Pages, Company Pages - Phase 3 (Q3-Q4 2026): Socializer, Video Creator, Site Builder, Analytics Features: - Timeline-based organization with unique color badges - Rich visual design with gradients and hover effects - Detailed feature descriptions with bullet points - Icons for each module - CTA sections for conversion Integration: - Added route to MarketingApp.tsx - Added 'Upcoming Features' link to footer Resources section - Updated FINAL-PRELAUNCH.md to mark task 8.3 complete All upcoming features from docs integrated: - Internal/external linking with clustering - Content re-optimization - Product/service/company page generation - Social media multi-platform publishing - Video content creation and publishing - Site builder (SEO holy grail) - Advanced analytics
This commit is contained in:
IGNY8 VPS (Salman)
@@ -14,6 +14,7 @@ const CaseStudies = lazy(() => import("./pages/CaseStudies"));
|
||||
const Partners = lazy(() => import("./pages/Partners"));
|
||||
const Contact = lazy(() => import("./pages/Contact"));
|
||||
const Waitlist = lazy(() => import("./pages/Waitlist"));
|
||||
const Upcoming = lazy(() => import("./pages/Upcoming"));
|
||||
|
||||
const MarketingApp: React.FC = () => {
|
||||
return (
|
||||
@@ -31,6 +32,7 @@ const MarketingApp: React.FC = () => {
|
||||
<Route path="/partners" element={<Partners />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/waitlist" element={<Waitlist />} />
|
||||
<Route path="/upcoming" element={<Upcoming />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</MarketingLayout>
|
||||
|
||||
@@ -36,6 +36,7 @@ export const footerNavGroups: { title: string; links: NavLinkItem[] }[] = [
|
||||
{ name: "Help Center", path: "/resources#help" },
|
||||
{ name: "Documentation", path: "/resources#docs" },
|
||||
{ name: "Partner Program", path: "/partners" },
|
||||
{ name: "Upcoming Features", path: "/upcoming" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
332
frontend/src/marketing/pages/Upcoming.tsx
Normal file
332
frontend/src/marketing/pages/Upcoming.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
LinkIcon,
|
||||
ShoppingBagIcon,
|
||||
BriefcaseIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
ShareIcon,
|
||||
VideoCameraIcon,
|
||||
SparklesIcon,
|
||||
BuildingStorefrontIcon,
|
||||
PencilSquareIcon,
|
||||
ChartBarIcon,
|
||||
GlobeAltIcon,
|
||||
RocketLaunchIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import SEO from "../components/SEO";
|
||||
import { getMetaTags } from "../config/metaTags";
|
||||
|
||||
const Upcoming: React.FC = () => {
|
||||
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
||||
const isExternal = cta.href.startsWith("http");
|
||||
|
||||
if (isExternal) {
|
||||
return (
|
||||
<a
|
||||
href={cta.href}
|
||||
className={className}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{cta.label}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={cta.href} className={className}>
|
||||
{cta.label}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const upcomingFeatures = [
|
||||
{
|
||||
phase: "Launching February 2026",
|
||||
badge: "Launching Soon",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-success)] to-[var(--color-success-dark)] text-white",
|
||||
borderColor: "border-[var(--color-success)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: LinkIcon,
|
||||
title: "Linker Module",
|
||||
subtitle: "Intelligent Internal & External Linking",
|
||||
description: "Automatically create strategic internal links between related content based on your keyword clusters. Build topical authority with AI-powered link suggestions that understand semantic relationships.",
|
||||
bullets: [
|
||||
"Internal linking mapped to keyword clusters",
|
||||
"External link suggestions to authoritative sources",
|
||||
"Anchor text optimization for SEO",
|
||||
"Link health monitoring and broken link detection",
|
||||
"Cross-site linking for multi-brand portfolios",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: ArrowTrendingUpIcon,
|
||||
title: "Optimizer Module",
|
||||
subtitle: "Content Re-Optimization Engine",
|
||||
description: "Analyze and improve existing content performance. AI-powered recommendations for content updates, keyword optimization, and structural improvements to boost rankings.",
|
||||
bullets: [
|
||||
"Content performance analysis and scoring",
|
||||
"AI-powered rewrite suggestions",
|
||||
"Keyword gap analysis vs competitors",
|
||||
"Structure and readability improvements",
|
||||
"Auto-update stale content with fresh information",
|
||||
],
|
||||
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
phase: "Launching Q2 2026",
|
||||
badge: "In Development",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-purple)] to-[var(--color-purple-dark)] text-white",
|
||||
borderColor: "border-[var(--color-purple)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: ShoppingBagIcon,
|
||||
title: "Products Pages",
|
||||
subtitle: "E-commerce Product Content Generation",
|
||||
description: "Generate SEO-optimized product pages at scale. Create product descriptions, specifications, features, and benefits with AI that understands your product catalog and target audience.",
|
||||
bullets: [
|
||||
"Bulk product page generation from catalog data",
|
||||
"Product attribute optimization (specs, features, benefits)",
|
||||
"Category landing pages with clustering",
|
||||
"Product comparison pages",
|
||||
"Schema markup for rich snippets",
|
||||
],
|
||||
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||||
},
|
||||
{
|
||||
icon: BriefcaseIcon,
|
||||
title: "Services Pages",
|
||||
subtitle: "Service Business Content Engine",
|
||||
description: "Create comprehensive service pages for B2B and B2C service businesses. Generate service descriptions, process explanations, pricing structures, and case studies.",
|
||||
bullets: [
|
||||
"Service description templates by industry",
|
||||
"Multi-location service pages",
|
||||
"Service area pages for local SEO",
|
||||
"Process and methodology explanations",
|
||||
"Integration with company brand guidelines",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: BuildingStorefrontIcon,
|
||||
title: "Company Pages",
|
||||
subtitle: "Corporate Website Essentials",
|
||||
description: "Generate and optimize essential company pages: About Us, Team, Careers, Contact, FAQ. Maintain brand consistency while optimizing for search and conversion.",
|
||||
bullets: [
|
||||
"About Us, Mission, Vision, Values pages",
|
||||
"Team member profiles and bios",
|
||||
"Careers and job listing pages",
|
||||
"FAQ pages mapped to search intent",
|
||||
"Press and media pages",
|
||||
],
|
||||
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
phase: "Launching Q3-Q4 2026",
|
||||
badge: "Planned",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-warning)] to-[var(--color-warning-dark)] text-white",
|
||||
borderColor: "border-[var(--color-warning)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: ShareIcon,
|
||||
title: "Socializer Module",
|
||||
subtitle: "Multi-Platform Social Publishing",
|
||||
description: "Automatically publish content to top 5 social platforms. Generate platform-specific posts, images, and captions optimized for each channel. Schedule and manage all social content from one place.",
|
||||
bullets: [
|
||||
"Auto-post to LinkedIn, Twitter/X, Facebook, Instagram, TikTok",
|
||||
"Platform-specific content adaptation (tone, length, format)",
|
||||
"Social media calendar integrated with content calendar",
|
||||
"Image optimization per platform specs",
|
||||
"Engagement tracking and analytics",
|
||||
],
|
||||
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||||
},
|
||||
{
|
||||
icon: VideoCameraIcon,
|
||||
title: "Video Content Creator",
|
||||
subtitle: "AI Video Generation & Publishing",
|
||||
description: "Generate video content from articles. Create short-form videos for social (Reels, Shorts, TikTok) and long-form for YouTube. Automated video publishing to video platforms.",
|
||||
bullets: [
|
||||
"Article-to-video conversion with AI voiceover",
|
||||
"Short-form video for Reels, Shorts, TikTok",
|
||||
"Long-form video for YouTube with chapters",
|
||||
"Video SEO optimization (titles, descriptions, tags)",
|
||||
"Automated publishing to video platforms",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: SparklesIcon,
|
||||
title: "Site Builder",
|
||||
subtitle: "The SEO Holy Grail",
|
||||
description: "Revolutionary site builder that creates fully optimized, content-rich websites from scratch. Automated architecture planning, content generation, design selection, and deployment.",
|
||||
bullets: [
|
||||
"Automated site architecture based on keyword research",
|
||||
"Full website content generation in minutes",
|
||||
"SEO-optimized templates and design systems",
|
||||
"Internal linking structure built-in",
|
||||
"One-click deployment to hosting",
|
||||
],
|
||||
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
||||
},
|
||||
{
|
||||
icon: ChartBarIcon,
|
||||
title: "Advanced Analytics",
|
||||
subtitle: "Performance Insights & Reporting",
|
||||
description: "Deep analytics for content performance, keyword rankings, traffic attribution, and ROI tracking. Custom reports and dashboards for agencies and enterprises.",
|
||||
bullets: [
|
||||
"Keyword ranking tracking integration",
|
||||
"Content performance analytics",
|
||||
"Traffic and conversion attribution",
|
||||
"Custom white-label reports",
|
||||
"API access for data export",
|
||||
],
|
||||
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SEO meta={getMetaTags("home")} />
|
||||
<div className="bg-white">
|
||||
{/* HERO SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 text-white text-sm mb-6">
|
||||
<RocketLaunchIcon className="w-4 h-4" />
|
||||
<span className="font-medium">Innovation Roadmap</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
What's Coming to IGNY8
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">
|
||||
We're building the future of AI-powered content marketing. Here's what's launching in 2026.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{renderCta(
|
||||
{ label: "Start Creating Today", href: "https://app.igny8.com/signup" },
|
||||
"px-8 py-4 bg-white text-[var(--color-primary)] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg"
|
||||
)}
|
||||
{renderCta(
|
||||
{ label: "View Current Features", href: "/product" },
|
||||
"px-8 py-4 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* UPCOMING FEATURES TIMELINE */}
|
||||
{upcomingFeatures.map((phase, phaseIndex) => (
|
||||
<section key={phase.phase} className={`py-20 ${phaseIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Phase Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="inline-flex items-center gap-3 mb-4">
|
||||
<span className={`px-6 py-2 rounded-full text-sm font-bold ${phase.badgeColor} shadow-lg`}>
|
||||
{phase.badge}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
{phase.phase}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-purple)] mx-auto rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{phase.features.map((feature, index) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<div
|
||||
key={feature.title}
|
||||
className={`group relative bg-white rounded-2xl border-2 ${phase.borderColor} p-8 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1`}
|
||||
>
|
||||
{/* Icon & Badge */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className={`p-4 rounded-xl bg-gradient-to-br ${feature.color} text-white shadow-lg group-hover:scale-110 transition-transform`}>
|
||||
<Icon className="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title & Subtitle */}
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-gray-500 mb-4">
|
||||
{feature.subtitle}
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Bullet Points */}
|
||||
<ul className="space-y-3">
|
||||
{feature.bullets.map((bullet, bulletIndex) => (
|
||||
<li key={bulletIndex} className="flex items-start gap-3">
|
||||
<div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-br ${feature.color} mt-2 flex-shrink-0`} />
|
||||
<span className="text-sm text-gray-600">{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Hover Accent */}
|
||||
<div className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-5 transition-opacity -z-10`} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
<div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
Start Creating Content Today
|
||||
</h2>
|
||||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||||
Don't wait for tomorrow's features. Start using IGNY8's powerful 8-stage pipeline today and scale your content production.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{renderCta(
|
||||
{ label: "Get Started Free", href: "https://app.igny8.com/signup" },
|
||||
"px-8 py-4 bg-white text-[var(--color-primary)] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg text-lg"
|
||||
)}
|
||||
{renderCta(
|
||||
{ label: "View Pricing", href: "/pricing" },
|
||||
"px-8 py-4 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20 text-lg"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Upcoming;
|
||||
Reference in New Issue
Block a user