change layout and data design

next.config.mjs

@@ -2,7 +2,7 @@
 const nextConfig = {
   output: "export",
   images: {
-    domains: ["avatars.githubusercontent.com"],
+    unoptimized: true,
   },
 };
 

public/data/ArnabChatterjee20k.json

@@ -0,0 +1,17 @@
+[
+  {
+    "title": "PickPalette",
+    "description": "Discover endless color possibilities with PickPalette – effortlessly generate palettes from images, explore diverse schemes, and soon, manage them on a dynamic dashboard. Elevate your design process with our upcoming AI suggestions and visualization tools. New updates - Personalised Dashboard,Live preview based on color algorithms",
+    "liveUrl": "https://www.producthunt.com/products/pickpalette",
+    "repoUrl": "https://github.com/ArnabChatterjee20k/PickPalette-PaletteFromImage",
+    "techStack": [
+      "REACT",
+      "SUPABASE",
+      "PINECONE",
+      "DENO",
+      "PLAYWRIGHT",
+      "MONGODB",
+      "EXPRESS"
+    ]
+  }
+]

public/data/ChromeGaming.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Spaceship Escort",
+    "description": "Spaceship Escort is a game where players protect spacecraft from threats in space. Players control escort ships, defend against attacks, and complete missions involving navigation, combat, and strategic decisions.",
+    "liveUrl": "https://chromegaming.github.io/Spaceship-escort/",
+    "repoUrl": "https://github.com/ChromeGaming/Spaceship-escort",
+    "techStack": ["Css", "html", "jquery", "bootstrap", "javascript"]
+  }
+]

public/data/Innovateninjas.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Paws",
+    "description": "Paws, is driven by a deep concern for animal welfare. Witnessing the challenges faced by animals worldwide, we were inspired to create a platform that enables users to report injured animals and connect them with the necessary assistance. It is a fast web-app that allows compassionate people to report stray injured animals to nearby NGOs and Animal Hospitals.",
+    "liveUrl": "https://pawss.vercel.app/",
+    "repoUrl": "https://github.com/Innovateninjas/Paws-frontend",
+    "techStack": ["ReactJS", "Javascript", "Firebase", "TailwindCSS"]
+  }
+]

public/data/Saurav-Pant.json

@@ -0,0 +1,10 @@
+[
+    {
+      "title": "First Issue",
+      "description": "First-Issue is an open-source platform designed specifically for beginners looking to contribute to open-source projects.",
+      "liveUrl": "https://firstissuedev.vercel.app",
+      "repoUrl": "https://github.com/ronisarkarexe/First-Issue",
+      "techStack": ["React", "Node.js"]
+    }
+  ]
+

public/data/TailoredUI.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "TailoredUI",
+    "description": "TailoredUI is a powerful tool for real-time customization of UI components, seamlessly integrated with Tailwind CSS. Effortlessly personalize and preview changes, harnessing Tailwind's flexible styling. Explore a rich library of pre-built components, ensure responsive design, and export perfected code for easy integration.",
+    "liveUrl": "https://dev-tailoredui.netlify.app/",
+    "repoUrl": "https://github.com/TailoredUI/TailoredUI",
+    "techStack": ["ReactJS", "Tailwind", "Typescript"]
+  }
+]

public/data/Tanay-ErrorCode.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Lupo Skill",
+    "description": "Lupo Skill stands out as an innovative skill-sharing web application crafted with ReactJS and TypeScript. It offers users a straightforward way to create and participate in knowledge-sharing events. Whether you're leading a workshop, exploring a new skill, or aiming to connect with industry experts, Lupo Skill provides a smooth platform for collaborative learning and networking. Featuring intuitive event creation tools, personalized user profiles, and a lively community vibe, Lupo Skill empowers individuals to share their expertise and delve into meaningful learning journeys.",
+    "liveUrl": "https://lupo-skill.web.app/",
+    "repoUrl": "https://github.com/Tanay-ErrorCode/lupo-skill",
+    "techStack": ["REACT", "FIREBASE", "TYPESCRIPT"]
+  }
+]

public/data/VanshKing30.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Foodies Web",
+    "description": "Foodies, your go-to college dining companion! Designed for seamless campus culinary experiences, Foodies simplifies menu exploration and nutritional insights. Access daily canteen menus, make informed dietary choices with Spoonacular integration, and empower canteen efficiency. Our platform prioritizes user security and simplicity, ensuring effortless student sign-ups and hassle-free canteen management. Stay up-to-date with our Health News section, delivering valuable insights for healthier eating habits. Embrace convenience and culinary enlightenment with Foodies!",
+    "liveUrl": "https://foodies-web-app.vercel.app/",
+    "repoUrl": "https://github.com/VanshKing30/FoodiesWeb",
+    "techStack": ["ReactJS", "Javascript", "NodeJS", "MongoDb", "Express"]
+  }
+]

