Skip to content

Logo adds/ minor ui fixes #12

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

Merged
MS-Rex merged 1 commit into from
Dec 16, 2025
Merged

Logo adds/ minor ui fixes #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
161 changes: 129 additions & 32 deletions app/components/home/CategoriesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,156 @@

import { motion } from 'framer-motion';
import Link from 'next/link';
import { Cpu, HardDrive, Cpu as Gpu, MemoryStick, Box, Zap, Fan, Monitor } from 'lucide-react';
import {
Cpu,
HardDrive,
Cpu as Gpu,
MemoryStick,
Box,
Zap,
Fan,
Monitor,
ChevronLeft,
ChevronRight
} from 'lucide-react';
import { useRef } from 'react';

export default function CategoriesSection() {
const scrollContainerRef = useRef<HTMLDivElement>(null);

const categories = [
{ name: 'CPUs', icon: Cpu, href: '/components/cpu' },
{ name: 'GPUs', icon: Gpu, href: '/components/gpu' },
{ name: 'Motherboards', icon: Monitor, href: '/components/motherboard' },
{ name: 'RAM', icon: MemoryStick, href: '/components/ram' },
{ name: 'Storage', icon: HardDrive, href: '/components/storage' },
{ name: 'Power Supply', icon: Zap, href: '/components/psu' },
{ name: 'Cooling', icon: Fan, href: '/components/cooler' },
{ name: 'Cases', icon: Box, href: '/components/case' },
{
name: 'CPUs',
description: 'The brain of your computer. Handle complex tasks with ease.',
icon: Cpu,
href: '/components/cpu'
},
{
name: 'GPUs',
description: 'Immersive graphics for gaming and professional rendering.',
icon: Gpu,
href: '/components/gpu'
},
{
name: 'Motherboards',
description: 'The foundation connecting all your components together.',
icon: Monitor,
href: '/components/motherboard'
},
{
name: 'RAM',
description: 'High-speed memory for seamless multitasking.',
icon: MemoryStick,
href: '/components/ram'
},
{
name: 'Storage',
description: 'Secure and fast storage for all your data needs.',
icon: HardDrive,
href: '/components/storage'
},
{
name: 'Power Supply',
description: 'Reliable power delivery for stable system performance.',
icon: Zap,
href: '/components/psu'
},
{
name: 'Cooling',
description: 'Keep your temperatures low and performance high.',
icon: Fan,
href: '/components/cooler'
},
{
name: 'Cases',
description: 'Stylish protection for your high-performance build.',
icon: Box,
href: '/components/case'
},
];

const scroll = (direction: 'left' | 'right') => {
if (scrollContainerRef.current) {
const scrollAmount = 400;
scrollContainerRef.current.scrollBy({
left: direction === 'right' ? scrollAmount : -scrollAmount,
behavior: 'smooth'
});
}
};

return (
<section className="py-12 sm:py-16 md:py-20 bg-background">
<section className="py-12 sm:py-16 md:py-20 bg-background relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-center mb-8 sm:mb-10 md:mb-12"
>
<h2 className="text-2xl sm:text-3xl md:text-4xl font-heading font-bold text-foreground mb-3 sm:mb-4">
Shop by Category
</h2>
<p className="text-base sm:text-lg text-muted-foreground">
Find the perfect components for your build
</p>
</motion.div>
<div className="flex justify-between items-end mb-8 sm:mb-10 md:mb-12">
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="max-w-2xl"
>
<h2 className="text-2xl sm:text-3xl md:text-4xl font-heading font-bold text-foreground mb-3 sm:mb-4">
Shop by Category
</h2>
<p className="text-base sm:text-lg text-muted-foreground">
Find the perfect components for your build
</p>
</motion.div>

<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 sm:gap-6">
<div className="hidden sm:flex items-center gap-2">
<button
onClick={() => scroll('left')}
className="p-2 rounded-full border border-border bg-background hover:bg-muted transition-colors"
aria-label="Scroll left"
>
<ChevronLeft className="h-6 w-6" />
</button>
<button
onClick={() => scroll('right')}
className="p-2 rounded-full border border-border bg-background hover:bg-muted transition-colors"
aria-label="Scroll right"
>
<ChevronRight className="h-6 w-6" />
</button>
</div>
</div>

<div
ref={scrollContainerRef}
className="flex overflow-x-auto gap-4 sm:gap-6 pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 scrollbar-hide snap-x"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
{categories.map((category, index) => (
<motion.div
key={category.name}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.05, duration: 0.4 }}
className="min-w-[280px] sm:min-w-[350px] md:min-w-[400px] snap-start"
>
<Link href={category.href}>
<Link href={category.href} className="block h-full">
<motion.div
whileHover={{ y: -5 }}
whileTap={{ scale: 0.98 }}
className="group relative flex flex-col items-center justify-center p-6 rounded-2xl bg-gradient-to-br from-card to-secondary/5 border border-primary/10 shadow-sm hover:shadow-lg hover:border-primary/50 transition-all duration-300 h-full min-h-[160px]"
className="group relative h-full flex items-center justify-between p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-secondary/30 to-background border border-border hover:border-primary/50 hover:from-secondary/50 hover:to-background transition-all duration-300 overflow-hidden"
>
<div className="mb-4 text-primary group-hover:scale-110 transition-transform duration-300 bg-primary/10 p-4 rounded-xl">
<category.icon className="h-8 w-8" strokeWidth={1.5} />
<div className="absolute -right-4 -bottom-4 text-primary/5 rotate-12 transform group-hover:scale-110 group-hover:text-primary/10 transition-all duration-500">
<category.icon className="w-32 h-32" strokeWidth={1} />
</div>

<div className="relative z-10 flex-1 pr-4">
<h3 className="text-lg sm:text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
{category.name}
</h3>
<p className="text-sm sm:text-base text-muted-foreground line-clamp-2">
{category.description}
</p>
</div>
<div className="relative z-10 flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-xl bg-background/80 backdrop-blur-sm shadow-sm group-hover:scale-105 transition-transform duration-300 border border-primary/10">
<category.icon className="h-8 w-8 sm:h-10 sm:w-10 text-primary" strokeWidth={1.5} />
</div>
<h3 className="text-base sm:text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
{category.name}
</h3>
</motion.div>
</Link>
</motion.div>
Expand Down
14 changes: 6 additions & 8 deletions app/components/home/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,28 +90,26 @@ export default function HeroSection() {
</div>
</motion.div>

{/* Bottom Right: Components */}
<motion.div
variants={itemVariants}
className="relative group rounded-3xl overflow-hidden min-h-[250px] lg:min-h-0 bg-[#F0F4F8] dark:bg-muted"
>
<div className="absolute top-0 right-0 max-w-[60%] p-6 z-10 text-right">
<div className="absolute top-6 right-6 z-10 text-right max-w-[180px]">
<h3 className="text-xl font-bold text-foreground mb-1">Components</h3>
<p className="text-muted-foreground text-sm">Power your dream</p>
<p className="text-muted-foreground text-sm font-medium">Power your dream</p>
<Link
href="/components"
className="mt-4 inline-flex items-center text-sm font-bold text-primary hover:underline"
className="mt-4 inline-flex items-center text-sm font-bold text-primary hover:text-primary/80 transition-colors"
>
Upgrade Now
</Link>
</div>
<div className="absolute bottom-0 left-0 p-4">
<div className="absolute bottom-0 left-0 w-[65%] h-[90%] pointer-events-none">
<Image
src="/images/hero/hero-gpu.png"
alt="High End GPU"
width={280}
height={200}
className="object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-105 group-hover:-translate-y-2"
fill
className="object-contain object-left-bottom drop-shadow-2xl transition-transform duration-500 group-hover:scale-105"
/>
</div>
</motion.div>
Expand Down
17 changes: 9 additions & 8 deletions app/components/ui/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {
Sun,
Menu,
X,
Cpu,
} from 'lucide-react';
import Image from 'next/image';
import { useThemeStore } from '@/lib/store/themeStore';
import { useCartStore } from '@/lib/store/cartStore';
import { useWishlistStore } from '@/lib/store/wishlistStore';
Expand Down Expand Up @@ -69,13 +69,14 @@ export default function Navigation() {
<div className="flex items-center justify-between h-14 sm:h-16">
{/* Logo */}
<Link href="/" className="flex items-center space-x-2 group">
<motion.div
whileHover={{ rotate: 180 }}
transition={{ duration: 0.5 }}
className="text-primary"
>
<Cpu size={28} strokeWidth={2.5} />
</motion.div>
<Image
src="/logo.png"
alt="CS02 Logo"
width={32}
height={32}
className="w-8 h-8 object-contain"
priority
/>
<div className="flex flex-col">
<span className="text-xl font-heading font-bold tracking-tight leading-none group-hover:text-primary transition-colors">
CS02
Expand Down
Binary file modified app/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added public/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.