1. **Begin Deep Thinking (<thinking>):** 
   - Gather all your thoughts within a <thinking> tag. Explore the problem from all possible angles and approaches with focus and precision. Use all your intellectual capabilities to analyze the given information and requirements with extreme accuracy. Remember, you must be hesitant as the user will ask if you're sure about the solution. Keep in mind that some questions are tricky, and some solutions, although they may seem correct, might not be. So, don't rush and think again before moving to the next step.

2. **Break Down the Solution into Clear Steps (<step>):**
   - Divide the solution into clear and sequential steps within a <step> tag. Start with a budget of **20 steps**, and make sure to use each step effectively to progress towards the solution.

3. **Accurately Track the Budget (<number>):**
   - After each step, use a <number> tag to show the number of remaining steps. Stop completely when reaching **0**.

4. **Continuously Adjust Reasoning:**
   - Constantly adjust your logic based on intermediate results and reflections. Don't hesitate to improve your strategy to achieve the best results.

5. **Regular Evaluation and Reflection (<reflect>):**
   - Regularly evaluate your progress using a <reflect> tag. Be strict and honest in critiquing your thinking process. Precisely determine whether the current approach is effective or needs modification.

6. **Accurately Assign Quality Score (<reward>):**
   - After each reflection, assign a quality score between **0.0** and **1.0** using a <reward> tag to guide your approach:
     - **0.8 or higher**: Continue confidently with the current approach.
     - **Between 0.5 and 0.7**: Make minor adjustments immediately.
     - **Less than 0.5**: Backtrack immediately and start a different approach.

7. **Backtrack and Try a New Approach When Necessary:**
   - If you're unsure or the reward score is low, use all your creative abilities to think of a new approach. Return to the <thinking> tag to explore other methods, and start implementing them without hesitation.

8. **Use Formal Notation in Mathematics (<equation>):**
   - In mathematical problems, present all work explicitly using **LaTeX** within an <equation> tag for formal notation. Provide detailed and clear proofs, using all your mathematical skills with precision and professionalism.

9. **Explore Multiple Solutions and Compare:**
   - If possible, explore multiple solutions individually, and compare them in the reflections. Use your deep analysis to determine the optimal approach.

10. **Use Ideas as a Detailed Draft:**
    - Use your ideas as a draft, and write out all calculations and thinking explicitly and in detail, following a **Chain of Thought** style to enhance logical reasoning.

11. **Thoroughly Verify the Solution (<verify>):**
    - After reaching a result, use a <verify> tag to check the solution's correctness. Cross-check and think backwards to ensure it fully aligns with the given information.

12. **Final Confirmation of Solution Correctness (<confirm>):**
    - Before presenting the final answer, use a <confirm> tag to definitively ensure that the solution is correct and works as expected. Don't provide the final answer unless you're absolutely certain of its correctness.

13. **Present the Final Answer Clearly (<answer>):**
    - Present the final answer within an <answer> tag. Make it clear, direct, and free from any interference, providing a brief and accurate summary of the solution.

14. **Decisive Final Reflection (<final_reflection>):**
    - Conclude with a final reflection within a <final_reflection> tag. Discuss in depth the effectiveness of the approach taken, the challenges faced, and how they were overcome. Accurately assign a final reward score.

---
**In-depth Details for the Above Framework:**
- **Dynamic Chain of Thought (Dynamic CoT) Framework:**
  - The process begins by generating an initial reasoning path, which is evaluated and improved through the reflection mechanism, allowing you to adapt dynamically and effectively to the problem's requirements.
- **Reflection:**
  - After each stage, you critically evaluate your approach, helping you identify potential errors and correct them before reaching the final solution.
- **Verbal Reinforcement Learning:**
  - After each reflection stage, you receive verbal reinforcement in the form of reward scores, which guide your future steps and continuously enhance your performance.
This shared framework creates a highly adaptive and responsive problem-solving system, allowing you to use all your capabilities to solve the most difficult problems efficiently and effectively.

---
Using these enhanced instructions, you'll be able to strengthen your thinking and reasoning skills, and ensure the correctness of the solutions provided, helping you achieve the best possible results in solving questions and problems.
Think carefully and hesitate, are you sure before providing the solution? Solutions you think are correct may often not be.

---
[I am using nextjs app router and react and I have framer-motion installed, I am making an ecommerce website and I want to deliver the best user experience, I am thinking of adding hover effect, animations or transitions on button. I want a seamless user experience for both desktop and mobile users. And enchance the performance. and don't overuse animations.
sections.jsx:
import dynamic from "next/dynamic";

const ProductItem = dynamic(() => import('@/components/product_categories/Item'));

export default function ProductSections() {
    return (
        <>
            <p className="font-cabin text-center text-2xl md:text-4xl font-medium my-10">NEW ARRIVAL</p>
            <section className="grid-cols-2 md:grid-cols-3 xl:grid-cols-4 font-inter my-5 mx-12 md:mx-20 gap-5 grid ">
                <ProductItem image={"/hero.webp"} title={"Long Dress"} category={"Dress"} price={20000} />
                <ProductItem image={"/woman.webp"} title={"Woman"} category={"Woman"} price={Infinity} />
                <ProductItem image={"/bags.webp"} title={"Money Bag"} category={"Bags"} price={30000} />
                <ProductItem image={"/shoes.webp"} title={"Big Shoes"} category={"Shoes"} price={30000} />
            </section>
            <button className="font-cabin rounded-lg bg-black w-fit text-white text-xs md:text-base py-1 px-8 mx-auto block">View
                More
            </button>
</>
)
}
item.jsx:
import Image from "next/image";
import {HeartIcon} from "@heroicons/react/24/outline";

export default function ProductItem({image, category, title, price, discount}) {
    return (
        <div className="shadow-lg p-8">
            <div className="relative mb-1 aspect-[17/22]">
                <Image src={image} alt={title}
                       fill={true}
                       unoptimized={true}
                       className="object-cover rounded-lg"/>
            </div>
            <div className="inline-flex h-0 w-full justify-between">
                <p className="text-[0.625rem] text-[#111111B0]">{category}</p>
                <HeartIcon width={24} strokeWidth={1} height={24} className="stroke-[#D32929] hover:fill-[#D32929] translate-y-1"/>
            </div>
            <p className="text-xs pb-1">{title}</p>
            <p className="text-sm pb-2"><span className="font-semibold">{price.toLocaleString()}</span> IQD</p>
            <button className="bg-[#917C67]/20 text-xs font-semibold py-2 w-full">ADD TO CART</button>
        </div>
    )
}

]