.

Author: zKXDEX

Diff for: components/Card.tsx

@@ -0,0 +1,17 @@
+import { IconCoffee } from '@tabler/icons-react';
+
+const Card: React.FC<{ image: string; name: string; gitUser: string }> = ({ image, name, gitUser }) => {
+  return (
+    <div className="flex w-32 flex-col items-center justify-center gap-2 mt-10 rp">
+      <div className="card--style">
+        <img className='img__bg' src="../public/static/bg.jpeg" />
+        <div className="card--style__logo">
+          <img className='card__logo' src="../public/static/icewhite.png" />
+        </div>
+        <div className="gradient"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

Diff for: components/Contributors.tsx

@@ -0,0 +1,46 @@
+import { IconCoffee } from '@tabler/icons-react';
+import React, { useEffect, useState } from "react";
+
+
+const Contributors: React.FC<{ image: string; name: string; gitUser: string }> = ({ image, name, gitUser }) => {
+    const blacklistedNames = ["DaniGP17", "zKXDEX"]
+    const [contributors, setContributors] = useState([]);
+
+    useEffect(() => {
+        fetch("https://api.github.com/repos/IceClusters/icmysql/contributors?anon=1")
+            .then((response) => response.json())
+            .then((data) => {
+                setContributors(function(){
+                    let retval = [];
+                    for(let i = 0; i < data.length; i++){
+                        if(blacklistedNames.includes(data[i].login)) continue;
+                        console.log(data[i].login)
+                        retval.push({
+                            name: data[i].login,
+                            avatar: data[i].avatar_url,
+                            commits: data[i].contributions
+                        })
+                    }
+                    return retval;
+                });
+            })
+            .catch((error) => console.log("Error: ", error));
+    }, []);
+    
+    return (
+    <div className="container__contributor">
+        {contributors.map((contributor, i) => (
+            <div className="card--c">
+                <img className='avatar' src={contributor.avatar}/>
+                <div className="space__info">
+                    <a href={`https://github.com/${contributor.name}`} className='title__c'>{contributor.name}</a>
+                    <h5 className='desc__c'>{contributor.commits} commits</h5>
+                </div>
+            </div>
+        ))}
+        
+    </div>
+  );
+};
+
+export default Contributors;

Diff for: components/Hero.tsx

@@ -0,0 +1,49 @@
+import { IconCoffee } from '@tabler/icons-react';
+
+const Profile: React.FC<{ image: string; banner: string; name: string; gitUser: string; desc: string; tags: string[] }> = ({ image, name, gitUser, desc, banner, tags }) => {
+  return (
+    
+      <div className="card__profile">
+        <div className="content">
+                <div className="banner-container">
+                    <div className="banner">
+                      <img className='banner--img' src={banner} />
+                      <div className="profile--img">
+                        <div className="img--srt">
+                          <div className="container--img">
+                            <a className='a--cont' href={`https://github.com/${gitUser}`}>
+                              <span className='BG '>
+                                <img src={image} alt={`${name}-image`} className="rounded-md bg-neutral-100 shadow-md dark:bg-neutral-900 avatar" />    
+                                
+                              </span>
+                              <div className="txt--name--content">{name}</div>
+                              
+                            </a>     
+                          </div>
+                          
+                        </div>
+                      </div>
+                    </div>
+                    
+                </div>
+                <div className="container--desc_profile">
+                    <div className="tag--cont">
+                    {tags.map((tag, index) => (
+                      <div className="tag" key={index}>
+                        {tag}
+                      </div>
+                    ))}
+                    </div>
+                    <div className="desc--content">
+                      <h2 className='desc--text'>{desc}</h2>
+                    </div>
+                </div>
+        </div>
+        
+      </div>
+     
+  
+  );
+};
+
+export default Profile;

Diff for: components/Profile.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+  children?: React.ReactNode;
+  repo: string;
+  docs?: string;
+}
+
+const Resource = ({ repo, docs }: Props) => {
+  return (
+    <div className="flex flex-wrap gap-1">
+    
+    </div>
+  );
+};
+
+export default Resource;

Diff for: components/Resource.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+
+const Search: React.FC = () => {
+    const [inputValue, setInputValue] = useState('');
+
+    return (
+        <div className="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300">
+            <input spellCheck={false}
+                onChange={e => setInputValue(e.target.value)}
+                value={inputValue} className="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" />
+                </div>
+    );
+};
+
+export default Search;