Skip to content

Feature/responsive grid layouts #548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Feature/responsive grid layouts #548

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35cb7a8
refactor: add responsive grid layouts to Try and Stats sections
Kunal1522 Nov 13, 2025
c47a3aa
fix: enhance button layout with flexbox for better alignment
Kunal1522 Nov 13, 2025
1841398
refactor: update desktop grid to use fixed 2 columns layout
Kunal1522 Nov 13, 2025
9b638cb
refactor: restore Try and TryCard components for previous layout and …
Kunal1522 Nov 14, 2025
f0a2a83
Remove changes to TryCard.tsx
Kunal1522 Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 74 additions & 31 deletions src/components/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,48 +99,91 @@ const Stats = () => {

{/* Stats Grid */}
<motion.div
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8"
className="flex flex-col items-center gap-6 sm:gap-8 md:gap-10"
variants={container}
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.1 }}
>
{statisticsData.slice(1).map((stat, index) => (
<motion.div
key={index}
className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor}`}
variants={item}
whileHover={{ y: -5, transition: { duration: 0.2 } }}
>
{/* Top Row - 2 Items */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 w-full justify-items-center max-w-3xl">
{statisticsData.slice(1, 3).map((stat, index) => (
<motion.div
className="h-36 sm:h-40 md:h-48 relative overflow-hidden"
variants={imageReveal}
key={index}
className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor} w-full max-w-sm`}
variants={item}
whileHover={{ y: -5, transition: { duration: 0.2 } }}
>
<img
src={stat.imageSrc}
alt={stat.imageAlt}
className="w-full h-full object-cover object-center"
/>
<div
className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
></div>
<motion.div
className="h-32 sm:h-36 md:h-44 relative overflow-hidden"
variants={imageReveal}
>
<img
src={stat.imageSrc}
alt={stat.imageAlt}
className="w-full h-full object-cover object-center"
/>
<div
className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
></div>
</motion.div>
<div className="p-4 sm:p-5 md:p-6">
<h3 className="text-gray-700 dark:text-gray-200 text-sm sm:text-base md:text-lg font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-10 sm:h-12">
{stat.title}
</h3>
<motion.div
className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
variants={numberCounter}
>
{stat.value}
</motion.div>
<div
className={`w-12 sm:w-16 md:w-20 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
></div>
</div>
</motion.div>
<div className="p-4 sm:p-5 md:p-6">
<h3 className="text-gray-700 dark:text-gray-200 text-lg sm:text-xl font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-12 sm:h-14">
{stat.title}
</h3>
))}
</div>

{/* Bottom Row - 3 Items */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 w-full justify-items-center max-w-5xl">
{statisticsData.slice(3).map((stat, index) => (
<motion.div
key={index}
className={`rounded-lg sm:rounded-xl overflow-hidden shadow-md sm:shadow-lg hover:shadow-xl transition-all duration-300 ${stat.bgColor} border ${stat.borderColor} w-full max-w-sm`}
variants={item}
whileHover={{ y: -5, transition: { duration: 0.2 } }}
>
<motion.div
className={`text-4xl sm:text-5xl md:text-6xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
variants={numberCounter}
className="h-32 sm:h-36 md:h-44 relative overflow-hidden"
variants={imageReveal}
>
{stat.value}
<img
src={stat.imageSrc}
alt={stat.imageAlt}
className="w-full h-full object-cover object-center"
/>
<div
className={`absolute inset-0 opacity-10 bg-gradient-to-br ${stat.gradient}`}
></div>
</motion.div>
<div
className={`w-16 sm:w-20 md:w-24 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
></div>
</div>
</motion.div>
))}
<div className="p-4 sm:p-5 md:p-6">
<h3 className="text-gray-700 dark:text-gray-200 text-sm sm:text-base md:text-lg font-medium mb-2 sm:mb-3 font-AnonymousPro line-clamp-2 h-10 sm:h-12">
{stat.title}
</h3>
<motion.div
className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4 bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent font-Caveat`}
variants={numberCounter}
>
{stat.value}
</motion.div>
<div
className={`w-12 sm:w-16 md:w-20 h-0.5 sm:h-1 bg-gradient-to-r ${stat.gradient} opacity-50 rounded-full mt-1 sm:mt-2`}
></div>
</div>
</motion.div>
))}
</div>
</motion.div>

{/* Closing Section with Interactive Element */}
Expand Down