{"title":"Home page","description":null,"products":[{"product_id":"your-journey-to-understanding-of-quran-the-500-most-frequent-words","title":"Your Journey to Quranic Understanding - The 600 Most Frequent Word","description":"\nimport React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { VIDEOS } from '..\/constants';\nimport PlayIcon from '.\/icons\/PlayIcon';\nimport ChevronLeftIcon from '.\/icons\/ChevronLeftIcon';\nimport ChevronRightIcon from '.\/icons\/ChevronRightIcon';\n\nconst VideoCarousel: React.FC = () =\u0026gt; {\n  const [currentIndex, setCurrentIndex] = useState(Math.floor(VIDEOS.length \/ 2));\n  const [playingVideoId, setPlayingVideoId] = useState\u003cnumber null\u003e(null);\n  const videoRefs = useRef\u0026lt;(HTMLVideoElement | null)[]\u0026gt;([]);\n  const [dragStartX, setDragStartX] = useState\u003cnumber null\u003e(null);\n  const isDragging = useRef(false);\n\n  useEffect(() =\u0026gt; {\n    videoRefs.current = videoRefs.current.slice(0, VIDEOS.length);\n  }, []);\n\n  const stopAllVideos = () =\u0026gt; {\n    setPlayingVideoId(null);\n  };\n\n  const handleNext = useCallback(() =\u0026gt; {\n    setCurrentIndex((prevIndex) =\u0026gt; (prevIndex + 1) % VIDEOS.length);\n    stopAllVideos();\n  }, []);\n\n  const handlePrev = useCallback(() =\u0026gt; {\n    setCurrentIndex((prevIndex) =\u0026gt; (prevIndex - 1 + VIDEOS.length) % VIDEOS.length);\n    stopAllVideos();\n  }, []);\n\n  const handleDotClick = (index: number) =\u0026gt; {\n    setCurrentIndex(index);\n    stopAllVideos();\n  };\n\n  const togglePlay = (id: number, index: number) =\u0026gt; {\n    if (isDragging.current) return;\n    if (index !== currentIndex) {\n      setCurrentIndex(index);\n      stopAllVideos();\n    } else {\n      setPlayingVideoId((prevId) =\u0026gt; (prevId === id ? null : id));\n    }\n  };\n\n  useEffect(() =\u0026gt; {\n    videoRefs.current.forEach((videoEl, index) =\u0026gt; {\n      if (videoEl) {\n        if (VIDEOS[index].id === playingVideoId) {\n          videoEl.play().catch((error) =\u0026gt; console.error(\"Video play failed:\", error));\n        } else {\n          videoEl.pause();\n        }\n      }\n    });\n  }, [playingVideoId]);\n\n  const handleDragStart = (e: React.MouseEvent\u003chtmldivelement\u003e | React.TouchEvent\u003chtmldivelement\u003e) =\u0026gt; {\n    isDragging.current = false;\n    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\n    setDragStartX(clientX);\n  };\n\n  const handleDragMove = (e: React.MouseEvent\u003chtmldivelement\u003e | React.TouchEvent\u003chtmldivelement\u003e) =\u0026gt; {\n    if (dragStartX === null) return;\n    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\n    if (Math.abs(clientX - dragStartX) \u0026gt; 10) {\n      isDragging.current = true;\n    }\n  };\n\n  const handleDragEnd = (e: React.MouseEvent\u003chtmldivelement\u003e | React.TouchEvent\u003chtmldivelement\u003e) =\u0026gt; {\n    if (dragStartX === null) return;\n    const clientX = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;\n    const dragDistance = clientX - dragStartX;\n    const swipeThreshold = 50;\n\n    if (!isDragging.current) {\n      setDragStartX(null);\n      return;\n    }\n\n    if (dragDistance \u0026gt; swipeThreshold) {\n      handlePrev();\n    } else if (dragDistance \u0026lt; -swipeThreshold) {\n      handleNext();\n    }\n    setDragStartX(null);\n    setTimeout(() =\u0026gt; { isDragging.current = false; }, 50);\n  };\n\n  return (\n    \u003cdiv classname=\"relative w-full flex flex-col items-center justify-center\"\u003e\n      \u003cdiv classname=\"relative h-[65vh] md:h-[70vh] max-h-[700px] w-full max-w-7xl overflow-hidden cursor-grab active:cursor-grabbing\" onmousedown=\"{handleDragStart}\" ontouchstart=\"{handleDragStart}\" onmousemove=\"{handleDragMove}\" ontouchmove=\"{handleDragMove}\" onmouseup=\"{handleDragEnd}\" ontouchend=\"{handleDragEnd}\" onmouseleave=\"{handleDragEnd}\"\u003e\n        \u003cdiv classname=\"relative h-full w-full flex items-center justify-center\"\u003e\n          {VIDEOS.map((video, index) =\u0026gt; {\n            const offset = index - currentIndex;\n            const isCurrent = offset === 0;\n            const isAdjacent = Math.abs(offset) === 1;\n            const isHidden = Math.abs(offset) \u0026gt; 1;\n\n            let transform = `translateX(${offset * 40}%) scale(0.7)`;\n            let opacity = 0.4;\n            let zIndex = VIDEOS.length - Math.abs(offset);\n\n            if (isCurrent) {\n              transform = 'translateX(0) scale(1)';\n              opacity = 1;\n              zIndex = VIDEOS.length + 1;\n            } else if (isAdjacent) {\n              transform = `translateX(${offset * 35}%) scale(0.85)`;\n              opacity = 0.6;\n            }\n            if (isHidden) {\n              opacity = 0;\n            }\n\n            return (\n              \u003cdiv key=\"{video.id}\" classname=\"absolute w-full h-full flex items-center justify-center transition-all duration-500 ease-in-out\" style=\"{{\" transform opacity zindex\u003e\n                \u003cdiv classname=\"{`relative\" w- max-w- sm:max-w-xs md:max-w-sm aspect- rounded-2xl overflow-hidden shadow-lg transition-all duration-500 ease-in-out iscurrent shadow-2xl cursor-pointer : onclick=\"{()\"\u003e togglePlay(video.id, index)}\n                \u0026gt;\n                  \u003cvideo fix: the ref callback should not return a value. changed from implicit to function body with curly braces.\u003e { videoRefs.current[index] = el; }}\n                    src={video.src}\n                    className=\"w-full h-full object-cover\"\n                    onEnded={() =\u0026gt; setPlayingVideoId(null)}\n                    playsInline\n                    loop\n                    preload=\"metadata\"\n                  \/\u0026gt;\n                  {playingVideoId !== video.id \u0026amp;\u0026amp; (\n                    \u003cdiv classname=\"absolute inset-0 bg-black\/20 flex items-center justify-center pointer-events-none\"\u003e\n                      \u003cdiv classname=\"bg-white\/30 rounded-full p-3 backdrop-blur-sm\"\u003e\n                        \u003cplayicon classname=\"w-8 h-8 sm:w-12 sm:h-12 text-white\"\u003e\u003c\/playicon\u003e\n                      \u003c\/div\u003e\n                    \u003c\/div\u003e\n                  )}\n                \u003c\/video\u003e\n\u003c\/div\u003e\n              \u003c\/div\u003e\n            );\n          })}\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n\n      \u003cbutton onclick=\"{handlePrev}\" classname=\"absolute left-0 sm:left-4 md:left-8 lg:left-16 top-1\/2 -translate-y-1\/2 z-30 bg-white rounded-full p-2 shadow-lg hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-pink-400\" aria-label=\"Previous video\"\u003e\n        \u003cchevronlefticon classname=\"w-6 h-6 text-gray-800\"\u003e\u003c\/chevronlefticon\u003e\n      \u003c\/button\u003e\n      \u003cbutton onclick=\"{handleNext}\" classname=\"absolute right-0 sm:right-4 md:right-8 lg:right-16 top-1\/2 -translate-y-1\/2 z-30 bg-white rounded-full p-2 shadow-lg hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-pink-400\" aria-label=\"Next video\"\u003e\n        \u003cchevronrighticon classname=\"w-6 h-6 text-gray-800\"\u003e\u003c\/chevronrighticon\u003e\n      \u003c\/button\u003e\n\n      \u003cdiv classname=\"flex justify-center gap-2 mt-4\"\u003e\n        {VIDEOS.map((_, index) =\u0026gt; (\n          \u003cbutton key=\"{index}\" onclick=\"{()\"\u003e handleDotClick(index)}\n            className={`w-3 h-3 rounded-full transition-all duration-300 ${\n              currentIndex === index ? 'bg-gray-800 scale-125' : 'bg-gray-400'\n            }`}\n            aria-label={`Go to video ${index + 1}`}\n          \/\u0026gt;\n        ))}\n      \u003c\/button\u003e\n\u003c\/div\u003e\n    \u003c\/div\u003e\n  );\n};\n\nexport default VideoCarousel;\n\u003ch1 style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cstrong\u003eWhy Ebook is better than the physical book\u003c\/strong\u003e\u003cbr\u003e\u003cbr\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0943\/4454\/4565\/files\/eBook_2.jpg?v=1746352829\" alt=\"\"\u003e\u003cbr\u003e\u003c\/span\u003e\u003c\/h1\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eWhy focus on the 600 most frequent words?\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eThe Arabic of the Quran, while rich and beautiful, can seem daunting to a beginner. However, linguistic analysis reveals a remarkable truth: a relatively small set of core vocabulary appears with extraordinary frequency throughout the text.\u003cspan\u003e \u003c\/span\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eThese 600 words form the bedrock of Quranic Arabic, accounting for approximately 80% of the words you will encounter.\u003cbr\u003e\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eBy mastering these foundational terms, you gain an immediate and significant advantage. Instead of feeling overwhelmed by an endless sea of unfamiliar vocabulary, you'll begin to recognize and understand a substantial portion of the Quran. This targeted approach provides:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eRapid Progress:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eFocus your efforts on the words that matter most, leading to quicker comprehension and a greater sense of accomplishment.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eIncreased Confidence:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eAs you recognize more and more words, your confidence in tackling the Quran in Arabic will soar.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eEnhanced Engagement:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eUnderstanding even a few words in a verse can dramatically deepen your engagement with the recitation and your personal connection to the divine message.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eA Solid Foundation:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eThis vocabulary forms a strong base for further exploration of Arabic grammar and more advanced vocabulary.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003ePractical Application:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eImmediately apply your knowledge to reading and understanding actual Quranic verses.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eWhat makes \"Your Journey to Understanding of Quran\" unique and effective?\u003c\/span\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eThis is not just a simple list of words. We have designed this resource with the learner in mind, providing you with everything you need to truly internalize these crucial terms:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cbr\u003eCarefully Selected Vocabulary:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eOur list is compiled based on rigorous frequency analysis of the entire Quran, ensuring you are learning the most impactful words first.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eClear and Concise Definitions:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eEach word is presented with its primary meaning(s) in clear and easy-to-understand English. We go beyond literal translations to provide context where necessary.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003ePractical Examples from the Quran:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eSeeing each word used in its natural context within actual Quranic verses solidifies your understanding and demonstrates its practical application. These examples are carefully chosen to be relatively simple and illustrative.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003ePronunciation Guidance:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eBasic transliteration is provided for each word to help you pronounce it correctly, aiding in your recitation and recognition of the spoken word.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eA Clear and User-Friendly Design:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eThe book is designed for ease of use, with a clean layout and readable font that makes learning a comfortable experience.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eMore Than Just a Word List:\u003c\/span\u003e\u003c\/strong\u003e\u003cspan class=\"ng-star-inserted\"\u003e\u003cspan\u003e \u003c\/span\u003eWe provide guidance on effective memorization techniques and tips for integrating your new vocabulary into your understanding of Quranic verses.\u003cbr\u003e\u003cbr\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3 style=\"text-align: center;\" class=\"ng-star-inserted\"\u003e\u003cstrong class=\"ng-star-inserted\"\u003e\u003cspan class=\"ng-star-inserted\"\u003eHere are few pages of the book shows how detailed all words are covered that makes understanding more easy\u003cbr\u003e\u003cbr\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0943\/4454\/4565\/files\/Record_2025-04-29-19-54-02_bdd3206c5c05051588ef25b13a856c7a1-ezgif.com-video-to-gif-converter_1.gif?v=1746344315\" alt=\"\"\u003e\u003cbr\u003e\u003c\/span\u003e\u003c\/strong\u003e\u003c\/h3\u003e\n\u003ch2 style=\"text-align: center;\"\u003eMashallah, Over 40,000 Brothers and Sisters have got the eBook.\u003c\/h2\u003e\n\u003cp class=\"ng-star-inserted\"\u003e\u003cimg style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0943\/4454\/4565\/files\/IMG_8649.heic?v=1746353583\" alt=\"\"\u003e\u003c\/p\u003e\u003c\/htmldivelement\u003e\u003c\/htmldivelement\u003e\u003c\/htmldivelement\u003e\u003c\/htmldivelement\u003e\u003c\/htmldivelement\u003e\u003c\/htmldivelement\u003e\u003c\/number\u003e\u003c\/number\u003e","brand":"My Store","offers":[{"title":"Default Title","offer_id":42516021739654,"sku":null,"price":99.0,"currency_code":"INR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0639\/3505\/3958\/files\/9.jpg?v=1760867293"}],"url":"https:\/\/al-hidaya.in\/collections\/frontpage.oembed","provider":"AL HIDAYA","version":"1.0","type":"link"}