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

Show file tree
Hide file tree
Changes from 4 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
20 changes: 10 additions & 10 deletions src/components/TryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,22 @@ export const TryCard: React.FC<TryCardProps> = ({
<div className="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl md:rounded-3xl shadow-[rgba(13,_38,_76,_0.19)_0px_9px_20px] hover:shadow-[rgba(13,_38,_76,_0.25)_0px_12px_28px] transition-all duration-500 overflow-hidden mx-auto w-full group h-full border border-transparent dark:border-gray-700">
<div className="p-4 sm:p-5 md:p-6 flex flex-col h-full">
{/* Content Section */}
<div className="flex-1 flex flex-col space-y-3 sm:space-y-4">
<div className="flex-1 flex flex-col space-y-2 sm:space-y-3">
{/* Header */}
<div className="space-y-2 flex-1/4 sm:space-y-3 text-center w-full">
<h2 className="text-lg sm:text-xl font-black text-gray-800 dark:text-transparent leading-tight bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500">
<div className="space-y-1 sm:space-y-2 text-center w-full h-20 sm:h-24 flex flex-col justify-center">
<h2 className="text-sm sm:text-base md:text-lg font-black text-gray-800 dark:text-transparent leading-snug bg-gradient-to-br from-gray-900 via-gray-800 to-gray-600 dark:from-gray-100 dark:via-gray-200 dark:to-gray-400 bg-clip-text group-hover:scale-[1.02] transition-transform duration-500 line-clamp-3">
{title}
</h2>
<p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-relaxed mx-auto font-medium tracking-wide">
<p className="text-gray-500 dark:text-gray-400 text-xs sm:text-sm leading-snug mx-auto font-medium tracking-wide line-clamp-2">
{description}
</p>
</div>

{/* Buttons */}
<div className="space-y-2 sm:space-y-2.5 flex flex-col items-center pt-1 sm:pt-3">
<div className="space-y-1.5 sm:space-y-2 flex flex-col items-center pt-1 sm:pt-2">
<a
href={tryNowHref}
className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3 rounded-xl sm:rounded-2xl
className={`w-full text-white font-bold px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5 rounded-xl sm:rounded-2xl
transition-all duration-500 hover:scale-[1.02] hover:shadow-lg
active:scale-95 text-xs sm:text-sm backdrop-blur-sm relative overflow-hidden
${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
Expand All @@ -105,7 +105,7 @@ export const TryCard: React.FC<TryCardProps> = ({
</a>
<Link
to={learnMoreHref}
className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 md:py-3
className="w-full bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border-[1.5px] border-gray-100 dark:border-gray-600 rounded-xl sm:rounded-2xl px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-2.5
font-bold transition-all duration-500 hover:scale-[1.02]
hover:bg-gray-100/80 hover:border-gray-200 dark:hover:bg-gray-600/80 dark:hover:border-gray-500 text-gray-700 dark:text-gray-200 text-xs sm:text-sm
active:scale-95 relative overflow-hidden
Expand All @@ -118,12 +118,12 @@ export const TryCard: React.FC<TryCardProps> = ({
</div>

{/* Image Section */}
<div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-4 sm:mt-5 md:mt-6 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent dark:from-gray-800 dark:via-gray-800/50 h-8 sm:h-10 md:h-12 z-10" />
<div className="-mx-4 sm:-mx-5 md:-mx-6 -mb-4 sm:-mb-5 md:-mb-6 mt-2 sm:mt-3 md:mt-4 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent dark:from-gray-800 dark:via-gray-800/50 h-6 sm:h-8 md:h-10 z-10" />
<img
src={imagePath}
alt={title}
className="w-full h-36 sm:h-40 md:h-48 object-cover transform transition-all duration-700
className="w-full h-28 sm:h-32 md:h-40 object-cover transform transition-all duration-700
group-hover:scale-110 group-hover:rotate-1"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
Expand Down