From 19a0385e3ce4096c99f109d112193d849001cbcb Mon Sep 17 00:00:00 2001 From: jhpin2 Date: Thu, 27 Feb 2025 14:42:34 +0600 Subject: [PATCH] feature card responsiveness fixed --- src/app/page.tsx | 90 +++++++++++++++++++++---------- src/components/FeatureSection.tsx | 61 +++++++++++---------- 2 files changed, 94 insertions(+), 57 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c3fd440..6ae85ec 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 (
@@ -194,8 +228,8 @@ const Home = () => { - {/* - */} + +
diff --git a/src/components/FeatureSection.tsx b/src/components/FeatureSection.tsx index 1314c66..bcc89a4 100644 --- a/src/components/FeatureSection.tsx +++ b/src/components/FeatureSection.tsx @@ -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 = ({ ); const contentContainer = ( -
+
- + {headingText} - + {coloredHeading}
-
- +
+ {paragraphText.split(highlightedBrandName)[0]} - + {highlightedBrandName} - + { paragraphText .split(highlightedBrandName)[1] .split(highlightedFeature)[0] } - + {highlightedFeature} - + {paragraphText.split(highlightedFeature)[1]}
-
+
{features.map((feature, index) => (
= ({ />
-
+
{feature}
))}
-
-
+
+
-

- {ctaText} -

+

+ {ctaText} +

+
-
+
); @@ -161,20 +164,20 @@ const FeatureSection: React.FC = ({
- + {titleColoredText} - + {" " + titleBoldText}
-
+
{description}
-
+
{imagePosition === "left" ? ( <> {imageContainer}