Merge pull request #554 from zalabhavy/imagescale

Added Scale and Lazy loading
VaibhavArora314 · Aug 2, 2024 · f6ec8d1 · f6ec8d1
2 parents ce2467a + 084cc35
commit f6ec8d1
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/frontend/src/components/Features.tsx b/frontend/src/components/Features.tsx
@@ -17,28 +17,28 @@ const Features = () => {
           <div className="flex flex-wrap -m-4">
             <div className="xl:w-1/4 md:w-1/2 p-4">
               <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer transition-transform duration-300 hover:-translate-y-1">
-                <img src={responsiveDesignGif} alt="Responsive Design" className="w-full mb-4" />
+                <img src={responsiveDesignGif} alt="Responsive Design" className="w-full mb-4 transition-transform duration-300 ease-in-out hover:scale-[1.02]" loading="lazy" />
                 <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Responsive Design</h2>
                 <p className="leading-relaxed text-base">All components are from best sources and designed to be fully responsive 📝 ensuring they look great on any device📱</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
               <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer transition-transform duration-300 hover:-translate-y-1">
-                <img src={leaderboardGif} alt="Leaderboard" className="w-full mb-4" />
+                <img src={leaderboardGif} alt="Leaderboard" className="w-full mb-4 transition-transform duration-300 ease-in-out hover:scale-[1.02]" loading="lazy" />
                 <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Leaderboard</h2>
                 <p className="leading-relaxed text-base">Compete with other developers and 🪜 climb the leaderboard by sharing your best components and get recognized 🥇</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
               <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer transition-transform duration-300 hover:-translate-y-1">
-                <img src={personalizationGif} alt="Personalization" className="w-full mb-4" />
+                <img src={personalizationGif} alt="Personalization" className="w-full mb-4 transition-transform duration-300 ease-in-out hover:scale-[1.02]" loading="lazy" />
                 <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Personalization</h2>
                 <p className="leading-relaxed text-base">Engage with the community by 👍/👎 components. Save your 💖 components for quick access in your future projects.</p>
               </div>
             </div>
             <div className="xl:w-1/4 md:w-1/2 p-4">
               <div className="border border-sky-500 border-opacity-75 p-6 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-950 hover:border-sky-700 backdrop-blur-sm cursor-pointer transition-transform duration-300 hover:-translate-y-1">
-                <img src={customizableCodeSnippetsGif} alt="Customizable Code Snippets" className="w-full mb-4" />
+                <img src={customizableCodeSnippetsGif} alt="Customizable Code Snippets" className="w-full mb-4 transition-transform duration-300 ease-in-out hover:scale-[1.02]" loading="lazy" />
                 <h2 className="text-lg text-[#000435] dark:text-white font-medium title-font mb-2">Customizable Code Snippets</h2>
                 <p className="leading-relaxed text-base">Easily customize and preview code 👀 snippets with our built-in editor and A.I tailored specifically for Tailwind CSS 💅</p>
               </div>