[
  {
    "path": ".eslintrc.json",
    "content": "{\n    \"extends\": \"next/core-web-vitals\",\n    \"rules\": {\n        \"react/no-unescaped-entities\": \"off\",\n        \"@next/next/no-page-custom-font\": \"off\"\n    }\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n.env\n\n# vercel\n.vercel\n"
  },
  {
    "path": "README.md",
    "content": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
  },
  {
    "path": "components/CartItem.jsx",
    "content": "import Image from \"next/image\";\nimport React from \"react\";\nimport { RiDeleteBin6Line } from \"react-icons/ri\";\nimport { updateCart, removeFromCart } from \"@/store/cartSlice\";\nimport { useDispatch } from \"react-redux\";\nconst CartItem = ({ data }) => {\n    const p = data.attributes;\n\n    const dispatch = useDispatch();\n\n    const updateCartItem = (e, key) => {\n        let payload = {\n            key,\n            val: key === \"quantity\" ? parseInt(e.target.value) : e.target.value,\n            id: data.id,\n        };\n        dispatch(updateCart(payload));\n    };\n\n    return (\n        <div className=\"flex py-5 gap-3 md:gap-5 border-b\">\n            {/* IMAGE START */}\n            <div className=\"shrink-0 aspect-square w-[50px] md:w-[120px]\">\n                <Image\n                    src={p.thumbnail.data.attributes.url}\n                    alt={p.name}\n                    width={120}\n                    height={120}\n                />\n            </div>\n            {/* IMAGE END */}\n\n            <div className=\"w-full flex flex-col\">\n                <div className=\"flex flex-col md:flex-row justify-between\">\n                    {/* PRODUCT TITLE */}\n                    <div className=\"text-lg md:text-2xl font-semibold text-black/[0.8]\">\n                        {p.name}\n                    </div>\n\n                    {/* PRODUCT SUBTITLE */}\n                    <div className=\"text-sm md:text-md font-medium text-black/[0.5] block md:hidden\">\n                        {p.subtitle}\n                    </div>\n\n                    {/* PRODUCT PRICE */}\n                    <div className=\"text-sm md:text-md font-bold text-black/[0.5] mt-2\">\n                        MRP : &#8377;{p.price}\n                    </div>\n                </div>\n\n                {/* PRODUCT SUBTITLE */}\n                <div className=\"text-md font-medium text-black/[0.5] hidden md:block\">\n                    {p.subtitle}\n                </div>\n\n                <div className=\"flex items-center justify-between mt-4\">\n                    <div className=\"flex items-center gap-2 md:gap-10 text-black/[0.5] text-sm md:text-md\">\n                        <div className=\"flex items-center gap-1\">\n                            <div className=\"font-semibold\">Size:</div>\n                            <select\n                                className=\"hover:text-black\"\n                                onChange={(e) =>\n                                    updateCartItem(e, \"selectedSize\")\n                                }\n                            >\n                                {p.size.data.map((item, i) => {\n                                    return (\n                                        <option\n                                            key={i}\n                                            value={item.size}\n                                            disabled={\n                                                !item.enabled ? true : false\n                                            }\n                                            selected={\n                                                data.selectedSize === item.size\n                                            }\n                                        >\n                                            {item.size}\n                                        </option>\n                                    );\n                                })}\n                            </select>\n                        </div>\n\n                        <div className=\"flex items-center gap-1\">\n                            <div className=\"font-semibold\">Quantity:</div>\n                            <select\n                                className=\"hover:text-black\"\n                                onChange={(e) => updateCartItem(e, \"quantity\")}\n                            >\n                                {Array.from(\n                                    { length: 10 },\n                                    (_, i) => i + 1\n                                ).map((q, i) => {\n                                    return (\n                                        <option\n                                            key={i}\n                                            value={q}\n                                            selected={data.quantity === q}\n                                        >\n                                            {q}\n                                        </option>\n                                    );\n                                })}\n                            </select>\n                        </div>\n                    </div>\n                    <RiDeleteBin6Line\n                        onClick={() =>\n                            dispatch(removeFromCart({ id: data.id }))\n                        }\n                        className=\"cursor-pointer text-black/[0.5] hover:text-black text-[16px] md:text-[20px]\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default CartItem;\n"
  },
  {
    "path": "components/Footer.jsx",
    "content": "import Link from \"next/link\";\nimport React from \"react\";\nimport { FaFacebookF, FaTwitter, FaYoutube, FaInstagram } from \"react-icons/fa\";\nimport Wrapper from \"./Wrapper\";\n\nconst Footer = () => {\n    return (\n        <footer className=\"bg-black text-white pt-14 pb-3\">\n            <Wrapper className=\"flex justify-between flex-col md:flex-row gap-[50px] md:gap-0\">\n                {/* LEFT START */}\n                <div className=\"flex gap-[50px] md:gap-[75px] lg:gap-[100px] flex-col md:flex-row\">\n                    {/* MENU START */}\n                    <div className=\"flex flex-col gap-3 shrink-0\">\n                        <div className=\"font-oswald font-medium uppercase text-sm cursor-pointer\">\n                            Find a store\n                        </div>\n                        <div className=\"font-oswald font-medium uppercase text-sm cursor-pointer\">\n                            become a partner\n                        </div>\n                        <div className=\"font-oswald font-medium uppercase text-sm cursor-pointer\">\n                            sign up for email\n                        </div>\n                        <div className=\"font-oswald font-medium uppercase text-sm cursor-pointer\">\n                            send us feedback\n                        </div>\n                        <div className=\"font-oswald font-medium uppercase text-sm cursor-pointer\">\n                            student discount\n                        </div>\n                    </div>\n                    {/* MENU END */}\n\n                    {/* NORMAL MENU START */}\n                    <div className=\"flex gap-[50px] md:gap-[75px] lg:gap-[100px] shrink-0\">\n                        {/* MENU START */}\n                        <div className=\"flex flex-col gap-3\">\n                            <div className=\"font-oswald font-medium uppercase text-sm\">\n                                get help\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Order Status\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Delivery\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Returns\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Payment Options\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Contact Us\n                            </div>\n                        </div>\n                        {/* MENU END */}\n\n                        {/* MENU START */}\n                        <div className=\"flex flex-col gap-3\">\n                            <div className=\"font-oswald font-medium uppercase text-sm\">\n                                About nike\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                News\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Careers\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Investors\n                            </div>\n                            <div className=\"text-sm text-white/[0.5] hover:text-white cursor-pointer\">\n                                Sustainability\n                            </div>\n                        </div>\n                        {/* MENU END */}\n                    </div>\n                    {/* NORMAL MENU END */}\n                </div>\n                {/* LEFT END */}\n\n                {/* RIGHT START */}\n                <div className=\"flex gap-4 justify-center md:justify-start\">\n                    <div\n                        onClick={() =>\n                            window.open(\"https://facebook.com\", \"_blank\")\n                        }\n                        className=\"w-10 h-10 rounded-full bg-white/[0.25] flex items-center justify-center text-black hover:bg-white/[0.5] cursor-pointer\"\n                    >\n                        <FaFacebookF size={20} />\n                    </div>\n                    <Link\n                        href=\"https://twitter.com\"\n                        className=\"w-10 h-10 rounded-full bg-white/[0.25] flex items-center justify-center text-black hover:bg-white/[0.5] cursor-pointer\"\n                    >\n                        <FaTwitter size={20} />\n                    </Link>\n                    <div className=\"w-10 h-10 rounded-full bg-white/[0.25] flex items-center justify-center text-black hover:bg-white/[0.5] cursor-pointer\">\n                        <FaYoutube size={20} />\n                    </div>\n                    <div className=\"w-10 h-10 rounded-full bg-white/[0.25] flex items-center justify-center text-black hover:bg-white/[0.5] cursor-pointer\">\n                        <FaInstagram size={20} />\n                    </div>\n                </div>\n                {/* RIGHT END */}\n            </Wrapper>\n            <Wrapper className=\"flex justify-between mt-10 flex-col md:flex-row gap-[10px] md:gap-0\">\n                {/* LEFT START */}\n                <div className=\"text-[12px] text-white/[0.5] hover:text-white cursor-pointer text-center md:text-left\">\n                    © 2023 Nike, Inc. All Rights Reserved\n                </div>\n                {/* LEFT END */}\n\n                {/* RIGHT START */}\n                <div className=\"flex gap-2 md:gap-5 text-center md:text-left flex-wrap justify-center\">\n                    <div className=\"text-[12px] text-white/[0.5] hover:text-white cursor-pointer\">\n                        Guides\n                    </div>\n                    <div className=\"text-[12px] text-white/[0.5] hover:text-white cursor-pointer\">\n                        Terms of Sale\n                    </div>\n                    <div className=\"text-[12px] text-white/[0.5] hover:text-white cursor-pointer\">\n                        Terms of Use\n                    </div>\n                    <div className=\"text-[12px] text-white/[0.5] hover:text-white cursor-pointer\">\n                        Privacy Policy\n                    </div>\n                </div>\n                {/* RIGHT END */}\n            </Wrapper>\n        </footer>\n    );\n};\n\nexport default Footer;\n"
  },
  {
    "path": "components/Header.jsx",
    "content": "import React, { useState, useEffect } from \"react\";\nimport Wrapper from \"./Wrapper\";\n\nimport Link from \"next/link\";\nimport Menu from \"./Menu\";\nimport MenuMobile from \"./MenuMobile\";\n\nimport { IoMdHeartEmpty } from \"react-icons/io\";\nimport { BsCart } from \"react-icons/bs\";\nimport { BiMenuAltRight } from \"react-icons/bi\";\nimport { VscChromeClose } from \"react-icons/vsc\";\nimport { fetchDataFromApi } from \"@/utils/api\";\nimport { useSelector } from \"react-redux\";\n\nconst Header = () => {\n    const [mobileMenu, setMobileMenu] = useState(false);\n    const [showCatMenu, setShowCatMenu] = useState(false);\n    const [show, setShow] = useState(\"translate-y-0\");\n    const [lastScrollY, setLastScrollY] = useState(0);\n    const [categories, setCategories] = useState(null);\n\n    const { cartItems } = useSelector((state) => state.cart);\n\n    const controlNavbar = () => {\n        if (window.scrollY > 200) {\n            if (window.scrollY > lastScrollY && !mobileMenu) {\n                setShow(\"-translate-y-[80px]\");\n            } else {\n                setShow(\"shadow-sm\");\n            }\n        } else {\n            setShow(\"translate-y-0\");\n        }\n        setLastScrollY(window.scrollY);\n    };\n\n    useEffect(() => {\n        window.addEventListener(\"scroll\", controlNavbar);\n        return () => {\n            window.removeEventListener(\"scroll\", controlNavbar);\n        };\n    }, [lastScrollY]);\n\n    useEffect(() => {\n        fetchCategories();\n    }, []);\n\n    const fetchCategories = async () => {\n        const { data } = await fetchDataFromApi(\"/api/categories?populate=*\");\n        setCategories(data);\n    };\n\n    return (\n        <header\n            className={`w-full h-[50px] md:h-[80px] bg-white flex items-center justify-between z-20 sticky top-0 transition-transform duration-300 ${show}`}\n        >\n            <Wrapper className=\"h-[60px] flex justify-between items-center\">\n                <Link href=\"/\">\n                    <img src=\"/logo.svg\" className=\"w-[40px] md:w-[60px]\" />\n                </Link>\n\n                <Menu\n                    showCatMenu={showCatMenu}\n                    setShowCatMenu={setShowCatMenu}\n                    categories={categories}\n                />\n\n                {mobileMenu && (\n                    <MenuMobile\n                        showCatMenu={showCatMenu}\n                        setShowCatMenu={setShowCatMenu}\n                        setMobileMenu={setMobileMenu}\n                        categories={categories}\n                    />\n                )}\n\n                <div className=\"flex items-center gap-2 text-black\">\n                    {/* Icon start */}\n                    <div className=\"w-8 md:w-12 h-8 md:h-12 rounded-full flex justify-center items-center hover:bg-black/[0.05] cursor-pointer relative\">\n                        <IoMdHeartEmpty className=\"text-[19px] md:text-[24px]\" />\n                        <div className=\"h-[14px] md:h-[18px] min-w-[14px] md:min-w-[18px] rounded-full bg-red-600 absolute top-1 left-5 md:left-7 text-white text-[10px] md:text-[12px] flex justify-center items-center px-[2px] md:px-[5px]\">\n                            51\n                        </div>\n                    </div>\n                    {/* Icon end */}\n\n                    {/* Icon start */}\n                    <Link href=\"/cart\">\n                        <div className=\"w-8 md:w-12 h-8 md:h-12 rounded-full flex justify-center items-center hover:bg-black/[0.05] cursor-pointer relative\">\n                            <BsCart className=\"text-[15px] md:text-[20px]\" />\n                            {cartItems.length > 0 && (\n                                <div className=\"h-[14px] md:h-[18px] min-w-[14px] md:min-w-[18px] rounded-full bg-red-600 absolute top-1 left-5 md:left-7 text-white text-[10px] md:text-[12px] flex justify-center items-center px-[2px] md:px-[5px]\">\n                                    {cartItems.length}\n                                </div>\n                            )}\n                        </div>\n                    </Link>\n                    {/* Icon end */}\n\n                    {/* Mobile icon start */}\n                    <div className=\"w-8 md:w-12 h-8 md:h-12 rounded-full flex md:hidden justify-center items-center hover:bg-black/[0.05] cursor-pointer relative -mr-2\">\n                        {mobileMenu ? (\n                            <VscChromeClose\n                                className=\"text-[16px]\"\n                                onClick={() => setMobileMenu(false)}\n                            />\n                        ) : (\n                            <BiMenuAltRight\n                                className=\"text-[20px]\"\n                                onClick={() => setMobileMenu(true)}\n                            />\n                        )}\n                    </div>\n                    {/* Mobile icon end */}\n                </div>\n            </Wrapper>\n        </header>\n    );\n};\n\nexport default Header;\n"
  },
  {
    "path": "components/HeroBanner.jsx",
    "content": "import React from \"react\";\n\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\nimport { Carousel } from \"react-responsive-carousel\";\n\nimport { BiArrowBack } from \"react-icons/bi\";\n\nconst HeroBanner = () => {\n    return (\n        <div className=\"relative text-white text-[20px] w-full max-w-[1360px] mx-auto\">\n            <Carousel\n                autoPlay={true}\n                infiniteLoop={true}\n                showThumbs={false}\n                showIndicators={false}\n                showStatus={false}\n                renderArrowPrev={(clickHandler, hasPrev) => (\n                    <div\n                        onClick={clickHandler}\n                        className=\"absolute right-[31px] md:right-[51px] bottom-0 w-[30px] md:w-[50px] h-[30px] md:h-[50px] bg-black z-10 flex items-center justify-center cursor-pointer hover:opacity-90\"\n                    >\n                        <BiArrowBack className=\"text-sm md:text-lg\" />\n                    </div>\n                )}\n                renderArrowNext={(clickHandler, hasNext) => (\n                    <div\n                        onClick={clickHandler}\n                        className=\"absolute right-0 bottom-0 w-[30px] md:w-[50px] h-[30px] md:h-[50px] bg-black z-10 flex items-center justify-center cursor-pointer hover:opacity-90\"\n                    >\n                        <BiArrowBack className=\"rotate-180 text-sm md:text-lg\" />\n                    </div>\n                )}\n            >\n                <div>\n                    <img\n                        src=\"/slide-1.png\"\n                        className=\"aspect-[16/10] md:aspect-auto object-cover\"\n                    />\n                    <div className=\"px-[15px] md:px-[40px] py-[10px] md:py-[25px] font-oswald bg-white absolute bottom-[25px] md:bottom-[75px] left-0 text-black/[0.9] text-[15px] md:text-[30px] uppercase font-medium cursor-pointer hover:opacity-90\">\n                        Shop now\n                    </div>\n                </div>\n\n                <div>\n                    <img\n                        src=\"/slide-2.png\"\n                        className=\"aspect-[16/10] md:aspect-auto object-cover\"\n                    />\n                    <div className=\"px-[15px] md:px-[40px] py-[10px] md:py-[25px] font-oswald bg-white absolute bottom-[25px] md:bottom-[75px] left-0 text-black/[0.9] text-[15px] md:text-[30px] uppercase font-medium cursor-pointer hover:opacity-90\">\n                        Shop now\n                    </div>\n                </div>\n\n                <div>\n                    <img\n                        src=\"/slide-3.png\"\n                        className=\"aspect-[16/10] md:aspect-auto object-cover\"\n                    />\n                    <div className=\"px-[15px] md:px-[40px] py-[10px] md:py-[25px] font-oswald bg-white absolute bottom-[25px] md:bottom-[75px] left-0 text-black/[0.9] text-[15px] md:text-[30px] uppercase font-medium cursor-pointer hover:opacity-90\">\n                        Shop now\n                    </div>\n                </div>\n            </Carousel>\n        </div>\n    );\n};\n\nexport default HeroBanner;\n"
  },
  {
    "path": "components/Menu.jsx",
    "content": "import React from \"react\";\nimport Link from \"next/link\";\nimport { BsChevronDown } from \"react-icons/bs\";\n\nconst data = [\n    { id: 1, name: \"Home\", url: \"/\" },\n    { id: 2, name: \"About\", url: \"/about\" },\n    { id: 3, name: \"Categories\", subMenu: true },\n    { id: 4, name: \"Contact\", url: \"/contact\" },\n];\n\nconst subMenuData = [\n    { id: 1, name: \"Jordan\", doc_count: 11 },\n    { id: 2, name: \"Sneakers\", doc_count: 8 },\n    { id: 3, name: \"Running shoes\", doc_count: 64 },\n    { id: 4, name: \"Football shoes\", doc_count: 107 },\n];\n\nconst Menu = ({ showCatMenu, setShowCatMenu, categories }) => {\n    return (\n        <ul className=\"hidden md:flex items-center gap-8 font-medium text-black\">\n            {data.map((item) => {\n                return (\n                    <React.Fragment key={item.id}>\n                        {!!item?.subMenu ? (\n                            <li\n                                className=\"cursor-pointer flex items-center gap-2 relative\"\n                                onMouseEnter={() => setShowCatMenu(true)}\n                                onMouseLeave={() => setShowCatMenu(false)}\n                            >\n                                {item.name}\n                                <BsChevronDown size={14} />\n\n                                {showCatMenu && (\n                                    <ul className=\"bg-white absolute top-6 left-0 min-w-[250px] px-1 py-1 text-black shadow-lg\">\n                                        {categories?.map(\n                                            ({ attributes: c, id }) => {\n                                                return (\n                                                    <Link\n                                                        key={id}\n                                                        href={`/category/${c.slug}`}\n                                                        onClick={() =>\n                                                            setShowCatMenu(\n                                                                false\n                                                            )\n                                                        }\n                                                    >\n                                                        <li className=\"h-12 flex justify-between items-center px-3 hover:bg-black/[0.03] rounded-md\">\n                                                            {c.name}\n                                                            <span className=\"opacity-50 text-sm\">\n                                                                {`(${c.products.data.length})`}\n                                                            </span>\n                                                        </li>\n                                                    </Link>\n                                                );\n                                            }\n                                        )}\n                                    </ul>\n                                )}\n                            </li>\n                        ) : (\n                            <li className=\"cursor-pointer\">\n                                <Link href={item?.url}>{item.name}</Link>\n                            </li>\n                        )}\n                    </React.Fragment>\n                );\n            })}\n        </ul>\n    );\n};\n\nexport default Menu;\n"
  },
  {
    "path": "components/MenuMobile.jsx",
    "content": "import React from \"react\";\nimport Link from \"next/link\";\nimport { BsChevronDown } from \"react-icons/bs\";\n\nconst data = [\n    { id: 1, name: \"Home\", url: \"/\" },\n    { id: 2, name: \"About\", url: \"/about\" },\n    { id: 3, name: \"Categories\", subMenu: true },\n    { id: 4, name: \"Contact\", url: \"/contact\" },\n];\n\nconst subMenuData = [\n    { id: 1, name: \"Jordan\", doc_count: 11 },\n    { id: 2, name: \"Sneakers\", doc_count: 8 },\n    { id: 3, name: \"Running shoes\", doc_count: 64 },\n    { id: 4, name: \"Football shoes\", doc_count: 107 },\n];\n\nconst MenuMobile = ({\n    showCatMenu,\n    setShowCatMenu,\n    setMobileMenu,\n    categories,\n}) => {\n    return (\n        <ul className=\"flex flex-col md:hidden font-bold absolute top-[50px] left-0 w-full h-[calc(100vh-50px)] bg-white border-t text-black\">\n            {data.map((item) => {\n                return (\n                    <React.Fragment key={item.id}>\n                        {!!item?.subMenu ? (\n                            <li\n                                className=\"cursor-pointer py-4 px-5 border-b flex flex-col relative\"\n                                onClick={() => setShowCatMenu(!showCatMenu)}\n                            >\n                                <div className=\"flex justify-between items-center\">\n                                    {item.name}\n                                    <BsChevronDown size={14} />\n                                </div>\n\n                                {showCatMenu && (\n                                    <ul className=\"bg-black/[0.05] -mx-5 mt-4 -mb-4\">\n                                        {categories?.map(\n                                            ({ attributes: c, id }) => {\n                                                return (\n                                                    <Link\n                                                        key={id}\n                                                        href={`/category/${c.slug}`}\n                                                        onClick={() => {\n                                                            setShowCatMenu(\n                                                                false\n                                                            );\n                                                            setMobileMenu(\n                                                                false\n                                                            );\n                                                        }}\n                                                    >\n                                                        <li className=\"py-4 px-8 border-t flex justify-between\">\n                                                            {c.name}\n                                                            <span className=\"opacity-50 text-sm\">\n                                                                {`(${c.products.data.length})`}\n                                                            </span>\n                                                        </li>\n                                                    </Link>\n                                                );\n                                            }\n                                        )}\n                                    </ul>\n                                )}\n                            </li>\n                        ) : (\n                            <li className=\"py-4 px-5 border-b\">\n                                <Link\n                                    href={item?.url}\n                                    onClick={() => setMobileMenu(false)}\n                                >\n                                    {item.name}\n                                </Link>\n                            </li>\n                        )}\n                    </React.Fragment>\n                );\n            })}\n        </ul>\n    );\n};\n\nexport default MenuMobile;\n"
  },
  {
    "path": "components/ProductCard.jsx",
    "content": "import { getDiscountedPricePercentage } from \"@/utils/helper\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport React from \"react\";\nconst ProductCard = ({ data: { attributes: p, id } }) => {\n    return (\n        <Link\n            href={`/product/${p.slug}`}\n            className=\"transform overflow-hidden bg-white duration-200 hover:scale-105 cursor-pointer\"\n        >\n            <Image\n                width={500}\n                height={500}\n                src={p.thumbnail.data.attributes.url}\n                alt={p.name}\n            />\n            <div className=\"p-4 text-black/[0.9]\">\n                <h2 className=\"text-lg font-medium\">{p.name}</h2>\n                <div className=\"flex items-center text-black/[0.5]\">\n                    <p className=\"mr-2 text-lg font-semibold\">\n                        &#8377;{p.price}\n                    </p>\n\n                    {p.original_price && (\n                        <>\n                            <p className=\"text-base  font-medium line-through\">\n                                &#8377;{p.original_price}\n                            </p>\n                            <p className=\"ml-auto text-base font-medium text-green-500\">\n                                {getDiscountedPricePercentage(\n                                    p.original_price,\n                                    p.price\n                                )}\n                                % off\n                            </p>\n                        </>\n                    )}\n                </div>\n            </div>\n        </Link>\n    );\n};\n\nexport default ProductCard;\n"
  },
  {
    "path": "components/ProductDetailsCarousel.jsx",
    "content": "import React from \"react\";\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\nimport { Carousel } from \"react-responsive-carousel\";\n\nconst ProductDetailsCarousel = ({ images }) => {\n    return (\n        <div className=\"text-white text-[20px] w-full max-w-[1360px] mx-auto sticky top-[50px]\">\n            <Carousel\n                infiniteLoop={true}\n                showIndicators={false}\n                showStatus={false}\n                thumbWidth={60}\n                className=\"productCarousel\"\n            >\n                {images?.map((img) => (\n                    <img\n                        key={img.id}\n                        src={img.attributes.url}\n                        alt={img.attributes.name}\n                    />\n                ))}\n                {/* <img src=\"/p2.png\" />\n                <img src=\"/p3.png\" />\n                <img src=\"/p4.png\" />\n                <img src=\"/p5.png\" />\n                <img src=\"/p6.png\" />\n                <img src=\"/p7.png\" /> */}\n            </Carousel>\n        </div>\n    );\n};\n\nexport default ProductDetailsCarousel;\n"
  },
  {
    "path": "components/RelatedProducts.jsx",
    "content": "import React from \"react\";\n\nimport Carousel from \"react-multi-carousel\";\nimport \"react-multi-carousel/lib/styles.css\";\nimport ProductCard from \"./ProductCard\";\n\nconst RelatedProducts = ({ products }) => {\n    const responsive = {\n        desktop: {\n            breakpoint: { max: 3000, min: 1024 },\n            items: 3,\n        },\n        tablet: {\n            breakpoint: { max: 1023, min: 464 },\n            items: 2,\n        },\n        mobile: {\n            breakpoint: { max: 767, min: 0 },\n            items: 1,\n        },\n    };\n\n    return (\n        <div className=\"mt-[50px] md:mt-[100px] mb-[100px] md:mb-0\">\n            <div className=\"text-2xl font-bold mb-5\">You Might Also Like</div>\n            <Carousel\n                responsive={responsive}\n                containerClass=\"-mx-[10px]\"\n                itemClass=\"px-[10px]\"\n            >\n                {products?.data?.map((product) => (\n                    <ProductCard key={product?.id} data={product} />\n                ))}\n            </Carousel>\n        </div>\n    );\n};\n\nexport default RelatedProducts;\n"
  },
  {
    "path": "components/Wrapper.jsx",
    "content": "import React from \"react\";\n\nconst Wrapper = ({ children, className }) => {\n    return (\n        <div\n            className={`w-full max-w-[1280px] px-5 md:px-10 mx-auto ${\n                className || \"\"\n            }`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default Wrapper;\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n    reactStrictMode: true,\n    eslint: {\n        ignoreDuringBuilds: true,\n    },\n    images: {\n        domains: [\"res.cloudinary.com\"],\n    },\n};\n\nmodule.exports = nextConfig;\n"
  },
  {
    "path": "package.json",
    "content": "{\n    \"name\": \"frontend\",\n    \"version\": \"0.1.0\",\n    \"private\": true,\n    \"scripts\": {\n        \"dev\": \"next dev\",\n        \"build\": \"next build\",\n        \"start\": \"next start\",\n        \"lint\": \"next lint\"\n    },\n    \"dependencies\": {\n        \"@next/font\": \"13.1.6\",\n        \"@reduxjs/toolkit\": \"^1.9.3\",\n        \"@stripe/react-stripe-js\": \"^1.16.5\",\n        \"@stripe/stripe-js\": \"^1.48.0\",\n        \"eslint\": \"8.34.0\",\n        \"eslint-config-next\": \"13.1.6\",\n        \"next\": \"13.1.6\",\n        \"react\": \"18.2.0\",\n        \"react-dom\": \"18.2.0\",\n        \"react-icons\": \"^4.7.1\",\n        \"react-markdown\": \"^8.0.5\",\n        \"react-multi-carousel\": \"^2.8.2\",\n        \"react-redux\": \"^8.0.5\",\n        \"react-responsive-carousel\": \"^3.2.23\",\n        \"react-toastify\": \"^9.1.1\",\n        \"swr\": \"^2.1.0\"\n    },\n    \"devDependencies\": {\n        \"autoprefixer\": \"^10.4.14\",\n        \"postcss\": \"^8.4.21\",\n        \"tailwindcss\": \"^3.2.7\"\n    }\n}\n"
  },
  {
    "path": "pages/_app.js",
    "content": "import \"@/styles/globals.css\";\nimport Head from \"next/head\";\n\nimport Header from \"@/components/Header\";\nimport Footer from \"@/components/Footer\";\n\nimport { Provider } from \"react-redux\";\nimport store from \"@/store/store\";\n\nexport default function App({ Component, pageProps }) {\n    return (\n        <>\n            <Head>\n                <title>Online Shoe Store | JS Dev Hindi</title>\n                <meta\n                    name=\"description\"\n                    content=\"Generated by create next app\"\n                />\n                <meta\n                    name=\"viewport\"\n                    content=\"width=device-width, initial-scale=1\"\n                />\n                <link rel=\"icon\" href=\"/favicon.ico\" />\n                <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n                <link\n                    rel=\"preconnect\"\n                    href=\"https://fonts.gstatic.com\"\n                    crossOrigin=\"true\"\n                />\n                <link\n                    href=\"https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n                    rel=\"stylesheet\"\n                />\n            </Head>\n            <Provider store={store}>\n                <Header />\n                <Component {...pageProps} />\n                <Footer />\n            </Provider>\n        </>\n    );\n}\n"
  },
  {
    "path": "pages/_document.js",
    "content": "import { Html, Head, Main, NextScript } from 'next/document'\n\nexport default function Document() {\n  return (\n    <Html lang=\"en\">\n      <Head />\n      <body>\n        <Main />\n        <NextScript />\n      </body>\n    </Html>\n  )\n}\n"
  },
  {
    "path": "pages/api/hello.js",
    "content": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\n\nexport default function handler(req, res) {\n  res.status(200).json({ name: 'John Doe' })\n}\n"
  },
  {
    "path": "pages/cart.js",
    "content": "import React, { useMemo, useState } from \"react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport Wrapper from \"@/components/Wrapper\";\nimport CartItem from \"@/components/CartItem\";\nimport { useSelector } from \"react-redux\";\n\nimport { makePaymentRequest } from \"@/utils/api\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nconst stripePromise = loadStripe(\n    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY\n);\n\nconst Cart = () => {\n    const [loading, setLoading] = useState(false);\n    const { cartItems } = useSelector((state) => state.cart);\n\n    const subTotal = useMemo(() => {\n        return cartItems.reduce(\n            (total, val) => total + val.attributes.price,\n            0\n        );\n    }, [cartItems]);\n\n    const handlePayment = async () => {\n        try {\n            setLoading(true);\n            const stripe = await stripePromise;\n            const res = await makePaymentRequest(\"/api/orders\", {\n                products: cartItems,\n            });\n            await stripe.redirectToCheckout({\n                sessionId: res.stripeSession.id,\n            });\n        } catch (error) {\n            setLoading(false);\n            console.log(error);\n        }\n    };\n\n    return (\n        <div className=\"w-full md:py-20\">\n            <Wrapper>\n                {cartItems.length > 0 && (\n                    <>\n                        {/* HEADING AND PARAGRAPH START */}\n                        <div className=\"text-center max-w-[800px] mx-auto mt-8 md:mt-0\">\n                            <div className=\"text-[28px] md:text-[34px] mb-5 font-semibold leading-tight\">\n                                Shopping Cart\n                            </div>\n                        </div>\n                        {/* HEADING AND PARAGRAPH END */}\n\n                        {/* CART CONTENT START */}\n                        <div className=\"flex flex-col lg:flex-row gap-12 py-10\">\n                            {/* CART ITEMS START */}\n                            <div className=\"flex-[2]\">\n                                <div className=\"text-lg font-bold\">\n                                    Cart Items\n                                </div>\n                                {cartItems.map((item) => (\n                                    <CartItem key={item.id} data={item} />\n                                ))}\n                            </div>\n                            {/* CART ITEMS END */}\n\n                            {/* SUMMARY START */}\n                            <div className=\"flex-[1]\">\n                                <div className=\"text-lg font-bold\">Summary</div>\n\n                                <div className=\"p-5 my-5 bg-black/[0.05] rounded-xl\">\n                                    <div className=\"flex justify-between\">\n                                        <div className=\"uppercase text-md md:text-lg font-medium text-black\">\n                                            Subtotal\n                                        </div>\n                                        <div className=\"text-md md:text-lg font-medium text-black\">\n                                            &#8377;{subTotal}\n                                        </div>\n                                    </div>\n                                    <div className=\"text-sm md:text-md py-5 border-t mt-5\">\n                                        The subtotal reflects the total price of\n                                        your order, including duties and taxes,\n                                        before any applicable discounts. It does\n                                        not include delivery costs and\n                                        international transaction fees.\n                                    </div>\n                                </div>\n\n                                {/* BUTTON START */}\n                                <button\n                                    className=\"w-full py-4 rounded-full bg-black text-white text-lg font-medium transition-transform active:scale-95 mb-3 hover:opacity-75 flex items-center gap-2 justify-center\"\n                                    onClick={handlePayment}\n                                >\n                                    Checkout\n                                    {loading && <img src=\"/spinner.svg\" />}\n                                </button>\n                                {/* BUTTON END */}\n                            </div>\n                            {/* SUMMARY END */}\n                        </div>\n                        {/* CART CONTENT END */}\n                    </>\n                )}\n\n                {/* This is empty screen */}\n                {cartItems.length < 1 && (\n                    <div className=\"flex-[2] flex flex-col items-center pb-[50px] md:-mt-14\">\n                        <Image\n                            src=\"/empty-cart.jpg\"\n                            width={300}\n                            height={300}\n                            className=\"w-[300px] md:w-[400px]\"\n                        />\n                        <span className=\"text-xl font-bold\">\n                            Your cart is empty\n                        </span>\n                        <span className=\"text-center mt-4\">\n                            Looks like you have not added anything in your cart.\n                            <br />\n                            Go ahead and explore top categories.\n                        </span>\n                        <Link\n                            href=\"/\"\n                            className=\"py-4 px-8 rounded-full bg-black text-white text-lg font-medium transition-transform active:scale-95 mb-3 hover:opacity-75 mt-8\"\n                        >\n                            Continue Shopping\n                        </Link>\n                    </div>\n                )}\n            </Wrapper>\n        </div>\n    );\n};\n\nexport default Cart;\n"
  },
  {
    "path": "pages/category/[slug].js",
    "content": "import React, { useEffect, useState } from \"react\";\nimport Wrapper from \"@/components/Wrapper\";\nimport ProductCard from \"@/components/ProductCard\";\nimport { fetchDataFromApi } from \"@/utils/api\";\nimport useSWR from \"swr\";\nimport { useRouter } from \"next/router\";\nconst maxResult = 3;\n\nconst Category = ({ category, products, slug }) => {\n    const [pageIndex, setPageIndex] = useState(1);\n    const { query } = useRouter();\n\n    useEffect(() => {\n        setPageIndex(1);\n    }, [query]);\n\n    const { data, error, isLoading } = useSWR(\n        `/api/products?populate=*&[filters][categories][slug][$eq]=${slug}&pagination[page]=${pageIndex}&pagination[pageSize]=${maxResult}`,\n        fetchDataFromApi,\n        {\n            fallbackData: products,\n        }\n    );\n\n    return (\n        <div className=\"w-full md:py-20 relative\">\n            <Wrapper>\n                <div className=\"text-center max-w-[800px] mx-auto mt-8 md:mt-0\">\n                    <div className=\"text-[28px] md:text-[34px] mb-5 font-semibold leading-tight\">\n                        {category?.data?.[0]?.attributes?.name}\n                    </div>\n                </div>\n\n                {/* products grid start */}\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-14 px-5 md:px-0\">\n                    {data?.data?.map((product) => (\n                        <ProductCard key={product?.id} data={product} />\n                    ))}\n                    {/* <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard /> */}\n                </div>\n                {/* products grid end */}\n\n                {/* PAGINATION BUTTONS START */}\n                {data?.meta?.pagination?.total > maxResult && (\n                    <div className=\"flex gap-3 items-center justify-center my-16 md:my-0\">\n                        <button\n                            className={`rounded py-2 px-4 bg-black text-white disabled:bg-gray-200 disabled:text-gray-500`}\n                            disabled={pageIndex === 1}\n                            onClick={() => setPageIndex(pageIndex - 1)}\n                        >\n                            Previous\n                        </button>\n\n                        <span className=\"font-bold\">{`${pageIndex} of ${\n                            data && data.meta.pagination.pageCount\n                        }`}</span>\n\n                        <button\n                            className={`rounded py-2 px-4 bg-black text-white disabled:bg-gray-200 disabled:text-gray-500`}\n                            disabled={\n                                pageIndex ===\n                                (data && data.meta.pagination.pageCount)\n                            }\n                            onClick={() => setPageIndex(pageIndex + 1)}\n                        >\n                            Next\n                        </button>\n                    </div>\n                )}\n                {/* PAGINATION BUTTONS END */}\n                {isLoading && (\n                    <div className=\"absolute top-0 left-0 w-full h-full bg-white/[0.5] flex flex-col gap-5 justify-center items-center\">\n                        <img src=\"/logo.svg\" width={150} />\n                        <span className=\"text-2xl font-medium\">Loading...</span>\n                    </div>\n                )}\n            </Wrapper>\n        </div>\n    );\n};\n\nexport default Category;\n\nexport async function getStaticPaths() {\n    const category = await fetchDataFromApi(\"/api/categories?populate=*\");\n    const paths = category?.data?.map((c) => ({\n        params: {\n            slug: c.attributes.slug,\n        },\n    }));\n\n    return {\n        paths,\n        fallback: false,\n    };\n}\n\n// `getStaticPaths` requires using `getStaticProps`\nexport async function getStaticProps({ params: { slug } }) {\n    const category = await fetchDataFromApi(\n        `/api/categories?filters[slug][$eq]=${slug}`\n    );\n    const products = await fetchDataFromApi(\n        `/api/products?populate=*&[filters][categories][slug][$eq]=${slug}&pagination[page]=1&pagination[pageSize]=${maxResult}`\n    );\n\n    return {\n        props: {\n            category,\n            products,\n            slug,\n        },\n    };\n}\n"
  },
  {
    "path": "pages/failed.js",
    "content": "import React from \"react\";\nimport Wrapper from \"@/components/Wrapper\";\nimport Link from \"next/link\";\n\nconst Failed = () => {\n    return (\n        <div className=\"min-h-[650px] flex items-center\">\n            <Wrapper>\n                <div className=\"max-w-[600px] rounded-lg p-5 border border-black mx-auto flex flex-col\">\n                    <div className=\"text-2xl font-bold\">Payment failed!</div>\n                    <div className=\"text-base mt-5\">\n                        For any product related query, drop an email to\n                    </div>\n                    <div className=\"underline\">shoeshopcontact@shop.com</div>\n\n                    <Link href=\"/\" className=\"font-bold mt-5\">\n                        Continue Shopping\n                    </Link>\n                </div>\n            </Wrapper>\n        </div>\n    );\n};\n\nexport default Failed;\n"
  },
  {
    "path": "pages/index.js",
    "content": "import HeroBanner from \"@/components/HeroBanner\";\nimport ProductCard from \"@/components/ProductCard\";\nimport Wrapper from \"@/components/Wrapper\";\nimport { fetchDataFromApi } from \"@/utils/api\";\nexport default function Home({ products }) {\n    return (\n        <main>\n            <HeroBanner />\n            <Wrapper>\n                {/* heading and paragaph start */}\n                <div className=\"text-center max-w-[800px] mx-auto my-[50px] md:my-[80px]\">\n                    <div className=\"text-[28px] md:text-[34px] mb-5 font-semibold leading-tight\">\n                        Cushioning for Your Miles\n                    </div>\n                    <div className=\"text-md md:text-xl\">\n                        A lightweight Nike ZoomX midsole is combined with\n                        increased stack heights to help provide cushioning\n                        during extended stretches of running.\n                    </div>\n                </div>\n                {/* heading and paragaph end */}\n\n                {/* products grid start */}\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-14 px-5 md:px-0\">\n                    {products?.data?.map((product) => (\n                        <ProductCard key={product?.id} data={product} />\n                    ))}\n                    {/* <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard />\n                    <ProductCard /> */}\n                </div>\n                {/* products grid end */}\n            </Wrapper>\n        </main>\n    );\n}\n\nexport async function getStaticProps() {\n    const products = await fetchDataFromApi(\"/api/products?populate=*\");\n\n    return {\n        props: { products },\n    };\n}\n"
  },
  {
    "path": "pages/product/[slug].js",
    "content": "import React, { useState } from \"react\";\nimport { IoMdHeartEmpty } from \"react-icons/io\";\nimport Wrapper from \"@/components/Wrapper\";\nimport ProductDetailsCarousel from \"@/components/ProductDetailsCarousel\";\nimport RelatedProducts from \"@/components/RelatedProducts\";\nimport { fetchDataFromApi } from \"@/utils/api\";\nimport { getDiscountedPricePercentage } from \"@/utils/helper\";\nimport ReactMarkdown from \"react-markdown\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport { addToCart } from \"@/store/cartSlice\";\n\nimport { ToastContainer, toast } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\n\nconst ProductDetails = ({ product, products }) => {\n    const [selectedSize, setSelectedSize] = useState();\n    const [showError, setShowError] = useState(false);\n    const dispatch = useDispatch();\n    const p = product?.data?.[0]?.attributes;\n\n    const notify = () => {\n        toast.success(\"Success. Check your cart!\", {\n            position: \"bottom-right\",\n            autoClose: 5000,\n            hideProgressBar: false,\n            closeOnClick: true,\n            pauseOnHover: true,\n            draggable: true,\n            progress: undefined,\n            theme: \"dark\",\n        });\n    };\n\n    return (\n        <div className=\"w-full md:py-20\">\n            <ToastContainer />\n            <Wrapper>\n                <div className=\"flex flex-col lg:flex-row md:px-10 gap-[50px] lg:gap-[100px]\">\n                    {/* left column start */}\n                    <div className=\"w-full md:w-auto flex-[1.5] max-w-[500px] lg:max-w-full mx-auto lg:mx-0\">\n                        <ProductDetailsCarousel images={p.image.data} />\n                    </div>\n                    {/* left column end */}\n\n                    {/* right column start */}\n                    <div className=\"flex-[1] py-3\">\n                        {/* PRODUCT TITLE */}\n                        <div className=\"text-[34px] font-semibold mb-2 leading-tight\">\n                            {p.name}\n                        </div>\n\n                        {/* PRODUCT SUBTITLE */}\n                        <div className=\"text-lg font-semibold mb-5\">\n                            {p.subtitle}\n                        </div>\n\n                        {/* PRODUCT PRICE */}\n                        <div className=\"flex items-center\">\n                            <p className=\"mr-2 text-lg font-semibold\">\n                                MRP : &#8377;{p.price}\n                            </p>\n                            {p.original_price && (\n                                <>\n                                    <p className=\"text-base  font-medium line-through\">\n                                        &#8377;{p.original_price}\n                                    </p>\n                                    <p className=\"ml-auto text-base font-medium text-green-500\">\n                                        {getDiscountedPricePercentage(\n                                            p.original_price,\n                                            p.price\n                                        )}\n                                        % off\n                                    </p>\n                                </>\n                            )}\n                        </div>\n\n                        <div className=\"text-md font-medium text-black/[0.5]\">\n                            incl. of taxes\n                        </div>\n                        <div className=\"text-md font-medium text-black/[0.5] mb-20\">\n                            {`(Also includes all applicable duties)`}\n                        </div>\n\n                        {/* PRODUCT SIZE RANGE START */}\n                        <div className=\"mb-10\">\n                            {/* HEADING START */}\n                            <div className=\"flex justify-between mb-2\">\n                                <div className=\"text-md font-semibold\">\n                                    Select Size\n                                </div>\n                                <div className=\"text-md font-medium text-black/[0.5] cursor-pointer\">\n                                    Select Guide\n                                </div>\n                            </div>\n                            {/* HEADING END */}\n\n                            {/* SIZE START */}\n                            <div\n                                id=\"sizesGrid\"\n                                className=\"grid grid-cols-3 gap-2\"\n                            >\n                                {p.size.data.map((item, i) => (\n                                    <div\n                                        key={i}\n                                        className={`border rounded-md text-center py-3 font-medium ${\n                                            item.enabled\n                                                ? \"hover:border-black cursor-pointer\"\n                                                : \"cursor-not-allowed bg-black/[0.1] opacity-50\"\n                                        } ${\n                                            selectedSize === item.size\n                                                ? \"border-black\"\n                                                : \"\"\n                                        }`}\n                                        onClick={() => {\n                                            setSelectedSize(item.size);\n                                            setShowError(false);\n                                        }}\n                                    >\n                                        {item.size}\n                                    </div>\n                                ))}\n                            </div>\n                            {/* SIZE END */}\n\n                            {/* SHOW ERROR START */}\n                            {showError && (\n                                <div className=\"text-red-600 mt-1\">\n                                    Size selection is required\n                                </div>\n                            )}\n                            {/* SHOW ERROR END */}\n                        </div>\n                        {/* PRODUCT SIZE RANGE END */}\n\n                        {/* ADD TO CART BUTTON START */}\n                        <button\n                            className=\"w-full py-4 rounded-full bg-black text-white text-lg font-medium transition-transform active:scale-95 mb-3 hover:opacity-75\"\n                            onClick={() => {\n                                if (!selectedSize) {\n                                    setShowError(true);\n                                    document\n                                        .getElementById(\"sizesGrid\")\n                                        .scrollIntoView({\n                                            block: \"center\",\n                                            behavior: \"smooth\",\n                                        });\n                                } else {\n                                    dispatch(\n                                        addToCart({\n                                            ...product?.data?.[0],\n                                            selectedSize,\n                                            oneQuantityPrice: p.price,\n                                        })\n                                    );\n                                    notify();\n                                }\n                            }}\n                        >\n                            Add to Cart\n                        </button>\n                        {/* ADD TO CART BUTTON END */}\n\n                        {/* WHISHLIST BUTTON START */}\n                        <button className=\"w-full py-4 rounded-full border border-black text-lg font-medium transition-transform active:scale-95 flex items-center justify-center gap-2 hover:opacity-75 mb-10\">\n                            Whishlist\n                            <IoMdHeartEmpty size={20} />\n                        </button>\n                        {/* WHISHLIST BUTTON END */}\n\n                        <div>\n                            <div className=\"text-lg font-bold mb-5\">\n                                Product Details\n                            </div>\n                            <div className=\"markdown text-md mb-5\">\n                                <ReactMarkdown>{p.description}</ReactMarkdown>\n                            </div>\n                        </div>\n                    </div>\n                    {/* right column end */}\n                </div>\n\n                <RelatedProducts products={products} />\n            </Wrapper>\n        </div>\n    );\n};\n\nexport default ProductDetails;\n\nexport async function getStaticPaths() {\n    const products = await fetchDataFromApi(\"/api/products?populate=*\");\n    const paths = products?.data?.map((p) => ({\n        params: {\n            slug: p.attributes.slug,\n        },\n    }));\n\n    return {\n        paths,\n        fallback: false,\n    };\n}\n\nexport async function getStaticProps({ params: { slug } }) {\n    const product = await fetchDataFromApi(\n        `/api/products?populate=*&filters[slug][$eq]=${slug}`\n    );\n    const products = await fetchDataFromApi(\n        `/api/products?populate=*&[filters][slug][$ne]=${slug}`\n    );\n\n    return {\n        props: {\n            product,\n            products,\n        },\n    };\n}\n"
  },
  {
    "path": "pages/success.js",
    "content": "import React from \"react\";\nimport Wrapper from \"@/components/Wrapper\";\nimport Link from \"next/link\";\n\nconst Success = () => {\n    return (\n        <div className=\"min-h-[650px] flex items-center\">\n            <Wrapper>\n                <div className=\"max-w-[600px] rounded-lg p-5 border border-black mx-auto flex flex-col\">\n                    <div className=\"text-2xl font-bold\">\n                        Thanks for shopping with us!\n                    </div>\n                    <div className=\"text-lg font-bold mt-2\">\n                        Your order has been placed successfully.\n                    </div>\n                    <div className=\"text-base mt-5\">\n                        For any product related query, drop an email to\n                    </div>\n                    <div className=\"underline\">shoeshopcontact@shop.com</div>\n\n                    <Link href=\"/\" className=\"font-bold mt-5\">\n                        Continue Shopping\n                    </Link>\n                </div>\n            </Wrapper>\n        </div>\n    );\n};\n\nexport default Success;\n"
  },
  {
    "path": "postcss.config.js",
    "content": "module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}\n"
  },
  {
    "path": "store/cartSlice.js",
    "content": "import { createSlice } from \"@reduxjs/toolkit\";\n\nexport const cartSlice = createSlice({\n    name: \"cart\",\n    initialState: {\n        cartItems: [],\n    },\n    reducers: {\n        addToCart: (state, action) => {\n            const item = state.cartItems.find(\n                (p) => p.id === action.payload.id\n            );\n            if (item) {\n                item.quantity++;\n                item.attributes.price = item.oneQuantityPrice * item.quantity;\n            } else {\n                state.cartItems.push({ ...action.payload, quantity: 1 });\n            }\n        },\n        updateCart: (state, action) => {\n            state.cartItems = state.cartItems.map((p) => {\n                if (p.id === action.payload.id) {\n                    if (action.payload.key === \"quantity\") {\n                        p.attributes.price =\n                            p.oneQuantityPrice * action.payload.val;\n                    }\n                    return { ...p, [action.payload.key]: action.payload.val };\n                }\n                return p;\n            });\n        },\n        removeFromCart: (state, action) => {\n            state.cartItems = state.cartItems.filter(\n                (p) => p.id !== action.payload.id\n            );\n        },\n    },\n});\n\n// Action creators are generated for each case reducer function\nexport const { addToCart, updateCart, removeFromCart } = cartSlice.actions;\n\nexport default cartSlice.reducer;\n"
  },
  {
    "path": "store/store.js",
    "content": "import { configureStore } from \"@reduxjs/toolkit\";\nimport cartSlice from \"./cartSlice\";\n\nexport default configureStore({\n    reducer: {\n        cart: cartSlice,\n    },\n});\n"
  },
  {
    "path": "styles/globals.css",
    "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n    font-family: \"Urbanist\", sans-serif;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n\n    color: rgba(0, 0, 0, 1);\n\n    font-synthesis: none;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-text-size-adjust: 100%;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    letter-spacing: 1px;\n}\n\n/* PRODUCT DETAILS CAROUSEL STYLING CUSTOMIZATION START */\n.productCarousel.carousel-root {\n    display: flex;\n    flex-direction: row-reverse;\n    gap: 15px;\n}\n.productCarousel.carousel-root .carousel {\n    width: auto;\n}\n.productCarousel.carousel-root .carousel.carousel-slider {\n    width: 100%;\n}\n.productCarousel.carousel-root .carousel.carousel-slider .slider-wrapper {\n    border-radius: 10px;\n}\n.productCarousel.carousel-root .carousel .thumbs-wrapper {\n    margin: 0;\n}\n.productCarousel.carousel-root .carousel .thumb {\n    height: 60px;\n    border-radius: 6px;\n    overflow: hidden;\n    position: relative;\n}\n.productCarousel.carousel-root .carousel .thumb img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n}\n.productCarousel.carousel-root .carousel .thumb:after {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background-color: black;\n    opacity: 0;\n}\n.productCarousel.carousel-root .carousel .thumb.selected,\n.productCarousel.carousel-root .carousel .thumb:hover {\n    border: 0;\n}\n.productCarousel.carousel-root .carousel .thumb:hover:after,\n.productCarousel.carousel-root .carousel .thumb.selected:after {\n    opacity: 0.2;\n}\n.productCarousel .control-arrow {\n    display: none;\n}\n@media screen and (max-width: 767px) {\n    .productCarousel.carousel-root {\n        flex-direction: column;\n    }\n    .productCarousel.carousel-root .carousel .thumb {\n        border: 0;\n        padding: 0;\n    }\n}\n@media screen and (min-width: 768px) {\n    .productCarousel.carousel-root .carousel .thumbs {\n        transform: none !important;\n        flex-direction: column;\n        display: flex;\n        gap: 10px;\n    }\n    .productCarousel.carousel-root .carousel .thumb {\n        border: 0;\n        padding: 0;\n        margin: 0;\n    }\n}\n/* PRODUCT DETAILS CAROUSEL STYLING CUSTOMIZATION END */\n\n.markdown ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: disc;\n    margin: 20px 0;\n}\n.markdown ul li {\n    margin: 10px 0;\n}\n"
  },
  {
    "path": "tailwind.config.js",
    "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n    content: [\n        \"./app/**/*.{js,ts,jsx,tsx}\",\n        \"./pages/**/*.{js,ts,jsx,tsx}\",\n        \"./components/**/*.{js,ts,jsx,tsx}\",\n\n        // Or if using `src` directory:\n        \"./src/**/*.{js,ts,jsx,tsx}\",\n    ],\n    theme: {\n        fontFamily: {\n            oswald: \"Oswald, sans-serif\",\n            urbanist: \"Urbanist, sans-serif\",\n        },\n        extend: {},\n    },\n    plugins: [],\n};\n"
  },
  {
    "path": "utils/api.js",
    "content": "import { API_URL, STRAPI_API_TOKEN } from \"./urls\";\n\nexport const fetchDataFromApi = async (endpoint) => {\n    const options = {\n        method: \"GET\",\n        headers: {\n            Authorization: \"Bearer \" + STRAPI_API_TOKEN,\n        },\n    };\n\n    const res = await fetch(`${API_URL}${endpoint}`, options);\n    const data = await res.json();\n\n    return data;\n};\n\nexport const makePaymentRequest = async (endpoint, payload) => {\n    const res = await fetch(`${API_URL}${endpoint}`, {\n        method: \"POST\",\n        headers: {\n            Authorization: \"Bearer \" + STRAPI_API_TOKEN,\n            \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(payload),\n    });\n    const data = await res.json();\n    return data;\n};\n"
  },
  {
    "path": "utils/helper.js",
    "content": "export const getDiscountedPricePercentage = (\n    originalPrice,\n    discountedPrice\n) => {\n    const discount = originalPrice - discountedPrice;\n\n    const discountPercentage = (discount / originalPrice) * 100;\n\n    return discountPercentage.toFixed(2);\n};\n"
  },
  {
    "path": "utils/urls.js",
    "content": "export const STRAPI_API_TOKEN = process.env.NEXT_PUBLIC_STRAPI_API_TOKEN;\n\nexport const API_URL =\n    process.env.NEXT_PUBLIC_API_URL || \"http://127.0.0.1:1337\";\n"
  }
]