es lint error fixed
This commit is contained in:
jhpin2
parent
55523237b2
commit
68350f171a
5 changed files with 88 additions and 35 deletions
|
|
@ -14,8 +14,8 @@ const geistMono = Geist_Mono({
|
|||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "PlanPost AI",
|
||||
description: "Generate Schedule Automate",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
|
|||
|
|
@ -67,6 +67,34 @@ const Home = () => {
|
|||
ctaBackgroundColor: "#3482F6",
|
||||
ctaTextColor: "white",
|
||||
};
|
||||
const adCreativeData = {
|
||||
titleColoredText: "Best AI ",
|
||||
titleBoldText: "Ad Creative Generator",
|
||||
description:
|
||||
"Create eye-catching ads effortlessly with our AI Ad Creative Generator. Enter a prompt, choose your brand tone, and watch as AI produces social media-ready content in just 10-20 seconds. Perfect for busy marketers and business owners who value speed and quality.",
|
||||
|
||||
imageUrl: "/assets/images/adCreative-min.png",
|
||||
imageAlt: "Marketing tool interface",
|
||||
imagePosition: "right",
|
||||
backgroundColor: "#ffffff",
|
||||
|
||||
headingText: "Create Sales-Focused Content in",
|
||||
coloredHeading: "Just Seconds",
|
||||
paragraphText:
|
||||
"Gone are the days of spending hours brainstorming captions or designing posts. With PlanPost AI, you can:",
|
||||
highlightedBrandName: "PlanPost AI,",
|
||||
highlightedFeature: "brainstorming",
|
||||
|
||||
features: [
|
||||
"Generate AI-Driven Captions, Images, and Hashtags",
|
||||
"Save Time, Stay Ahead",
|
||||
"Customizable and On-Brand",
|
||||
],
|
||||
|
||||
ctaText: "Try For Free",
|
||||
ctaBackgroundColor: "#3482F6",
|
||||
ctaTextColor: "white",
|
||||
};
|
||||
const marketingToolsData = {
|
||||
titleColoredText: "AI Tools for",
|
||||
titleBoldText: "Marketing Success",
|
||||
|
|
@ -102,38 +130,39 @@ 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 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
|
||||
// };
|
||||
return (
|
||||
<div className="bg-[#EBEAF3]">
|
||||
<HeroSection />
|
||||
<SocialSection />
|
||||
<FeatureCardSection {...marketingToolsData} />
|
||||
<FeatureSection {...designToolData} />
|
||||
<FeatureSection {...bulkSocialData} />
|
||||
<FeatureSection {...designToolData} />
|
||||
<FeatureSection {...adCreativeData} />
|
||||
{/*
|
||||
<FeatureCardSection {...automationToolsData} /> */}
|
||||
<PricingSection />
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Header() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
|
@ -9,7 +10,12 @@ export default function Header() {
|
|||
return (
|
||||
<nav className="flex items-center justify-between pr-8 absolute z-50 w-full">
|
||||
<div className="flex items-center bg-white py-3 pr-6 pl-12 shadow-sm rounded-r-2xl">
|
||||
<img src="assets/images/logo.webp" alt="Logo" className="h-6 w-6" />
|
||||
<Image
|
||||
src="/assets/images/logo.webp"
|
||||
alt="Logo"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span className="ml-1 text-2xl font-bold text-[#ff256d]">
|
||||
PlanPost AI
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from "react";
|
||||
import styles from "./HeroSection.module.css";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
const HeroSection: React.FC = () => {
|
||||
return (
|
||||
<section className="header">
|
||||
|
|
@ -14,13 +15,16 @@ const HeroSection: React.FC = () => {
|
|||
{/* Right Background */}
|
||||
<div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
|
||||
<div
|
||||
className="absolute top-0 left-[-150px] mt-0 md:mt-40 ml-16 h-[542px] flex-col justify-start items-start gap-2.5 inline-flex z-50"
|
||||
className="absolute top-0 -left-[150px] mt-0 md:mt-40 ml-16 h-[542px] flex flex-col justify-start items-start gap-2.5 z-50"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="2000"
|
||||
>
|
||||
<img
|
||||
<Image
|
||||
src="/assets/images/hero-temp-slider.png"
|
||||
alt="Hero Slider"
|
||||
width={750}
|
||||
height={542}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,10 +69,12 @@ const HeroSection: React.FC = () => {
|
|||
className="ml-5 mt-5 px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
|
||||
>
|
||||
Generate
|
||||
<img
|
||||
<Image
|
||||
src="/assets/svg/generate-icon.svg"
|
||||
alt="Generate Icon"
|
||||
className="w-6 h-6"
|
||||
height={24}
|
||||
width={24}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -79,7 +85,12 @@ const HeroSection: React.FC = () => {
|
|||
|
||||
{/* Social Icons */}
|
||||
<div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
|
||||
<img src="/assets/images/social-icons.png" alt="Social Icons" />
|
||||
<Image
|
||||
src="/assets/images/social-icons.png"
|
||||
alt="Social Icons"
|
||||
height={500}
|
||||
width={500}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const SocialSection: React.FC = () => {
|
||||
return (
|
||||
<section className="social" data-aos="fade-up" data-aos-duration="1500">
|
||||
<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 className="absolute -top-[200px]">
|
||||
<Image
|
||||
src="/assets/images/temp-example.png"
|
||||
alt="Example Image"
|
||||
width={1200}
|
||||
height={300}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue