From 8256f8fce581ebcaf3b1e1278e96785ab4609aaa Mon Sep 17 00:00:00 2001 From: YakshitAgarwal Date: Sun, 3 Aug 2025 21:29:29 +0530 Subject: [PATCH 1/3] feat: Home page responsiveness --- app/(main)/page.tsx | 24 ++++--- components/landing-page/Hero.tsx | 70 +++++++++++---------- components/landing-page/trending-nft.tsx | 79 ++++++++++++++++-------- 3 files changed, 101 insertions(+), 72 deletions(-) diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx index e51bd77..7f81236 100644 --- a/app/(main)/page.tsx +++ b/app/(main)/page.tsx @@ -1,22 +1,20 @@ import Hero from "@/components/landing-page/Hero"; -import TrendingCollections from '@/components/landing-page/trending-collections'; -import TrendingNft from '@/components/landing-page/trending-nft' -import YouMayAlsoLike from '@/components/landing-page/you-may-also-like' -import Newsletter from '@/components/newsletter'; -import LiveAuction from '@/components/landing-page/live-auction' - - +import TrendingCollections from "@/components/landing-page/trending-collections"; +import TrendingNft from "@/components/landing-page/trending-nft"; +import YouMayAlsoLike from "@/components/landing-page/you-may-also-like"; +import Newsletter from "@/components/newsletter"; +import LiveAuction from "@/components/landing-page/live-auction"; export default function Home() { return (
-
+
- - - - - + + + + +
); diff --git a/components/landing-page/Hero.tsx b/components/landing-page/Hero.tsx index ea50c04..687b9ac 100644 --- a/components/landing-page/Hero.tsx +++ b/components/landing-page/Hero.tsx @@ -1,5 +1,6 @@ "use client"; import React, { useState, useRef, useEffect, useCallback } from "react"; +import clsx from "clsx"; import { ArrowLeft, ArrowRight } from "lucide-react"; import { nftItems } from "@/constants/data"; import { BsHeart, BsHeartFill } from "react-icons/bs"; @@ -68,22 +69,23 @@ const Hero = () => { // // } // // }; - const goToSlide = useCallback((index: React.SetStateAction) => { - if (isTransitioning) return; + const goToSlide = useCallback( + (index: React.SetStateAction) => { + if (isTransitioning) return; - setIsTransitioning(true); - setActiveIndex(index); + setIsTransitioning(true); + setActiveIndex(index); - setTimeout(() => { - setIsTransitioning(false); - }, 500); - }, [isTransitioning] - ) + setTimeout(() => { + setIsTransitioning(false); + }, 500); + }, + [isTransitioning] + ); const nextSlide = useCallback(() => { const newIndex = (activeIndex + 1) % nftItems.length; goToSlide(newIndex); - }, [activeIndex, goToSlide] - ) + }, [activeIndex, goToSlide]); const prevSlide = () => { const newIndex = (activeIndex - 1 + nftItems.length) % nftItems.length; goToSlide(newIndex); @@ -106,19 +108,19 @@ const Hero = () => { return (
{/* Slides */}
{ {nftItems.map((nft, index) => (
{ > {/* Gradient overlay - positioned on top of the image */}
{/* Content overlay */} -
+

{nft.title}

@@ -222,7 +227,7 @@ const Hero = () => { {/* Navigation arrows */}
diff --git a/components/landing-page/trending-nft.tsx b/components/landing-page/trending-nft.tsx index 44415a9..7523199 100644 --- a/components/landing-page/trending-nft.tsx +++ b/components/landing-page/trending-nft.tsx @@ -1,11 +1,11 @@ -'use client' -import React, { useState } from 'react'; -import Image from 'next/image'; -import { BsHeart, BsHeartFill } from 'react-icons/bs'; -import { MdVerified } from 'react-icons/md'; -import Arrow from '@/public/arrow.png' -import { NFTCardProps, nftData } from '@/constants/data'; -import Link from 'next/link'; +"use client"; +import React, { useState } from "react"; +import Image from "next/image"; +import { BsHeart, BsHeartFill } from "react-icons/bs"; +import { MdVerified } from "react-icons/md"; +import Arrow from "@/public/arrow.png"; +import { NFTCardProps, nftData } from "@/constants/data"; +import Link from "next/link"; const NFTCard: React.FC = ({ title, @@ -28,7 +28,7 @@ const NFTCard: React.FC = ({ onMouseLeave={() => setIsHovered(false)} >
- + {creatorName} = ({ height={28} className="rounded-full" /> - {creatorName} + + {creatorName} + {isVerified && }
@@ -56,10 +62,15 @@ const NFTCard: React.FC = ({ src={`/${image}`} alt={title} fill - className={`px-4 transition-all duration-300 ease-in-out ${isHovered ? 'scale-[1.03] ' : ''}`} + className={`px-4 transition-all duration-300 ease-in-out ${ + isHovered ? "scale-[1.03] " : "" + }`} /> {isHovered && ( - + Place a Bid )} @@ -84,40 +95,54 @@ const NFTCard: React.FC = ({ }; const TrendingNFTs: React.FC = () => { - const [activeTab, setActiveTab] = useState('trending'); + const [activeTab, setActiveTab] = useState("trending"); return (
-
+
-

Trending NFTs

+
+

+ Trending NFTs +

+

+ 1540 items +

+
-
+
{nftData.map((nft) => ( ))}
- + View all NFTs - arrow icon + arrow icon
From 3e7c24d84d32d876d49b9f89d756b3a566f53429 Mon Sep 17 00:00:00 2001 From: YakshitAgarwal Date: Mon, 4 Aug 2025 22:38:42 +0530 Subject: [PATCH 2/3] Feat: Home page resposive --- app/(main)/layout.tsx | 2 +- components/landing-page/Footer.tsx | 63 +++- components/landing-page/Hero.tsx | 125 +++++++- components/landing-page/live-auction.tsx | 294 ++++++++++++++++-- .../landing-page/trending-collections.tsx | 68 +++- components/landing-page/trending-nft.tsx | 61 ++-- components/landing-page/you-may-also-like.tsx | 93 ++++-- components/newsletter.tsx | 141 +++++---- components/ui/ViewAllButton.tsx | 4 +- constants/data.ts | 285 +++++++++-------- constants/footer.ts | 19 ++ constants/types.ts | 13 + 12 files changed, 855 insertions(+), 313 deletions(-) create mode 100644 constants/types.ts diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx index f3cdcea..7aafaa2 100644 --- a/app/(main)/layout.tsx +++ b/app/(main)/layout.tsx @@ -15,7 +15,7 @@ export default function HomeLayout({ children: React.ReactNode; }>) { return ( -
+
{children}
diff --git a/components/landing-page/Footer.tsx b/components/landing-page/Footer.tsx index dd67518..7ab583b 100644 --- a/components/landing-page/Footer.tsx +++ b/components/landing-page/Footer.tsx @@ -5,7 +5,7 @@ import * as z from "zod"; import Link from "next/link"; import Image from "next/image"; import { motion } from "framer-motion"; -import { links, socialLinks } from "@/constants/footer"; +import { links, socialLinks, mobileLinks } from "@/constants/footer"; const formSchema = z.object({ email: z.string().email("Please enter a valid email address"), @@ -28,6 +28,12 @@ export default function Footer() { const getLinks = (category: keyof typeof links) => links[category] || []; const linkKeys = Object.keys(links) as (keyof typeof links)[]; + + const getMobileLinks = (category: keyof typeof mobileLinks) => + mobileLinks[category] || []; + const mobileLinkKeys = Object.keys( + mobileLinks + ) as (keyof typeof mobileLinks)[]; const currentYear = new Date().getFullYear(); const containerVariants = { @@ -49,9 +55,9 @@ export default function Footer() { }; return ( -