feature card done
This commit is contained in:
jhpin2
parent
bd929f12bd
commit
55523237b2
5 changed files with 51 additions and 51 deletions
|
|
@ -38,29 +38,29 @@ const Home = () => {
|
|||
};
|
||||
|
||||
// For a different section, you could create another data object with different values
|
||||
const marketingToolData = {
|
||||
titleColoredText: "AI-Powered",
|
||||
titleBoldText: "Marketing Suite",
|
||||
const bulkSocialData = {
|
||||
titleColoredText: "Bulk Social Media",
|
||||
titleBoldText: "Post Generator",
|
||||
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",
|
||||
imagePosition: "right",
|
||||
backgroundColor: "#e8f4ff",
|
||||
backgroundColor: "#ffffff",
|
||||
|
||||
headingText: "Supercharge Your Marketing:",
|
||||
coloredHeading: "Smart Automation",
|
||||
headingText: "Create an Entire Month's Content in",
|
||||
coloredHeading: "Just 5 Minutes!",
|
||||
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.",
|
||||
highlightedBrandName: "MarketBoost Pro,",
|
||||
highlightedFeature: "intelligent assistant",
|
||||
"Why create one post at a time when you can plan for the whole month in minutes? With PlanPost AI, you can",
|
||||
highlightedBrandName: "PlanPost AI,",
|
||||
highlightedFeature: "whole month",
|
||||
|
||||
features: [
|
||||
"Content Generation",
|
||||
"Campaign Scheduling",
|
||||
"Performance Analytics",
|
||||
"Multi-channel Publishing",
|
||||
"Bulk Generate Content Instantly",
|
||||
"Stay Consistent Across Platforms",
|
||||
"Save Time, Stay Ahead",
|
||||
"Edit and Customize",
|
||||
],
|
||||
|
||||
ctaText: "Get Started Today",
|
||||
|
|
@ -75,27 +75,28 @@ const Home = () => {
|
|||
cards: [
|
||||
{
|
||||
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",
|
||||
title: "Smart Chatbot",
|
||||
description:
|
||||
"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,
|
||||
imageUrl: "/assets/svg/analytics-card.svg",
|
||||
imageUrl: "/assets/images/bulk-gen.png",
|
||||
imageAlt: "Analytics Dashboard illustration",
|
||||
title: "Analytics Dashboard",
|
||||
title: "Bulk Generate",
|
||||
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]">
|
||||
<HeroSection />
|
||||
<SocialSection />
|
||||
<FeatureSection {...designToolData} />
|
||||
{/* <FeatureSection {...marketingToolData} />
|
||||
<FeatureCardSection {...marketingToolsData} />
|
||||
<FeatureSection {...designToolData} />
|
||||
<FeatureSection {...bulkSocialData} />
|
||||
{/*
|
||||
<FeatureCardSection {...automationToolsData} /> */}
|
||||
<PricingSection />
|
||||
<FAQSection />
|
||||
|
|
|
|||
|
|
@ -41,14 +41,14 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
|
|||
<div className="w-10/12 mx-auto py-16">
|
||||
<div className="max-w-[750px] mx-auto mb-10">
|
||||
<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}
|
||||
</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}
|
||||
</span>
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,15 +57,15 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
|
|||
{cards.map((card) => (
|
||||
<div
|
||||
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
|
||||
src={card.imageUrl}
|
||||
alt={card.imageAlt}
|
||||
width={360}
|
||||
height={180}
|
||||
className="object-cover w-full h-full"
|
||||
height={480}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
|
||||
|
|
|
|||
|
|
@ -60,17 +60,16 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
// Create the image container and content container
|
||||
const imageContainer = (
|
||||
<div
|
||||
className={`w-full max-w-[684px] h-[491px] relative rotate-180 ${imageContainerClasses}`}
|
||||
className={`w-full rotate-180 ${imageContainerClasses}`}
|
||||
style={{ backgroundColor }}
|
||||
>
|
||||
<div className="rotate-180 absolute top-[50px] right-0">
|
||||
<div className="rotate-180 ">
|
||||
<Image
|
||||
className="clip-path"
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
width={684}
|
||||
height={491}
|
||||
style={{ clipPath: "inset(0 3px 0 0)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,7 +77,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
|
||||
const contentContainer = (
|
||||
<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">
|
||||
{headingText}
|
||||
</span>
|
||||
|
|
@ -87,7 +86,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[433px] my-4">
|
||||
<div className=" my-4">
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
{paragraphText.split(highlightedBrandName)[0]}
|
||||
</span>
|
||||
|
|
@ -132,21 +131,21 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-[245px] my-10">
|
||||
<div className="my-10 inline-block">
|
||||
<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` }}
|
||||
>
|
||||
<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` }}
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<p
|
||||
className="text-base font-semibold font-['Inter'] leading-normal"
|
||||
className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
|
||||
style={{ color: ctaTextColor }}
|
||||
>
|
||||
{ctaText}
|
||||
|
|
@ -175,8 +174,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
</div>
|
||||
|
||||
<div className="details-card">
|
||||
<div className="h-[540px] max-w-[1320px] w-full flex items-center mx-auto bg-white rounded-[40px] overflow-hidden">
|
||||
{/* Render components based on image position */}
|
||||
<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">
|
||||
{imagePosition === "left" ? (
|
||||
<>
|
||||
{imageContainer}
|
||||
|
|
|
|||
|
|
@ -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`}
|
||||
>
|
||||
<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-[#252525] ">
|
||||
evolutionize Your Social Media Strategy with a Personalized
|
||||
|
|
@ -38,7 +38,7 @@ const HeroSection: React.FC = () => {
|
|||
<br />
|
||||
<span className="text-[#ff256d]"> AI Agent</span>
|
||||
</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
|
||||
your brand with a personalized AI assistant designed for
|
||||
businesses and marketers.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from "react";
|
|||
const SocialSection: React.FC = () => {
|
||||
return (
|
||||
<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]">
|
||||
<img src="/assets/images/temp-example.png" alt="" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue