planpost-offer-landing/src/components/HeroSection.tsx

"use client";

import React from "react";
import styles from "./HeroSection.module.css";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";

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-[410px] md:h-[1075px]`}
          ></div>

          {/* Right Background */}
          <div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
            <motion.div
              initial={{ x: 100, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{
                duration: 0.8,
                ease: "easeOut",
                delay: 0.2,
              }}
              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"
            >
              <motion.div
                whileHover={{
                  scale: 1.02,
                  transition: { duration: 0.3 },
                }}
              >
                <Image
                  src="/assets/images/hero-temp-slider.png"
                  alt="Hero Slider"
                  width={750}
                  height={542}
                  priority
                  className="drop-shadow-2xl"
                />
              </motion.div>
            </motion.div>
          </div>

          {/* Main Content */}
          <motion.div
            initial={{ y: 50, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              duration: 0.6,
              ease: "easeOut",
            }}
            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-4xl lg:text-6xl leading-5xl font-normal font-['Gendy']">
                <span className="text-[#ff256d] md:text-white">G</span>
                <span className="text-[#252525]">
                  row Smarter, Not Harder — Your AI Marketing Assistant for
                  Content, Ads & SEO
                </span>
              </div>
              <p className="w-full md:w-10/12 text-xs md:text-[15px] lg:text-[20px] mt-4 leading-relaxed md:leading-loose">
                PlanPost AI helps you create 30 days of social media posts, ad
                copy, graphics, videos, and SEO-ready content in just seconds.
                From product background generation to ad campaigns, our AI
                assistant helps you save time, cut costs, and grow smarter and
                faster.
              </p>

              <div className="flex">
                <motion.div
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.4, duration: 0.6 }}
                  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>
                </motion.div>

                {/* CTA Button */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.6, duration: 0.6 }}
                >
                  <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"
                  >
                    Try for free
                    <Image
                      src="/assets/svg/generate-icon.svg"
                      alt="Generate Icon"
                      className="w-6 h-6"
                      height={24}
                      width={24}
                    />
                  </Link>
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Social Icons */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{
            duration: 0.8,
            ease: [0.4, 0, 0.2, 1],
            delay: 0.4,
          }}
          className="absolute top-[77px] left-[70px] lg:top-[142px] lg:left-[77px] social-icons-pp z-20"
        >
          <motion.div
            animate={{
              y: [0, -10, 0],
            }}
            transition={{
              duration: 4,
              repeat: Infinity,
              repeatType: "reverse",
              ease: "easeInOut",
            }}
          >
            <Image
              src="/assets/images/social-icons.png"
              alt="Social Icons"
              height={500}
              width={500}
              className="w-[300px] h-[200px] lg:w-[500px] lg:h-[500px] object-contain"
            />
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default HeroSection;