Illuminix_nextjs/src/ui/page/page-remark.tsx

import { useTranslations } from "next-intl";

export default function PageRemark() {
    const t = useTranslations("pageRemark");
    return (
        <section className="content-visibility-auto text-neutral-dark mt-24 relative -left-[10%] lg:-left-16 flex w-[120%] lg:w-[110%] justify-center items-center mx-auto">
            <div className="relative w-[10%] lg:w-[50%] mr-auto space-y-2">
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="rotate-180 mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="rotate-180 mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
            </div>
            <div className="space-y-5 py-4 flex flex-col items-center w-[80%] lg:w-full border-x border-[#1a1b1e]">
                <h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 text-balance mx-auto'>
                    {t("heading")}
                </h2>
                <p className="text-center w-[95%] mx-auto text-balance">
                    {t("description")}
                </p>
                <div className="btn-tf-primary-container mx-auto lg:mx-0">
                    <a
                        className="btn-tf btn-tf-primary"
                        href="https://www.revid.ai?aff=nVYypb"
                    >
                        {t("createVideosNow")}
                    </a>
                </div>
            </div>
            <div className="relative w-[10%] lg:w-[50%] ml-auto space-y-2">
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
                <div className="rfm-marquee-container">
                    <div className="rfm-marquee">
                        <div className="rfm-initial-child-container">
                            <div className="rfm-child">
                                {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                            </div>
                        </div>
                    </div>
                    <div className="rfm-marquee">
                        <div className="rfm-child">
                            {/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}