Skip to content

feat: Home page responsiveness #141

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
DioChuks merged 3 commits into from
Aug 12, 2025
Merged

feat: Home page responsiveness #141

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8256f8f
feat: Home page responsiveness
YakshitAgarwal Aug 3, 2025
3e7c24d
Feat: Home page resposive
YakshitAgarwal Aug 4, 2025
a684413
changes done
YakshitAgarwal Aug 12, 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
2 changes: 1 addition & 1 deletion app/(main)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function HomeLayout({
children: React.ReactNode;
}>) {
return (
<div className={`${futsat.className} flex flex-col min-h-screen overflow-x-hidden`}>
<div className={`${futsat.className} flex flex-col min-h-screen`}>
<Navbar />
<MobileNavbar />
<main className="flex-grow">{children}</main>
Expand Down
24 changes: 11 additions & 13 deletions app/(main)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="min-h-screen">
<main className=" flex flex-col gap-20 px-4 sm">
<main className=" flex flex-col gap-20 px-0 sm:px-4 sm">
<Hero />
<TrendingNft/>
<TrendingCollections/>
<LiveAuction/>
<YouMayAlsoLike/>
<Newsletter/>
<TrendingNft />
<TrendingCollections />
<LiveAuction />
<YouMayAlsoLike />
<Newsletter />
</main>
</div>
);
Expand Down
63 changes: 48 additions & 15 deletions components/landing-page/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -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 = {
Expand All @@ -49,9 +55,9 @@ export default function Footer() {
};

return (
<footer className="w-full h-fit text-white bg-black">
<footer className="w-full min-h-[1400px] sm:min-h-fit text-white bg-black">
<motion.div
className="w-full px-4 md:px-0 py-8 lg:py-10 container mx-auto"
className="w-full px-4 py-12 md:px-8 container mx-auto"
initial="hidden"
animate="visible"
variants={containerVariants}
Expand All @@ -68,12 +74,12 @@ export default function Footer() {
className="w-28 h-auto"
alt="StarkBid logo"
/>
<p className="text-white/90 font-semibold text-xs md:text-base mb-2.5">
<p className="text-white/90 font-semibold text-[16px] md:text-base mb-2.5">
Powering the Future of Digital Auctions on Starknet.
</p>
<form
onSubmit={handleSubmit(onSubmit)}
className="w-full flex gap-2.5"
className="w-full flex flex-col gap-[10px] sm:flex-row"
>
<div className="flex-grow">
<input
Expand All @@ -100,7 +106,7 @@ export default function Footer() {
<h3 className="text-white/90 font-bold text-base md:text-xl mb-4">
Join The Community
</h3>
<div className="flex gap-4">
<div className="flex justify-between sm:justify-normal sm:gap-4">
{socialLinks.map((social) => (
<Link
key={social.name}
Expand All @@ -122,7 +128,7 @@ export default function Footer() {
</div>
</motion.div>

<div className="grid grid-cols-3 md:grid-cols-3 gap-x-3 md:gap-x-5 gap-y-10 xl:gap-x-12">
<div className="hidden sm:grid sm:grid-cols-3 gap-x-3 sm:gap-x-5 gap-y-10 xl:gap-x-12">
{linkKeys.map((category) => (
<motion.div
key={category}
Expand All @@ -146,36 +152,63 @@ export default function Footer() {
</motion.div>
))}
</div>

{/*Mobile view */}

<div className="flex justify-around items-center gap-[100px] sm:hidden">
{mobileLinkKeys.map((category) => (
<motion.div
key={category}
className="space-y-4"
variants={itemVariants}
>
<h3 className="text-white/90 font-bold text-base md:text-xl">
{category}
</h3>
<nav className="flex flex-col gap-y-[20px] text-sm">
{getMobileLinks(category).map((item) => (
<Link
key={item}
href={`/${item.toLowerCase().replace(/\s+/g, "-")}`}
className="text-white/60 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-[#7C3AED] rounded"
>
{item}
</Link>
))}
</nav>
</motion.div>
))}
</div>
</div>

<motion.div
className="mt-10 pt-[30px] border-t-[0.4px] border-white/60"
variants={itemVariants}
>
<div className="flex flex-col-reverse lg:flex-row justify-center items-center gap-4">
<p className="text-center md:text-left text-white/90 text-sm">
Copyright © {currentYear} StrakBid. All rights reserved
<div className="flex flex-col justify-start items-start lg:flex-row sm:justify-center sm:items-center gap-5">
<p className="text-center md:text-left sm:text-white/90 text-sm text-[#8E9BAE]">
Copyright © {currentYear} StarkBid. All rights reserved
</p>
<div className="flex flex-col md:flex-row items-center gap-4 md:gap-6">
<div className="flex gap-x-2 md:gap-x-6">
<div className="flex flex-col justify-start items-start md:flex-row sm:items-center gap-5 md:gap-6">
<div className="flex flex-col gap-5 sm:flex-row sm:gap-x-2 md:gap-x-6">
{" "}
<Link
href="/terms-condition"
className="text-white/90 text-sm hover:text-white transition-colors"
className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors"
>
Terms & Condition
</Link>
<Link
href="/privacy-policy"
className="text-white/90 text-sm hover:text-white transition-colors"
className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors"
>
Privacy Policy
</Link>
</div>

<a
href="mailto:support@starkbid.com"
className="text-white/90 text-sm hover:text-white transition-colors "
className="text-[#8E9BAE] sm:text-white/90 text-sm hover:text-white transition-colors "
>
support@starkbid.com
</a>
Expand Down
149 changes: 124 additions & 25 deletions components/landing-page/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,22 +68,23 @@ const Hero = () => {
// // }
// // };

const goToSlide = useCallback((index: React.SetStateAction<number>) => {
if (isTransitioning) return;
const goToSlide = useCallback(
(index: React.SetStateAction<number>) => {
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);
Expand All @@ -106,23 +107,23 @@ const Hero = () => {

return (
<div
className="mt-4 pb-6 sm:mt-6 md:mt-[22px] relative overflow-hidden rounded-xl w-full max-w-[1320px] mx-auto"
className="pb-6 sm:mt-6 md:mt-[22px] relative sm:overflow-hidden sm:rounded-xl w-full max-w-[1320px] mx-auto"
style={{ height: "clamp(400px, 50vw, 525px)" }}
>
<div
className="relative w-full h-full"
ref={carouselRef}
// onTouchStart={handleTouchStart}
// onTouchMove={handleTouchMove}
// onTouchEnd={handleTouchEnd}
// onMouseDown={handleMouseDown}
// onMouseMove={handleMouseMove}
// onMouseUp={handleMouseUp}
// onMouseLeave={handleMouseLeave}
// onTouchStart={handleTouchStart}
// onTouchMove={handleTouchMove}
// onTouchEnd={handleTouchEnd}
// onMouseDown={handleMouseDown}
// onMouseMove={handleMouseMove}
// onMouseUp={handleMouseUp}
// onMouseLeave={handleMouseLeave}
>
{/* Slides */}
<div
className="flex transition-transform duration-500 ease-in-out h-full"
className="hidden sm:flex sm:flex-row transition-transform duration-500 ease-in-out h-full"
style={{ transform: `translateX(-${activeIndex * 100}%)` }}
>
{nftItems.map((nft, index) => (
Expand Down Expand Up @@ -220,6 +221,103 @@ const Hero = () => {
))}
</div>

{/*Mobile view */}

<div
className="flex transition-transform duration-500 sm:hidden ease-in-out h-full"
style={{ transform: `translateX(-${activeIndex * 100}%)` }}
>
{nftItems.map((nft, index) => (
<div
key={nft.id}
className="flex-shrink-0 w-full h-[600px] relative"
style={{
backgroundImage: `url(/svgs/hero-bg.svg)`,
backgroundSize: "150%",
backgroundPositionX: "40%",
backgroundPositionY: "30%",
backgroundRepeat: "no-repeat",
}}
>
{/* Gradient overlay - positioned on top of the image */}
<div
className="absolute top-0 right-0 bottom-0 left-0 z-10 pointer-events-none"
style={{
background:
"linear-gradient(180deg, rgba(16, 18, 19, 0) 0%, #101213 63.59%)",
}}
></div>

{/* Content overlay */}
<div className="absolute inset-0 w-full z-20 flex flex-col justify-start px-4 pt-56 pb-20">
<div className="flex flex-col gap-[20px]">
<div className="flex flex-col gap-[10px]">
<div>
<div className="font-bold text-[30px]">{nft.title}</div>
<div className="flex justify-between">
<div className="flex flex-col gap-[4px]">
<div className="text-[14px] font-semibold">
Creator
</div>
<div className="flex items-center gap-[2px]">
<div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-purple-600 mr-2 flex items-center justify-center text-xs text-white">
{nft.creator?.charAt(0) || "A"}
</div>
<div className="text-[14px] font-semibold">
{nft.creator || "Anonymous"}
</div>
{nft.verified && (
<div className="ml-1 w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">
✓
</div>
)}
</div>
</div>
<div>
<button
onClick={() => toggleIsLiked(index)}
className="text-gray-400"
>
{isLiked[index] ? (
<BsHeartFill className="text-ash" size={20} />
) : (
<BsHeart size={20} />
)}
</button>
</div>
</div>
<div className="flex justify-between items-center">
<div className="text-[14px] font-semibold">
Current bid
</div>
<div className="text-[16px] font-bold">
{nft.currentBid}
</div>
</div>
</div>
<div className="text-[16px] font-medium">
{nft.description}
</div>
<div className="text-[14px] font-semibold flex gap-[10px]">
<div>{nft.minted}</div>
<div>|</div>
<div>{nft.timeLeft}</div>
</div>
</div>
<div className="flex items-center gap-[10px]">
<button className="bg-[#8C62F2] text-white font-bold py-[10px] px-[22px] rounded-[10px] w-full">
Place a bid
</button>
<button className="bg-white text-black font-bold py-[10px] px-[22px] rounded-[10px] w-full">
Mint for free
</button>
</div>
</div>
</div>
</div>
))}
</div>

{/* Navigation arrows */}
<button
className="absolute left-1 sm:left-2 top-1/2 transform -translate-y-1/2 w-8 h-8 sm:w-10 sm:h-10 bg-black/80 rounded-full flex items-center justify-center text-white z-30 hover:bg-black/70 transition-colors"
Expand All @@ -237,15 +335,16 @@ const Hero = () => {
</button>

{/* Indicator dots */}
<div className="absolute sm:-bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 sm:space-x-3 z-[1000]">
<div className="absolute sm:-bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2 sm:space-x-3 z-[1000] pt-60">
{nftItems.map((_, index) => (
<button
key={index}
onClick={() => goToSlide(index)}
className={`h-1 rounded-full transition-all duration-300 ${index === activeIndex
? "w-20 sm:w-20 bg-white"
: "w-20 bg-gray-600"
}`}
className={`h-1 rounded-full transition-all duration-300 ${
index === activeIndex
? "w-20 sm:w-20 bg-white"
: "w-20 bg-gray-600"
}`}
/>
))}
</div>
Expand Down
Loading
Loading