89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import styles from "./HeroSection.module.css";
|
|
import Link from "next/link";
|
|
const HeroSection: React.FC = () => {
|
|
return (
|
|
<section className="header">
|
|
<div className="relative w-full h-[1075px] z-0">
|
|
<div className="absolute w-full flex flex-col md:flex-row">
|
|
{/* Left Background */}
|
|
<div
|
|
className={`${styles.bgLeft} w-full md:w-1/2 h-[500px] md:h-[1075px]`}
|
|
></div>
|
|
|
|
{/* 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"
|
|
data-aos="fade-left"
|
|
data-aos-duration="2000"
|
|
>
|
|
<img
|
|
src="/assets/images/hero-temp-slider.png"
|
|
alt="Hero Slider"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div
|
|
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'] ">
|
|
<span className="text-[#ff256d] md:text-white ">R</span>
|
|
<span className="text-[#252525] ">
|
|
evolutionize Your Social Media Strategy with a Personalized
|
|
</span>
|
|
<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">
|
|
Customize your social media content, automate posts, and grow
|
|
your brand with a personalized AI assistant designed for
|
|
businesses and marketers.
|
|
</p>
|
|
|
|
<div className="flex">
|
|
<div className="flex mt-5 items-center">
|
|
<div>
|
|
<p className="text-[#252525] text-[10px] md:text-xs font-normal">
|
|
Customers Rating
|
|
</p>
|
|
<p className="text-[#ff256d] text-xs md:text-md font-semibold">
|
|
⭐ 4.8
|
|
</p>
|
|
<p className="text-[#727272] text-[10px] md:text-xs">
|
|
(8,279 reviews)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<Link
|
|
href="https://dashboard.planpostai.com/"
|
|
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
|
|
src="/assets/svg/generate-icon.svg"
|
|
alt="Generate Icon"
|
|
className="w-6 h-6"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
{/* Customer Reviews */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Icons */}
|
|
<div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
|
|
<img src="/assets/images/social-icons.png" alt="Social Icons" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|