Repository: StarkBid/starkbid-web
Pull request #52: feat: built the you may also like section
Author: login: AnnetteCodes
Created: 2025-03-27T11:30:11Z | Merged: 2025-03-31T00:37:44Z

# Added "You might be interested by"  Section

This PR adds a new component to showcase featured articles about StarkBid and NFTs. The section includes three article cards with hover effects and a "View all" button.

## Changes

- Created a new ArticleProps interface in constants/data.ts to support article data structure
- Added articleData array with initial featured articles
- Implemented the NFTArticlesSection component with:
  - Responsive grid layout (3 columns on desktop, 1 column on mobile)
  - Hover effects on article cards (scaling images and revealing "Read Article" button)
  - Gradient overlay on images to improve text visibility
  - Clean border and background styling to match the existing site design

## Design Features

- Consistent styling with the existing NFT card components
- Dark theme with accent borders and hover states
- Smooth animations and transitions for interactive elements
- Clean typography with proper text hierarchy

This component enhances the user experience by providing additional content navigation and showcasing our thought leadership in the NFT space.


Diff:
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 5cbbae0..dc86f67 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -1,5 +1,6 @@
 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';
 
 
@@ -8,6 +9,7 @@ export default function Home() {
     <div className="min-h-screen bg-black">
       <main className=" flex flex-col gap-20 px-4 sm">
         <TrendingNft/>
+        <YouMayAlsoLike/>
         <Newsletter/>
       </main>
     </div>
diff --git a/components/landing-page/you-may-also-like.tsx b/components/landing-page/you-may-also-like.tsx
new file mode 100644
index 0000000..8033cde
--- /dev/null
+++ b/components/landing-page/you-may-also-like.tsx
@@ -0,0 +1,74 @@
+'use client'
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { ArticleProps, articleData } from '@/constants/data';
+
+const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div 
+      className="w-full h-full overflow-hidden rounded-xl bg-black border border-[#292929] flex flex-col transition-colors duration-300 hover:bg-[#292929]"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative h-64">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="relative w-full h-full">
+            <Image
+              src={`/${imageUrl}`}
+              alt={title}
+              fill
+              className={`object-cover transition-all duration-300 ease-in-out ${isHovered ? 'scale-[1.03]' : ''}`}
+              sizes="(max-width: 900px) 100vw, 33vw"
+            />
+          </div>
+          <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90"></div>
+        </div>
+        {isHovered && (
+          <button className="absolute bottom-20 left-1/2 transform -translate-x-1/2 border border-soft_grey bg-white text-black px-4 py-2 rounded-md text-sm font-medium z-10 transition-all duration-300 opacity-100 shadow-md hover:bg-gray-100">
+            Read Article
+          </button>
+        )}
+      </div>
+      <div className="p-6 flex-grow flex flex-col">
+        <h2 className="text-xl font-bold text-white mb-3">{title}</h2>
+        <p className="text-gray-300 text-sm">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+const MayAlsoLike: React.FC = () => {
+  return (
+    <div className="w-full bg-black text-white py-8 px-4">
+      <div className="max-w-[85.5rem] mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <div className='w-[46%]'>
+            <h1 className="text-3xl font-bold mb-3">You might be interested by</h1>
+            <p className="text-gray-300">
+              We&apos;ve written a few articles about StarkBid and how to run your NFTs better. Stay
+              updated with the latest in the world of NFTs, auctions, and blockchain innovations.
+            </p>
+          </div>
+          <button className="bg-[#272729] hover:bg-[#2e2e2f] text-white px-4 py-2 rounded-lg flex items-center">
+            View all
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+            </svg>
+          </button>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-[2em] ">
+          {articleData.map(article => (
+            <ArticleCard
+              key={article.id}
+              {...article}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MayAlsoLike;
\ No newline at end of file
diff --git a/constants/data.ts b/constants/data.ts
index dd70e50..c6d8ce3 100644
--- a/constants/data.ts
+++ b/constants/data.ts
@@ -1,15 +1,143 @@
 export interface NFTCardProps {
-    id: number;
-    title: string;
-    creatorName: string;
-    creatorIcon: string;
-    isVerified: boolean;
-    currentBid: number;
-    likes: number;
-    minted: number;
-    timeLeft: string;
-    image: string;
+  id: number;
+  title: string;
+  creatorName: string;
+  creatorIcon: string;
+  isVerified: boolean;
+  currentBid: number;
+  likes: number;
+  minted: number;
+  timeLeft: string;
+  image: string;
+}
+
+export const nftData: NFTCardProps[] = [
+  {
+    id: 1,
+    title: "The Pink-Blackened Horned Knight",
+    creatorName: "Jacksonito",
+    creatorIcon: "icon1.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "1.png"
+  },
+  {
+    id: 2,
+    title: "Relax & Breath",
+    creatorName: "Bitogadick",
+    creatorIcon: "icon2.png",
+    isVerified: false,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "2.png"
+  },
+  {
+    id: 3,
+    title: "Running Time",
+    creatorName: "Mickyvandy",
+    creatorIcon: "icon3.png",
+    isVerified: true,
+    currentBid: 0.745,
+    likes: 24,
+    minted: 2,
+    timeLeft: "4d 9h left",
+    image: "3.png"
+  },
+  {
+    id: 4,
+    title: "Yellow Weather",
+    creatorName: "Karhty26",
+    creatorIcon: "icon4.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "4.png"
+  },
+  {
+    id: 5,
+    title: "Space 101",
+    creatorName: "Fame Static",
+    creatorIcon: "icon5.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "5.png"
+  },
+  {
+    id: 6,
+    title: "Cool Fever",
+    creatorName: "Ella Walker",
+    creatorIcon: "icon6.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "6.png"
+  },
+  {
+    id: 7,
+    title: "Mood Of Staces",
+    creatorName: "Hades KM",
+    creatorIcon: "icon7.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "7.png"
+  },
+  {
+    id: 8,
+    title: "The Seal Man",
+    creatorName: "Olushola",
+    creatorIcon: "icon8.png",
+    isVerified: true,
+    currentBid: 0.956,
+    likes: 564,
+    minted: 24,
+    timeLeft: "1d 9h left",
+    image: "8.png"
+  },
+];
+
+export interface ArticleProps {
+  id: number;
+  title: string;
+  description: string;
+  imageUrl: string;
+}
+
+export const articleData: ArticleProps[] = [
+  {
+    id: 1,
+    title: "The Future of NFT Auctions on Starknet",
+    description: "Discover how StarkBid is transforming the NFT auction space with Starknet's Layer-2 technology.",
+    imageUrl: "blog1.png"
+  },
+  {
+    id: 2,
+    title: "Exclusive Interview with Top NFT Creators",
+    description: "Meet renowned artists and creators who are launching their NFTs on StarkBid.",
+    imageUrl: "blog2.png"
+  },
+  {
+    id: 3,
+    title: "How StarkBid Ensures Transparent & Secure Bidding",
+    description: "A deep dive into our fair bidding system, smart contract security, and low-fee transactions.",
+    imageUrl: "blog3.png"
   }
+
+];
   
   export const nftData: NFTCardProps[] = [
     {
@@ -243,4 +371,3 @@ export interface NFTCardProps {
       rate:'2065/1498'
     }
   ];
-  
\ No newline at end of file
diff --git a/public/blog1.png b/public/blog1.png
new file mode 100644
index 0000000..97f09c9
Binary files /dev/null and b/public/blog1.png differ
diff --git a/public/blog2.png b/public/blog2.png
new file mode 100644
index 0000000..dfa91fc
Binary files /dev/null and b/public/blog2.png differ
diff --git a/public/blog3.png b/public/blog3.png
new file mode 100644
index 0000000..b3a082b
Binary files /dev/null and b/public/blog3.png differ


Reviews:
user: login: Nwanne-san
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T21:57:52Z
user: login: codeZe-us
body: @AnnetteCodes please any update on this?
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-30T12:16:15Z

Review comments:
diff_hunk: @@ -0,0 +1,74 @@
+'use client'
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { ArticleProps, articleData } from '@/constants/data';
+
+const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div 
+      className="w-full h-full overflow-hidden rounded-xl bg-black border border-[#292929] flex flex-col transition-colors duration-300 hover:bg-[#292929]"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative h-64">
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="relative w-full h-full">
+            <Image
+              src={`/${imageUrl}`}
+              alt={title}
+              fill
+              className={`object-cover transition-all duration-300 ease-in-out ${isHovered ? 'scale-[1.03]' : ''}`}
+              sizes="(max-width: 900px) 100vw, 33vw"
+            />
+          </div>
+          <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90"></div>
+        </div>
+        {isHovered && (
+          <button className="absolute bottom-20 left-1/2 transform -translate-x-1/2 border border-soft_grey bg-white text-black px-4 py-2 rounded-md text-sm font-medium z-10 transition-all duration-300 opacity-100 shadow-md hover:bg-gray-100">
+            Read Article
+          </button>
path: components/landing-page/you-may-also-like.tsx
user: login: Nwanne-san
body: add a background color for hover for this button -- a yellowish color
created_at: 2025-03-27T21:56:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,74 @@
+'use client'
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { ArticleProps, articleData } from '@/constants/data';
+
+const ArticleCard: React.FC<ArticleProps> = ({ title, description, imageUrl }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div 
+      className="w-full h-full overflow-hidden rounded-xl bg-black border border-[#292929] flex flex-col transition-colors duration-300 hover:bg-[#292929]"
path: components/landing-page/you-may-also-like.tsx
user: login: Nwanne-san
body: Define these colors from tailwind config and import them for reusability
created_at: 2025-03-27T21:57:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,111 +1,139 @@
 export interface NFTCardProps {
-    id: number;
-    title: string;
-    creatorName: string;
-    creatorIcon: string;
-    isVerified: boolean;
-    currentBid: number;
-    likes: number;
-    minted: number;
-    timeLeft: string;
-    image: string;
+  id: number;
+  title: string;
+  creatorName: string;
+  creatorIcon: string;
+  isVerified: boolean;
+  currentBid: number;
+  likes: number;
+  minted: number;
+  timeLeft: string;
+  image: string;
+}
path: constants/data.ts
user: login: Nwanne-san
body: Transfer this to the `types` folder and import from there.
created_at: 2025-03-27T21:57:47Z
author_association: CONTRIBUTOR

PR comments:
user: login: AnnetteCodes
created_at: 2025-03-27T11:30:35Z
body: @Nwanne-san please look through this 
author_association: CONTRIBUTOR