public/data/hasmithagunda123.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Watchful Guardian",
+    "description": "Watchful Guardian is an innovative surveillance system designed to detect and respond to harassment against women in public spaces. Our state-of-the-art CCTV cameras are strategically placed to monitor streets, parks, and other public areas. Using advanced computer vision and machine learning algorithms, the system identifies suspicious activities in real-time and immediately alerts law enforcement with precise location details, video footage, and situational context.",
+    "liveUrl": "https://github.com/hasmithagunda123/ALL_INDIA_HACKATHON",
+    "repoUrl": "https://github.com/hasmithagunda123/ALL_INDIA_HACKATHON",
+    "techStack": ["PYTHON"]
+  }
+]

public/data/juhinagpure.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "Eduford University",
+    "description": "Explore the intersection of technology and society. Learn about environmental justice. Take the famous Problem of God course. Our innovative courses inspire and invite you to help solve some of today’s most pressing local, national and global issues.",
+    "liveUrl": "https://github.com/juhinagpure/Eduford-university",
+    "repoUrl": "https://github.com/juhinagpure/Eduford-university",
+    "techStack": ["ReactJS", "Html", "Css"]
+  }
+]

public/data/ronisarkarexe.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "First Issue",
+    "description": "First-Issue is an open-source platform designed specifically for beginners looking to contribute to open-source projects.",
+    "liveUrl": "https://firstissuedev.vercel.app",
+    "repoUrl": "https://github.com/ronisarkarexe/First-Issue",
+    "techStack": ["React", "Node.js"]
+  }
+]

src/app/page.tsx

@@ -1,10 +1,12 @@
 import HeaderComponent from "@/components/header/header.component";
+import HeroComponent from "@/components/hero/hero.component";
 import RepositoryComponent from "@/components/repository/repository.component";
 
 export default function Home() {
   return (
     <main>
-      <HeaderComponent />
+      {/* <HeaderComponent /> */}
+      <HeroComponent />
       <RepositoryComponent />
     </main>
   );

src/app/repos/page.tsx

@@ -0,0 +1,12 @@
+import RepoListViewComponent from "@/components/repository/repo.list.component.view";
+import React from "react";
+
+const RepoListComponent = () => {
+  return (
+    <div className="px-5 py-5">
+      <RepoListViewComponent />
+    </div>
+  );
+};
+
+export default RepoListComponent;

src/components/about_us.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import React from "react";
+
+const AboutUsComponent = () => {
+  return (
+    <div>
+      <h2 className="text-center text-blue-500 text-2xl">ABOUT 📝</h2>
+      <div>
+        <p className="text-sm text-gray-500 text-pretty indent-8 text-justify mt-3">
+          <span className="text-blue-500 text-xl">First-Issue</span> is an
+          open-source platform designed specifically for beginners looking to
+          contribute to open-source projects. It is especially tailored for the{" "}
+          <span className="text-blue-500 text-xl">Open-Source</span>{" "}
+          contributors. First Issue simplifies the process of finding tasks that
+          align with your skill level and interests, making it easier for you to
+          get started in the world of{" "}
+          <span className="text-blue-500">open-source</span> contributions.
+        </p>
+      </div>
+      {/* <h2 className="text-center text-blue-500 text-xl mt-5">Open Source</h2> */}
+      <h1 className="text-center text-sm text-gray-400 mt-4">
+        © 2024{" "}
+        <Link href="https://firstissuedev.vercel.app/">
+          <span className="hover:text-blue-400">@firstissue</span>
+        </Link>{" "}
+      </h1>
+    </div>
+  );
+};
+
+export default AboutUsComponent;

src/components/hero/hero.component.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import NextGenerationViewComponent from "./next.generation.view.component";
+
+const HeroComponent = () => {
+  return (
+    <div className="gradient-bg min-h-screen">
+      <div className="relative overflow-hidden">
+        <div className="subtle-curves"></div>
+        <div className="curved-line"></div>
+        <nav className="relative z-10 mx-auto max-w-8xl px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-16">
+              {/* <a href="#" className="flex items-center space-x-2">
+                <img
+                  src="https://ai-public.creatie.ai/gen_page/logo_placeholder.png"
+                  alt="Logo"
+                  className="h-8 w-auto"
+                />
+              </a> */}
+              <div className="hidden md:flex items-center space-x-8">
+                <a
+                  href="/repos"
+                  className="text-white hover:text-custom transition"
+                >
+                  REPOS
+                </a>
+                <a href="#" className="text-white hover:text-custom transition">
+                  ABOUT
+                </a>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <button className="!rounded-button bg-blue hover:bg-blue text-white px-6 py-2 font-medium transition-all">
+                JOIN
+              </button>
+            </div>
+          </div>
+        </nav>
+        <main className="relative z-10 mx-auto max-w-7xl px-6 pt-24 pb-24 text-center">
+          <NextGenerationViewComponent />
+          <h1 className="text-7xl font-bold text-white mb-8 tracking-tight">
+            Find your next
+            <br />
+            Open Source project
+            <span className="inline-block ml-4">
+              <i className="fas fa-bolt text-yellow-400 glow"></i>
+            </span>
+          </h1>
+          <p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
+            Describe what you&apos;re looking for and let our AI help you
+            discover the perfect repository.
+          </p>
+
+          <div className="flex-grow flex flex-col items-center justify-center">
+            <div className="relative max-w-3xl w-full before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-r before:from-purple-500/20 before:via-indigo-500/20 before:to-blue-500/20 before:blur-xl before:animate-pulse">
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                  <i className="fas fa-sparkles text-gray-400"></i>
+                </div>
+                <input
+                  type="text"
+                  className="block w-full pl-12 pr-32 py-4 bg-gray-800/30 backdrop-blur-sm border border-gray-700/50 rounded-xl focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 text-white placeholder-gray-400 transition-all duration-300 outline-none"
+                  placeholder="Describe the repository you're looking for..."
+                />
+
+                <div className="absolute inset-y-0 right-0 flex items-center pr-2">
+                  <button className="relative !rounded-button bg-gradient-to-r from-blue-900 via-emerald-800 to-blue-500 text-white font-medium px-6 py-2 mr-2 border border-transparent hover:border-white/20 transition-all duration-300 before:absolute before:inset-0 before:bg-gradient-to-r before:from-blue-500 before:via-blue-900 before:to-emerald-800 before:animate-border-gradient before:rounded-xl before:-z-10 before:blur-sm">
+                    <i className="fa fa-wand-magic-sparkles mr-2"></i>Generate
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-custom/20 rounded-full blur-3xl -z-10"></div>
+        <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-emerald-500/20 rounded-full blur-3xl -z-10"></div>
+        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-500/20 rounded-full blur-3xl -z-10"></div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroComponent;

src/components/hero/next.generation.view.component.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const NextGenerationViewComponent = () => {
+  return (
+    <div className="inline-flex items-center space-x-2 mb-8">
+      <span className="inline-flex items-center px-2 py-1 bg-gray-800/50 rounded-md text-xs font-medium text-white">
+        N
+      </span>
+      <span className="inline-flex items-center px-2 py-1 bg-gray-800/50 rounded-md text-xs font-medium text-white">
+        E
+      </span>
+      <span className="inline-flex items-center px-2 py-1 bg-gray-800/50 rounded-md text-xs font-medium text-white">
+        W
+      </span>
+      <span className="text-gray-400 text-sm ml-2">
+        Next-Generation of AI Open Source
+      </span>
+    </div>
+  );
+};
+
+export default NextGenerationViewComponent;

src/components/repository/repo.list.component.view.tsx

@@ -0,0 +1,53 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import contributors from "../../contributors.json";
+import { getGitHubUserAvatar } from "./repository.helper";
+import RepositoryListComponent from "./repository-list.component";
+
+const RepoListViewComponent = () => {
+  const [selectedUser, setSelectedUser] = useState<string>("ronisarkarexe.json");
+  const [avatarUrl, setAvatarUrl] = useState<{ name: string; url: string }[]>(
+    []
+  );
+  useEffect(() => {
+    const loadAvatars = async () => {
+      const res = await Promise.all(
+        contributors.map(async (contributor) => {
+          const avatarURL = await getGitHubUserAvatar(
+            contributor.split(".")[0]
+          );
+          return { name: contributor, url: avatarURL };
+        })
+      );
+      setAvatarUrl(res);
+    };
+    loadAvatars();
+  }, []);
+
+  return (
+    <div>
+      <div className="relative h-[70px] mb-5 overflow-visible">
+        {avatarUrl.map((user, index) => (
+          <div
+            key={index}
+            className="absolute cursor-pointer transition-all duration-300 hover:scale-110"
+            style={{ left: `${index * 26}px` }}
+            onClick={() => setSelectedUser(user.name)}
+          >
+            <Image
+              src={user.url}
+              alt={user.name}
+              width={50}
+              height={50}
+              className="rounded-full object-cover border-4 border-white shadow-sm"
+            />
+          </div>
+        ))}
+      </div>
+      <RepositoryListComponent selectedUser={selectedUser} />
+    </div>
+  );
+};
+
+export default RepoListViewComponent;