implement feature and category sections

app/page.tsx

@@ -1,4 +1,4 @@
-import Index from '../components/pages/landing/Index';
+import Index from '../components/pages/landing/index';
 
 export default function Home() {
   return (

components/layout/Footer.tsx

@@ -24,7 +24,7 @@ const Footer: React.FC<FooterProps> = ({
   privacyPolicyLink,
 }) => {
   return (
-    <footer className="bg-gradient-to-r from-black via-black to-purple-900 text-gray-300 py-12">
+    <footer className="bg-gradient-to-r from-black via-black to-purple-950 text-gray-300 py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col md:flex-row md:justify-between">
           <div className="mb-8 md:mb-0">

components/pages/artist/Banner.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function ImageBanner() {
+  return (
+    <section className="relative bg-black text-white">
+    <div className="relative w-full">
+      <img 
+        src="/assets/banner.png" 
+        alt="Art Banner" 
+        className="w-full h-64 object-cover" 
+      />
+    </div>
+  </section>
+  );
+}

components/pages/artist/GallerySection.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import SalesCard from "../../ui/SalesCard";
+
+export default function SalesGallerySection() {
+    const salesItems = [
+      { image: "/assets/Frame1.png", title: "Da Viper", creator: "Tom Edison", amount: "45.50 USD", creatorAvatar: "/assets/Frame1.png" },
+      { image: "/assets/Frame1.png", title: "Red devil", creator: "Jane Doe", amount: "45.50 USD",  creatorAvatar: "/assets/Frame1.png" },
+      { image: "/assets/Frame1.png", title: "Evan SH", creator: "John Smith", amount: "45.50 USD", creatorAvatar: "/assets/Frame1.png" },
+      { image: "/assets/Frame1.png", title: "Practice 1", creator: "Alice", amount: "FREE", creatorAvatar: "/assets/Frame1.png" },
+      { image: "/assets/Frame1.png", title: "Spirit Lady", creator: "Bob", amount: "65.50 USD", creatorAvatar: "/assets/Frame1.png" },
+      { image: "/assets/Frame2.png", title: "Practice 2", creator: "Eve", amount: "FREE", creatorAvatar: "/assets/Frame2.png" },
+      { image: "/assets/Frame2.png", title: "102 Fantasy skin", creator: "Tom Edison", amount: "20.00 USD", creatorAvatar: "/assets/Frame2.png" },
+      { image: "/assets/Frame2.png", title: "snorri", creator: "Jane Doe", amount: "45.50 USD", creatorAvatar: "/assets/Frame2.png" },
+      { image: "/assets/Frame2.png", title: "Yasha Nyakrevs", creator: "John Smith", amount: "40.50 USD", creatorAvatar: "/assets/Frame2.png" },
+    ];
+
+    return (
+      <section className="py-16 bg-black">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {salesItems.map((item, index) => (
+              <SalesCard
+                key={index}
+                image={item.image}
+                title={item.title}
+                creator={item.creator}
+                amount={item.amount}
+                creatorAvatar={item.creatorAvatar} 
+              />
+            ))}
+          </div>
+          <div className="flex justify-center mt-8">
+            <button className="px-6 py-2 text-white bg-purple-600 rounded-lg hover:bg-purple-700">
+              Load More
+            </button>
+          </div>
+        </div>
+      </section>
+    );
+    }

components/pages/artist/HeroSection.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function HeroSection() {
+  return (
+    <section className="relative bg-black text-white">
+    <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+      <div className="text-center">
+        <h1 className="text-4xl md:text-6xl font-extrabold">Showcase and sell your art in the most awesome art marketplace</h1>
+        <a href="/upload" className="inline-block mt-8 text-purple-400 font-bold text-lg hover:underline">
+          Upload your work &rarr;
+        </a>
+      </div>
+    </div>
+  </section>
+  );
+}

components/pages/artist/SearchFilter.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { FaTh, FaList, FaComments } from "react-icons/fa";
+
+export default function SearchFilterSection() {
+  return (
+    <section className="bg-black text-white py-4">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+        <input
+          type="text"
+          placeholder="Search for a model by name or attribute"
+          className="w-full max-w-xs p-3 rounded-lg border border-white bg-black text-white placeholder-gray-500"
+        />
+        <div className="flex items-center lg:space-x-2 space-x-2"> 
+          <select className="p-3 rounded-lg border border-white bg-black text-white">
+            <option>Price: Low to High</option>
+            <option>Price: High to Low</option>
+          </select>
+          <div className="flex space-x-2">
+            <FaTh />
+            <FaList />
+          </div>
+          <button className="flex items-center space-x-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg">
+            <FaComments />
+            <span>Message</span>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+

components/pages/artist/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import AppBar from "../../layout/AppBar";
+import HeroSection from "./HeroSection";
+import SearchFilterSection from "./SearchFilter";
+import ImageBanner from "./Banner";
+import { FaTwitter, FaInstagram, FaLinkedin } from "react-icons/fa";
+import Footer from "../../layout/Footer";
+import GallerySection from "./GallerySection";
+
+export default function HomePage() {
+  return (
+      <>
+      <AppBar />
+      <ImageBanner />
+      <HeroSection />
+      <SearchFilterSection />
+      <GallerySection />
+      <Footer
+          sections={[
+              {
+                  title: "AfriCanvas",
+                  links: [
+                      { name: "Explore", href: "/explore" },
+                      { name: "Digital Art", href: "/digital-art" },
+                      { name: "About", href: "/about" },
+                  ],
+              },
+              {
+                  title: "My Account",
+                  links: [
+                      { name: "Profile", href: "/profile" },
+                      { name: "Favourites", href: "/favourites" },
+                      { name: "Watchlist", href: "/watchlist" },
+                      { name: "My Collections", href: "/collections" },
+                      { name: "Settings", href: "/settings" },
+                  ],
+              },
+              {
+                  title: "Resources",
+                  links: [
+                      { name: "Platform Status", href: "/status" },
+                      { name: "Partners", href: "/partners" },
+                      { name: "Taxes", href: "/taxes" },
+                      { name: "Newsletter", href: "/newsletter" },
+                  ],
+              },
+              {
+                  title: "Community",
+                  links: [
+                      { name: "Help Center", href: "/help-center" },
+                      { name: "Suggest Feature", href: "/suggest-feature" },
+                      { name: "Subscribe", href: "/subscribe" },
+                  ],
+              },
+          ]}
+          socialLinks={[
+              { icon: <FaTwitter />, href: "https://twitter.com" },
+              { icon: <FaInstagram />, href: "https://instagram.com" },
+              { icon: <FaLinkedin />, href: "https://linkedin.com" },
+          ]}
+          copyrightText="© AfriCanvas, Inc © All Rights Reserved"
+          termsLink="/terms"
+          privacyPolicyLink="/privacy-policy" /></>
+  );
+}

components/pages/landing/CategorySection.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { FaPaintBrush, FaMusic, FaCamera, FaFilm, FaGamepad, FaPencilRuler, FaPhotoVideo, FaIcons } from "react-icons/fa";  
+import CategoryCard from "../../ui/CategoryCard";  
+
+export default function CategoriesSection() {
+  const categories = [
+    { image: "/assets/digital-art.png", icon: <FaPaintBrush />, label: "Digital Art" },
+    { image: "/assets/game-assets.png", icon: <FaIcons />, label: "Game Assets" },
+    { image: "/assets/audio.png", icon: <FaMusic />, label: "Audio" },
+    { image: "/assets/photography.png", icon: <FaCamera />, label: "Photography" },
+    { image: "/assets/animation.png", icon: <FaFilm />, label: "Animation" },
+    { image: "/assets/modelling.png", icon: <FaPencilRuler />, label: "Modeling" },
+    { image: "/assets/game-art.png", icon: <FaGamepad />, label: "Game Art" },
+    { image: "/assets/illustration.png", icon: <FaPhotoVideo />, label: "Illustration" },
+  ];
+
+  return (
+    <section className="py-16 bg-black">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h2 className="text-3xl font-extrabold text-white mb-8">Categories</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {categories.map((category, index) => (
+            <CategoryCard
+              key={index}
+              image={category.image}
+              icon={category.icon}
+              label={category.label}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/pages/landing/FeaturedSection.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import SalesCard from "@/components/ui/SalesCard";  
+
+export default function FeaturedSection() {
+  return (
+    <section className="py-24 bg-gradient-to-r from-purple-950 via-black to-black">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <div>
+          <h2 className="text-4xl font-extrabold text-white mb-4">
+            Experience AI-Guided Custom Artwork
+          </h2>
+          <p className="text-lg lg:text-xl text-gray-300 mb-8">
+            The world's largest marketplace where AI helps you communicate your vision, and our top digital artists bring it to life.
+          </p>
+          <div className="flex space-x-8 mb-8">
+            <div>
+              <h3 className="text-4xl font-bold text-purple-500">999,000</h3>
+              <p className="text-gray-400">Artwork Created</p>
+            </div>
+            <div>
+              <h3 className="text-4xl font-bold text-purple-500">2,000</h3>
+              <p className="text-gray-400">Artists</p>
+            </div>
+            <div>
+              <h3 className="text-4xl font-bold text-purple-500">10,000</h3>
+              <p className="text-gray-400">Satisfied Clients</p>
+            </div>
+          </div>
+          <button className="px-8 py-3 border border-white text-white rounded-lg hover:bg-purple-700 transition">
+            Get Started
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+          <SalesCard 
+            image="/assets/Frame2.png"
+            title="Da Viper"
+            creator="Tom Edison"
+            amount="45.50"
+            creatorAvatar="/assets/Frame2.png"
+          />
+          <SalesCard 
+            image="/assets/Frame2.png"
+            title="Da Viper"
+            creator="Tom Edison"
+            amount="45.50"
+            creatorAvatar="/assets/Frame2.png"
+          />
+          <SalesCard 
+            image="/assets/Frame2.png"
+            title="Da Viper"
+            creator="Tom Edison"
+            amount="45.50"
+            creatorAvatar="/assets/Frame2.png"
+          />
+          <SalesCard 
+            image="/assets/Frame2.png"
+            title="Da Viper"
+            creator="Tom Edison"
+            amount="45.50"
+            creatorAvatar="/assets/Frame2.png"
+          />
+        </div>
+
+      </div>
+    </section>
+  );
+}

components/pages/landing/HeroSection.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function HeroSection() {
   return (
-    <section className="relative flex flex-col lg:flex-row items-center justify-between px-8 py-16 lg:px-24 lg:py-32 bg-gradient-to-r from-purple-900 via-black to-black text-white">
+    <section className="relative flex flex-col lg:flex-row items-center justify-between px-8 py-16 lg:px-24 lg:py-32 bg-gradient-to-r from-purple-950 via-black to-black text-white">
       <div className="flex flex-row lg:w-1/2">
         <img
           src="/assets/Frame1.png"

components/pages/landing/Index.tsx

@@ -7,6 +7,8 @@ import SalesSection from './SalesSection';
 import CreatorSection from './CreatorSection';
 import GetStartedSection from './GetStarted';
 import SubscribeSection from './SubscribeSection';
+import FeaturedSection from './FeaturedSection';
+import CategoriesSection from './CategorySection';
 
 const Index = () => {
   return (
@@ -16,6 +18,8 @@ const Index = () => {
       <main>
         <HeroSection />
         <SalesSection />
+        <FeaturedSection />
+        <CategoriesSection />
         <CreatorSection />
         <GetStartedSection />
         <SubscribeSection />

components/ui/CategoryCard.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+type CategoryCardProps = {
+  image: string;
+  icon: React.ReactElement;
+  label: string;
+};
+
+function CategoryCard({ image, icon, label }: CategoryCardProps) {
+  return (
+    <div className="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
+      <img src={image} alt={label} className="w-full h-48 object-cover" />
+      <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-75"></div>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="text-white text-5xl">{icon}</div>
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 p-4 bg-gray-900 bg-opacity-75 text-center">
+        <span className="text-white font-semibold">{label}</span>
+      </div>
+    </div>
+  );
+}
+
+export default CategoryCard;