planpostai/planpost-offer-landing
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature card done

Browse source
This commit is contained in:
jhpin2 2025-02-26 17:25:44 +06:00
parent bd929f12bd
commit 55523237b2
5 changed files with 51 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/app/page.tsx
View file

@ -38,29 +38,29 @@ const Home = () => {
}; };
// For a different section, you could create another data object with different values // For a different section, you could create another data object with different values
const marketingToolData = { const bulkSocialData = {
titleColoredText: "AI-Powered", titleColoredText: "Bulk Social Media",
titleBoldText: "Marketing Suite", titleBoldText: "Post Generator",
description: description:
"Transform your marketing strategy with our comprehensive AI-powered tools. Perfect for businesses of all sizes, our platform helps you create engaging campaigns that convert prospects into loyal customers.", "Transform your workflow with our Bulk Social Media Post Generator. Input your ideas, set the tone, and let AI deliver a month's worth of scroll-stopping posts in just minutes. Say goodbye to stress and hello to seamless, cohesive content creation!",
imageUrl: "/assets/gif/marketing-tool.gif", imageUrl: "/assets/images/bulk-gen.png",
imageAlt: "Marketing tool interface", imageAlt: "Marketing tool interface",
imagePosition: "right", imagePosition: "right",
backgroundColor: "#e8f4ff", backgroundColor: "#ffffff",
headingText: "Supercharge Your Marketing:", headingText: "Create an Entire Month's Content in",
coloredHeading: "Smart Automation", coloredHeading: "Just 5 Minutes!",
paragraphText: paragraphText:
"Tired of repetitive marketing tasks? With MarketBoost Pro, you can automate your entire campaign workflow. Our intelligent assistant helps you create, schedule, and analyze all in one place.", "Why create one post at a time when you can plan for the whole month in minutes? With PlanPost AI, you can",
highlightedBrandName: "MarketBoost Pro,", highlightedBrandName: "PlanPost AI,",
highlightedFeature: "intelligent assistant", highlightedFeature: "whole month",
features: [ features: [
"Content Generation", "Bulk Generate Content Instantly",
"Campaign Scheduling", "Stay Consistent Across Platforms",
"Performance Analytics", "Save Time, Stay Ahead",
"Multi-channel Publishing", "Edit and Customize",
], ],
ctaText: "Get Started Today", ctaText: "Get Started Today",
@ -75,27 +75,28 @@ const Home = () => {
cards: [ cards: [
{ {
id: 1, id: 1,
imageUrl: "/assets/svg/smartchat-card.svg", imageUrl: "/assets/images/design-tool.gif",
imageAlt: "Content Generator illustration",
title: "Your Design. Your Way",
description:
"Improve your AI-generated content with tools to boost engagement, readability, and performance for maximum impact.",
},
{
id: 2,
imageUrl: "/assets/images/smartchat.png",
imageAlt: "Smart Chatbot illustration", imageAlt: "Smart Chatbot illustration",
title: "Smart Chatbot", title: "Smart Chatbot",
description: description:
"Empower your social media with an AI-powered chatbot that enhances customer engagement and automates responses across platforms.", "Empower your social media with an AI-powered chatbot that enhances customer engagement and automates responses across platforms.",
}, },
{
id: 2,
imageUrl: "/assets/svg/content-generator-card.svg",
imageAlt: "Content Generator illustration",
title: "Content Generator",
description:
"Create high-quality, SEO-optimized content for your blog, social media, and marketing campaigns with our AI-powered content generator.",
},
{ {
id: 3, id: 3,
imageUrl: "/assets/svg/analytics-card.svg", imageUrl: "/assets/images/bulk-gen.png",
imageAlt: "Analytics Dashboard illustration", imageAlt: "Analytics Dashboard illustration",
title: "Analytics Dashboard", title: "Bulk Generate",
description: description:
"Gain valuable insights into your marketing performance with our comprehensive analytics dashboard powered by artificial intelligence.", "Quickly create multiple tailored social media posts with AI, ensuring a consistent brand voice while saving time and effort.",
}, },
], ],
}; };
@ -130,9 +131,10 @@ const Home = () => {
<div className="bg-[#EBEAF3]"> <div className="bg-[#EBEAF3]">
<HeroSection /> <HeroSection />
<SocialSection /> <SocialSection />
<FeatureSection {...designToolData} />
{/* <FeatureSection {...marketingToolData} />
<FeatureCardSection {...marketingToolsData} /> <FeatureCardSection {...marketingToolsData} />
<FeatureSection {...designToolData} />
<FeatureSection {...bulkSocialData} />
{/*
<FeatureCardSection {...automationToolsData} /> */} <FeatureCardSection {...automationToolsData} /> */}
<PricingSection /> <PricingSection />
<FAQSection /> <FAQSection />

14
src/components/FeatureCardSection.tsx
View file

@ -41,14 +41,14 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
<div className="w-10/12 mx-auto py-16"> <div className="w-10/12 mx-auto py-16">
<div className="max-w-[750px] mx-auto mb-10"> <div className="max-w-[750px] mx-auto mb-10">
<div className="text-center"> <div className="text-center">
<span className="text-[#6a47ed] text-center text-5xl font-light font-['Inter'] leading-[48px]"> <span className="text-[#6a47ed] text-center text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
{titleColoredText} {titleColoredText}
</span> </span>
<span className="text-[#434343] text-center text-5xl font-bold font-['Inter'] leading-[48px]"> <span className="text-[#434343] text-center text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
{" " + titleBoldText} {" " + titleBoldText}
</span> </span>
</div> </div>
<div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal"> <div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-sm md:text-base font-normal font-['Inter'] leading-normal">
{description} {description}
</div> </div>
</div> </div>
@ -57,15 +57,15 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
{cards.map((card) => ( {cards.map((card) => (
<div <div
key={card.id} key={card.id}
className="marketing-card w-full max-w-[404px] h-[490px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto" className="marketing-card w-full max-w-[404px] h-[400px] md:h-[450px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
> >
<div className="shadow-md rounded-3xl flex justify-center m-2 h-48 overflow-hidden"> <div className="shadow-md rounded-3xl flex justify-center m-2 h-48 md:h-64 overflow-hidden">
<Image <Image
src={card.imageUrl} src={card.imageUrl}
alt={card.imageAlt} alt={card.imageAlt}
width={360} width={360}
height={180} height={480}
className="object-cover w-full h-full" className="h-full w-full"
/> />
</div> </div>
<div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']"> <div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">

22
src/components/FeatureSection.tsx
View file

@ -60,17 +60,16 @@ const FeatureSection: React.FC<DesignToolProps> = ({
// Create the image container and content container // Create the image container and content container
const imageContainer = ( const imageContainer = (
<div <div
className={`w-full max-w-[684px] h-[491px] relative rotate-180 ${imageContainerClasses}`} className={`w-full rotate-180 ${imageContainerClasses}`}
style={{ backgroundColor }} style={{ backgroundColor }}
> >
<div className="rotate-180 absolute top-[50px] right-0"> <div className="rotate-180 ">
<Image <Image
className="clip-path" className="clip-path"
src={imageUrl} src={imageUrl}
alt={imageAlt} alt={imageAlt}
width={684} width={684}
height={491} height={491}
style={{ clipPath: "inset(0 3px 0 0)" }}
/> />
</div> </div>
</div> </div>
@ -78,7 +77,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
const contentContainer = ( const contentContainer = (
<div className="details-box-content p-[50px]"> <div className="details-box-content p-[50px]">
<div className="max-w-[424px]"> <div className="">
<span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal"> <span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
{headingText} {headingText}
</span> </span>
@ -87,7 +86,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
</span> </span>
</div> </div>
<div className="max-w-[433px] my-4"> <div className=" my-4">
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal"> <span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
{paragraphText.split(highlightedBrandName)[0]} {paragraphText.split(highlightedBrandName)[0]}
</span> </span>
@ -132,21 +131,21 @@ const FeatureSection: React.FC<DesignToolProps> = ({
))} ))}
</div> </div>
<div className="w-[245px] my-10"> <div className="my-10 inline-block">
<div <div
className="h-[75px] py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]" className="p-[5px] rounded-[14px]"
style={{ backgroundColor: `${ctaBackgroundColor}30` }} style={{ backgroundColor: `${ctaBackgroundColor}30` }}
> >
<div <div
className="py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]" className="p-[5px] rounded-[14px]"
style={{ backgroundColor: `${ctaBackgroundColor}30` }} style={{ backgroundColor: `${ctaBackgroundColor}30` }}
> >
<div <div
className="py-[14px] px-[22px] rounded-lg justify-center items-center gap-2.5 inline-flex" className="py-[14px] px-[22px] rounded-lg"
style={{ backgroundColor: ctaBackgroundColor }} style={{ backgroundColor: ctaBackgroundColor }}
> >
<p <p
className="text-base font-semibold font-['Inter'] leading-normal" className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
style={{ color: ctaTextColor }} style={{ color: ctaTextColor }}
> >
{ctaText} {ctaText}
@ -175,8 +174,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
</div> </div>
<div className="details-card"> <div className="details-card">
<div className="h-[540px] max-w-[1320px] w-full flex items-center mx-auto bg-white rounded-[40px] overflow-hidden"> <div className="w-11/12 xl:w-10/12 py-10 flex gap-x-5 items-center mx-auto bg-white rounded-[40px] overflow-hidden">
{/* Render components based on image position */}
{imagePosition === "left" ? ( {imagePosition === "left" ? (
<> <>
{imageContainer} {imageContainer}

4
src/components/HeroSection.tsx
View file

@ -30,7 +30,7 @@ const HeroSection: React.FC = () => {
className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`} className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`}
> >
<div className="p-8 md:p-16"> <div className="p-8 md:p-16">
<div className="text-2xl md:text-6xl leading-5xl font-normal font-['Gendy'] "> <div className="text-2xl md:text-4xl lg:text-6xl leading-5xl font-normal font-['Gendy'] ">
<span className="text-[#ff256d] md:text-white ">R</span> <span className="text-[#ff256d] md:text-white ">R</span>
<span className="text-[#252525] "> <span className="text-[#252525] ">
evolutionize Your Social Media Strategy with a Personalized evolutionize Your Social Media Strategy with a Personalized
@ -38,7 +38,7 @@ const HeroSection: React.FC = () => {
<br /> <br />
<span className="text-[#ff256d]"> AI Agent</span> <span className="text-[#ff256d]"> AI Agent</span>
</div> </div>
<p className="w-full md:w-10/12 text-xs md:text-[20px] mt-4 leading-relaxed md:leading-loose"> <p className="w-full md:w-10/12 text-xs md:text-[15px] lg:text-[20px] mt-4 leading-relaxed md:leading-loose">
Customize your social media content, automate posts, and grow Customize your social media content, automate posts, and grow
your brand with a personalized AI assistant designed for your brand with a personalized AI assistant designed for
businesses and marketers. businesses and marketers.

2
src/components/SocialSection.tsx
View file

@ -3,7 +3,7 @@ import React from "react";
const SocialSection: React.FC = () => { const SocialSection: React.FC = () => {
return ( return (
<section className="social" data-aos="fade-up" data-aos-duration="1500"> <section className="social" data-aos="fade-up" data-aos-duration="1500">
<div className="h-[507px] flex justify-center relative"> <div className="h-0 md:h-[180px] lg:h-[250px] flex justify-center relative">
<div className="absolute top-[-200px]"> <div className="absolute top-[-200px]">
<img src="/assets/images/temp-example.png" alt="" /> <img src="/assets/images/temp-example.png" alt="" />
</div> </div>