feature card responsiveness fixed
This commit is contained in:
jhpin2
parent
435510f75d
commit
19a0385e3c
2 changed files with 94 additions and 57 deletions
|
|
@ -159,32 +159,66 @@ const Home = () => {
|
|||
],
|
||||
};
|
||||
|
||||
// Example of another feature card section with different content and 2 columns
|
||||
// const automationToolsData = {
|
||||
// titleColoredText: "Automation",
|
||||
// titleBoldText: "Solutions",
|
||||
// description:
|
||||
// "Discover powerful automation tools that streamline your workflow and boost productivity across your organization.",
|
||||
// cards: [
|
||||
// {
|
||||
// id: 1,
|
||||
// imageUrl: "/assets/svg/workflow-automation.svg",
|
||||
// imageAlt: "Workflow automation illustration",
|
||||
// title: "Workflow Automation",
|
||||
// description:
|
||||
// "Automate repetitive tasks and streamline complex business processes with our intuitive workflow automation tools.",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// imageUrl: "/assets/svg/email-marketing.svg",
|
||||
// imageAlt: "Email marketing automation illustration",
|
||||
// title: "Email Marketing",
|
||||
// description:
|
||||
// "Create, schedule, and analyze email campaigns automatically with our powerful email marketing automation platform.",
|
||||
// },
|
||||
// ],
|
||||
// gridColumns: 2 as const, // 2 columns for this section
|
||||
// };
|
||||
const allInOneToolsData = {
|
||||
titleColoredText: "All-in-One AI",
|
||||
titleBoldText: "Marketing Platform",
|
||||
description:
|
||||
"Revolutionize your marketing with our All-in-One AI Marketing platform. Effortlessly generate content, design stunning visuals, and engage with customers in minutes, all while maintaining brand consistency and maximizing efficiency. Save time and streamline your business processes with this powerful, all-in-one platform.",
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: "/assets/images/onclick-shedule-min.png",
|
||||
imageAlt: "Content Generator illustration",
|
||||
title: "One Click Scheduling",
|
||||
description:
|
||||
"Schedule your social media posts across platforms effortlessly with just one click, ensuring perfect timing for your audience.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: "/assets/images/competetor-analysis-min.png",
|
||||
imageAlt: "Competitor Analytes",
|
||||
title: "Competitor Analytes",
|
||||
description:
|
||||
"Analyze competitors strategies with detailed insights to track trends, discover opportunities, and stay ahead in your industry.",
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: "/assets/images/AdLibrary-min.png",
|
||||
imageAlt: "Analytics Dashboard illustration",
|
||||
title: "Ad Library",
|
||||
description:
|
||||
"Explore a collection of successful ad examples to inspire your campaigns and create impactful advertisements that drive results.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
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: 5,
|
||||
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: 6,
|
||||
imageUrl: "/assets/images/bulk-gen.png",
|
||||
imageAlt: "Analytics Dashboard illustration",
|
||||
title: "Bulk Generate",
|
||||
description:
|
||||
"Quickly create multiple tailored social media posts with AI, ensuring a consistent brand voice while saving time and effort.",
|
||||
},
|
||||
],
|
||||
gridColumns: 3 as const, // 2 columns for this section
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-[#EBEAF3]">
|
||||
<HeroSection />
|
||||
|
|
@ -194,8 +228,8 @@ const Home = () => {
|
|||
<FeatureSection {...designToolData} />
|
||||
<FeatureSection {...adCreativeData} />
|
||||
<FeatureSection {...chatBotData} />
|
||||
{/*
|
||||
<FeatureCardSection {...automationToolsData} /> */}
|
||||
|
||||
<FeatureCardSection {...allInOneToolsData} />
|
||||
<PricingSection />
|
||||
<FAQSection />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
interface DesignToolProps {
|
||||
|
|
@ -76,39 +77,39 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
);
|
||||
|
||||
const contentContainer = (
|
||||
<div className="details-box-content p-[50px]">
|
||||
<div className="details-box-content p-5 md:p-[50px]">
|
||||
<div className="">
|
||||
<span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
|
||||
<span className="text-[#252525] text-xs md:text-2xl font-bold font-['Inter'] leading-normal">
|
||||
{headingText}
|
||||
</span>
|
||||
<span className="text-[#6a47ed] text-[56px] font-bold font-['Inter'] leading-[56px] block">
|
||||
<span className="text-[#6a47ed] text-2xl md:text-[56px] font-bold font-['Inter'] leading-8 md:leading-[56px] block">
|
||||
{coloredHeading}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className=" my-4">
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="my-2 md:my-4">
|
||||
<span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
|
||||
{paragraphText.split(highlightedBrandName)[0]}
|
||||
</span>
|
||||
<span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
|
||||
<span className="text-[#ff2b85] text-xs md:text-base font-bold font-['Inter'] leading-normal">
|
||||
{highlightedBrandName}
|
||||
</span>
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
<span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
|
||||
{
|
||||
paragraphText
|
||||
.split(highlightedBrandName)[1]
|
||||
.split(highlightedFeature)[0]
|
||||
}
|
||||
</span>
|
||||
<span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
|
||||
<span className="text-[#ff2b85] text-xs md:text-base font-bold font-['Inter'] leading-normal">
|
||||
{highlightedFeature}
|
||||
</span>
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
<span className="text-[#505050] text-xs md:text-base font-normal font-['Inter'] leading-normal">
|
||||
{paragraphText.split(highlightedFeature)[1]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="h-36 flex-col justify-start items-start gap-4 inline-flex">
|
||||
<div className="h-24 md:h-36 flex-col justify-start items-start gap-1 md:gap-4 inline-flex">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
|
|
@ -124,14 +125,15 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#252525] text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="text-[#252525] text-xs md:text-base font-normal font-['Inter'] leading-normal">
|
||||
{feature}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="my-10">
|
||||
<div className="my-2 md:my-10">
|
||||
<Link href="https://dashboard.planpostai.com/">
|
||||
<div
|
||||
className="p-[5px] rounded-[14px] inline-block"
|
||||
style={{ backgroundColor: `${ctaBackgroundColor}30` }}
|
||||
|
|
@ -145,7 +147,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
style={{ backgroundColor: ctaBackgroundColor }}
|
||||
>
|
||||
<p
|
||||
className="text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
|
||||
className="text-xs md:text-base font-semibold font-['Inter'] leading-normal whitespace-nowrap"
|
||||
style={{ color: ctaTextColor }}
|
||||
>
|
||||
{ctaText}
|
||||
|
|
@ -153,6 +155,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -161,20 +164,20 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
<section className={`design-tool my-20 ${className || ""}`}>
|
||||
<div className="section-title text-center my-5">
|
||||
<div>
|
||||
<span className="text-[#6a47ed] text-5xl font-light font-['Inter'] leading-[48px]">
|
||||
<span className="text-[#6a47ed] text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
|
||||
{titleColoredText}
|
||||
</span>
|
||||
<span className="text-[#252525] text-5xl font-bold font-['Inter'] leading-[48px]">
|
||||
<span className="text-[#252525] text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
|
||||
{" " + titleBoldText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full max-w-[1008px] mx-auto text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="w-full max-w-[80%] mx-auto text-center text-[#9b97bb] text-xs md:text-base font-normal font-['Inter'] leading-normal">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="details-card">
|
||||
<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">
|
||||
<div className="w-11/12 xl:w-10/12 py-0 md:py-10 flex flex-col md:flex-row gap-x-5 items-center mx-auto bg-white rounded-[40px] overflow-hidden">
|
||||
{imagePosition === "left" ? (
|
||||
<>
|
||||
{imageContainer}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue