"use client"; import { useQuery } from "@tanstack/react-query"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; import ImageWithFallback from "@/components/common/ImageWithFallback"; import { getPopularStores } from "@/services/store.service"; import config from "@/utils/config"; import { getExtensionDetails } from "@/utils/helper"; const RatingSVG = () => ( ); const SavingsSVG = () => ( ); const ExtensionSVG = () => ( ); const POINTS_DATA = [ { Icon: RatingSVG, title: "30K+", subtitle: "5-Star Ratings", }, { Icon: SavingsSVG, title: "$600+", subtitle: "Saved Per Year", }, { Icon: ExtensionSVG, title: "Top-Rated", subtitle: " Shopping Extension", }, ]; export default function HomePage() { const { browser, href } = getExtensionDetails(); const { data } = useQuery({ queryKey: ["popular-stores"], queryFn: getPopularStores, }); const POPULAR_STORES = Object.values(data?.data || {}) || []; // Modal open AFTER 2 seconds useEffect(() => { const timer = setTimeout(() => { const modalEl = document.getElementById("coupon-modal"); if (modalEl && (window as any).bootstrap) { const modal = new (window as any).bootstrap.Modal(modalEl); modal.show(); } }, 2000); return () => clearTimeout(timer); }, []); const SectionHero = useMemo( () => (

Turn Every Purchase Into Savings With Cash Back & Coupons at 10,000+ Stores

Rebates.com finds coupons, activates Cash Back, and helps you pay less without extra effort.

Join now and earn a $10 bonus.*

Get It Free for Your Browser
), // eslint-disable-next-line react-hooks/exhaustive-deps [], ); const SectionHowItWorks = useMemo( () => (

Start Saving in Three Easy Steps

), [], ); const SectionCenterBanner = useMemo( () => (

$4.6 Billion Paid Out to 17 Million Members. Don’t Miss Out.

Your go-to stores are even better when Cash Back is built in.

Add To Browser
), // eslint-disable-next-line react-hooks/exhaustive-deps [], ); const SectionFeatures = useMemo( () => (

Don’t Let Savings Slip By

The Rebates.com browser extension helps you save automatically while you shop.

{/* Feature 1 */}
Cash Back Alerts, Right on Store Sites

Just shop as usual. The extension shows Cash Back offers as you browse.

{/* Feature 2 */}
No More Coupon Chasing

We apply available codes so you don’t have to.

{/* Feature 3 */}
We Track Down the Better Deal

Feel good knowing you paid a solid price on top of earning Cash Back.

), [], ); const SectionVideoCTA = useMemo( () => (

Stop Overpaying. Start Saving Smarter.

Join 8 million users choosing a better way to save!

Add to {browser}. It’s Free
), // eslint-disable-next-line react-hooks/exhaustive-deps [], ); const PopularStoresSection = ({ POPULAR_STORES }: any) => { return (

More Than 30,000 Stores

From everyday buys to big trips, we check for coupons across thousands of shopping sites.

    {POPULAR_STORES.map((store: any) => (
    • ))}
); }; const PointsSection = ({ POINTS_DATA }: any) => { return (

Shop Through Our Desktop Extension and Get More Value From Every Purchase

{POINTS_DATA.map( ({ Icon, title, subtitle }: any, index: number) => (

{title}

{subtitle}

), )}
); }; function ReadMoreText({ title, shortText, fullText, }: { title: string; shortText: string; fullText: string; }) { const [expanded, setExpanded] = useState(false); const text = useMemo( () => (expanded ? fullText : shortText), [expanded, shortText, fullText], ); return (

{title}

{text} {!expanded && ...}

); } const FinalCTASection = useMemo( () => (

Start Earning Cash Back With One Click

Add to {browser} and Save
), // eslint-disable-next-line react-hooks/exhaustive-deps [], ); return ( <> {/* 1 */} {SectionHero} {/* 2 */} {SectionHowItWorks} {/* 3 */} {SectionCenterBanner} {/* 4 */} {SectionFeatures} {/* 5 */} {SectionVideoCTA} {/* 6 */} {/* 7 */} {/* 8 */} {/* 9 */} {FinalCTASection} {/* MODAL */}
Special deal

Hold On!

You Almost Missed Easy Savings

Enable free coupons in two clicks and save at 200,000+ stores.

); }