Skip to content

Feature/UI update #6

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 3 commits into
base: main
Choose a base branch
from
Open

Feature/UI update #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68745f0
Minor fixes
ashk6645 Sep 25, 2025
486cfb7
Minor UI changes
ashk6645 Sep 25, 2025
bda9005
✨ Enhance UI with modern components and animations
ashk6645 Oct 6, 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
43 changes: 43 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,49 @@
transform: translateX(-50%);
}
}

@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.animate-shimmer {
animation: shimmer 2s infinite;
}

.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
animation: slideInRight 0.4s ease-out;
}
}

@layer base {
Expand Down
Empty file added components/ErrorBoundary.jsx
View file
Open in desktop
Empty file.
19 changes: 12 additions & 7 deletions components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,22 @@ const Footer = () => {
]

return (
<footer className="mx-6 bg-white">
<footer className="mx-6 bg-white border-t border-slate-100">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row items-start justify-between gap-10 py-10 border-b border-slate-500/30 text-slate-500">
<div className="flex flex-col md:flex-row items-start justify-between gap-10 py-10 border-b border-slate-200 text-slate-500">
<div>
<Link href="/" className="text-4xl font-semibold text-slate-700">
<Link href="/" className="text-4xl font-semibold text-slate-700 hover:text-slate-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded">
<span className="text-green-600">go</span>cart<span className="text-green-600 text-5xl leading-0">.</span>
</Link>
<p className="max-w-[410px] mt-6 text-sm">Welcome to gocart, your ultimate destination for the latest and smartest gadgets. From smartphones and smartwatches to essential accessories, we bring you the best in innovation — all in one place.</p>
<p className="max-w-[410px] mt-6 text-sm leading-relaxed">Welcome to gocart, your ultimate destination for the latest and smartest gadgets. From smartphones and smartwatches to essential accessories, we bring you the best in innovation — all in one place.</p>
<div className="flex items-center gap-3 mt-5">
{socialIcons.map((item, i) => (
<Link href={item.link} key={i} className="flex items-center justify-center w-10 h-10 bg-slate-100 hover:scale-105 hover:border border-slate-300 transition rounded-full">
<Link
href={item.link}
key={i}
className="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-slate-200 hover:scale-105 hover:border border-slate-300 transition rounded-full focus:outline-none focus:ring-2 focus:ring-green-500/20"
aria-label={`Visit our ${item.link.split('://')[1]}`}
>
<item.icon />
</Link>
))}
Expand All @@ -71,15 +76,15 @@ const Footer = () => {
{section.links.map((link, i) => (
<li key={i} className="flex items-center gap-2">
{link.icon && <link.icon />}
<Link href={link.path} className="hover:underline transition">{link.text}</Link>
<Link href={link.path} className="hover:text-green-600 hover:underline transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500/20 rounded-sm px-1">{link.text}</Link>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<p className="py-4 text-sm text-slate-500">
<p className="py-4 text-sm text-slate-400">
Copyright 2025 © gocart All Right Reserved.
</p>
</div>
Expand Down
46 changes: 29 additions & 17 deletions components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ArrowRightIcon, ChevronRightIcon } from 'lucide-react'
import Image from 'next/image'
import React from 'react'
import CategoriesMarquee from './CategoriesMarquee'
import { Button } from './ui/Button'

const Hero = () => {

Expand All @@ -12,36 +13,47 @@ const Hero = () => {
return (
<div className='mx-6'>
<div className='flex max-xl:flex-col gap-8 max-w-7xl mx-auto my-10'>
<div className='relative flex-1 flex flex-col bg-green-200 rounded-3xl xl:min-h-100 group'>
<div className='p-5 sm:p-16'>
<div className='inline-flex items-center gap-3 bg-green-300 text-green-600 pr-4 p-1 rounded-full text-xs sm:text-sm'>
<span className='bg-green-600 px-3 py-1 max-sm:ml-1 rounded-full text-white text-xs'>NEWS</span> Free Shipping on Orders Above $50! <ChevronRightIcon className='group-hover:ml-2 transition-all' size={16} />
<div className='relative flex-1 flex flex-col bg-gradient-to-br from-green-100 via-green-200 to-green-300 rounded-3xl xl:min-h-100 group overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 animate-fade-in-up'>
<div className='p-5 sm:p-16 relative z-10'>
<div className='inline-flex items-center gap-3 bg-green-300/90 backdrop-blur-sm text-green-800 pr-4 p-1 rounded-full text-xs sm:text-sm hover:bg-green-400/90 transition-all duration-300'>
<span className='bg-green-600 px-3 py-1 max-sm:ml-1 rounded-full text-white text-xs shadow-lg animate-pulse'>NEWS</span>
Free Shipping on Orders Above $50!
<ChevronRightIcon className='group-hover:ml-2 transition-all duration-200 group-hover:text-green-900' size={16} />
</div>
<h2 className='text-3xl sm:text-5xl leading-[1.2] my-3 font-medium bg-gradient-to-r from-slate-600 to-[#A0FF74] bg-clip-text text-transparent max-w-xs sm:max-w-md'>
<h2 className='text-3xl sm:text-5xl leading-[1.2] my-3 font-bold bg-gradient-to-r from-slate-700 via-slate-800 to-[#A0FF74] bg-clip-text text-transparent max-w-xs sm:max-w-md drop-shadow-sm'>
Gadgets you'll love. Prices you'll trust.
</h2>
<div className='text-slate-800 text-sm font-medium mt-4 sm:mt-8'>
<p>Starts from</p>
<p className='text-3xl'>{currency}4.90</p>
<p className="text-slate-600">Starts from</p>
<p className='text-4xl font-bold text-slate-800 drop-shadow-sm'>{currency}4.90</p>
</div>
<button className='bg-slate-800 text-white text-sm py-2.5 px-7 sm:py-5 sm:px-12 mt-4 sm:mt-10 rounded-md hover:bg-slate-900 hover:scale-103 active:scale-95 transition'>LEARN MORE</button>
<Button size="lg" className="mt-4 sm:mt-10 shadow-xl hover:shadow-2xl transform hover:scale-105 bg-gradient-to-r from-slate-800 to-slate-900 hover:from-slate-900 hover:to-black">
LEARN MORE
</Button>
</div>
<Image className='sm:absolute bottom-0 right-0 md:right-10 w-full sm:max-w-sm' src={assets.hero_model_img} alt="" />
<Image className='sm:absolute bottom-0 right-0 md:right-10 w-full sm:max-w-sm transition-transform duration-500 group-hover:scale-105 drop-shadow-lg' src={assets.hero_model_img} alt="Featured product" />
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<div className='flex flex-col md:flex-row xl:flex-col gap-5 w-full xl:max-w-sm text-sm text-slate-600'>
<div className='flex-1 flex items-center justify-between w-full bg-orange-200 rounded-3xl p-6 px-8 group'>
<div className='flex-1 flex items-center justify-between w-full bg-gradient-to-br from-orange-100 via-orange-200 to-orange-300 rounded-3xl p-6 px-8 group shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-in-right'>
<div>
<p className='text-3xl font-medium bg-gradient-to-r from-slate-800 to-[#FFAD51] bg-clip-text text-transparent max-w-40'>Best products</p>
<p className='flex items-center gap-1 mt-4'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all' size={18} /> </p>
<p className='text-3xl font-bold bg-gradient-to-r from-slate-800 via-orange-600 to-[#FFAD51] bg-clip-text text-transparent max-w-40 drop-shadow-sm'>Best products</p>
<p className='flex items-center gap-1 mt-4 text-slate-700 transition-colors duration-200 group-hover:text-orange-700 font-medium'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all duration-200' size={18} /> </p>
</div>
<div className="relative">
<Image className='w-35 transition-transform duration-500 group-hover:scale-110 drop-shadow-lg' src={assets.hero_product_img1} alt="Best products" />
<div className="absolute inset-0 bg-gradient-to-t from-orange-200/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
</div>
<Image className='w-35' src={assets.hero_product_img1} alt="" />
</div>
<div className='flex-1 flex items-center justify-between w-full bg-blue-200 rounded-3xl p-6 px-8 group'>
<div className='flex-1 flex items-center justify-between w-full bg-gradient-to-br from-blue-100 via-blue-200 to-blue-300 rounded-3xl p-6 px-8 group shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 animate-slide-in-right' style={{animationDelay: '0.2s'}}>
<div>
<p className='text-3xl font-medium bg-gradient-to-r from-slate-800 to-[#78B2FF] bg-clip-text text-transparent max-w-40'>20% discounts</p>
<p className='flex items-center gap-1 mt-4'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all' size={18} /> </p>
<p className='text-3xl font-bold bg-gradient-to-r from-slate-800 via-blue-600 to-[#78B2FF] bg-clip-text text-transparent max-w-40 drop-shadow-sm'>20% discounts</p>
<p className='flex items-center gap-1 mt-4 text-slate-700 transition-colors duration-200 group-hover:text-blue-700 font-medium'>View more <ArrowRightIcon className='group-hover:ml-2 transition-all duration-200' size={18} /> </p>
</div>
<div className="relative">
<Image className='w-35 transition-transform duration-500 group-hover:scale-110 drop-shadow-lg' src={assets.hero_product_img2} alt="Discounted products" />
<div className="absolute inset-0 bg-gradient-to-t from-blue-200/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
</div>
<Image className='w-35' src={assets.hero_product_img2} alt="" />
</div>
</div>
</div>
Expand Down
33 changes: 29 additions & 4 deletions components/Loading.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,37 @@
'use client'

const Loading = () => {
const Loading = ({ fullScreen = true, size = "default", text = "Loading..." }) => {
const sizeClasses = {
sm: "w-4 h-4 border-2",
default: "w-8 h-8 border-3",
lg: "w-12 h-12 border-4"
}

return (
<div className='flex items-center justify-center h-screen'>
<div className='w-11 h-11 rounded-full border-3 border-gray-300 border-t-green-500 animate-spin'></div>
const LoadingSpinner = () => (
<div className="flex flex-col items-center gap-4">
<div className={`${sizeClasses[size]} rounded-full border-gray-200 border-t-green-500 animate-spin`}></div>
{text && (
<p className="text-slate-600 font-medium animate-pulse">{text}</p>
)}
</div>
)

if (fullScreen) {
return (
<div className='flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-white'>
<div className="text-center">
<LoadingSpinner />
<div className="mt-8 flex justify-center space-x-1">
<div className="w-2 h-2 bg-green-500 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
<div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
</div>
</div>
</div>
)
}

return <LoadingSpinner />
}

export default Loading
Loading