[FEATURE] Created the features section in the Website (#286)

* Initial commit: Add basic features section look

* Refactor: Small changes in feature containers and add manymore text at the end

* Refactor: Replace img tags with Image component

* Refactor: Resolve the error with escaping character

* Refactor: Change class to className attribute

* Refactor: Background change and add some next text in features

* Refactor: Add some additional styles and restricted copying from features section

* Refactor: Resolve responsive issues with features section

* Refactor: Add height-max for making the containers height based on their content

* Refactor: Replace the images with font awesome module icons

* Refactor: Implement on hover color change

* Refactor: Implement mapping through features for lesser code. Some minor changes regarding feature container design

---------

Co-authored-by: Stefan Anevski <[email protected]>

Website/app/Features.js

@@ -0,0 +1,60 @@
+import React from "react";
+function Features() {
+  const features = [
+    {
+      title: "It's Free and Open-Source",
+      description:
+        "Drifty is both free and open-source, so, you can bring new features that you wish to have 🎉",
+      icon: "fa-brands fa-osi",
+      color: "text-lime-600",
+    },
+    {
+      title: "Faster Downloading of files",
+      description:
+        "Drifty supports parallel downloading using multiple threads",
+      icon: "fa fa-download",
+      color: "text-sky-400",
+    },
+    {
+      title: "Support for downloading videos from YouTube, Instagram, etc.",
+      description:
+        "Drifty allows downloading videos from popular platforms like YouTube and Instagram with ease.",
+      icon: "fa fa-youtube-play",
+      color: "text-red-600",
+    },
+    {
+      title: "Available both in GUI and CLI mode",
+      description:
+        "Drifty has both CLI and GUI mode. So, it can be used anywhere as CLI or as GUI according to the requirements of the user.",
+      icon: "fa fa-desktop",
+      color: "text-gray-700",
+    },
+  ];
+  return (
+    <div className="py-6 px-12 background bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-sans select-none">
+      <h1 className="text-center mb-6 font-extrabold text-4xl pt-6">
+        Features
+      </h1>
+      <div className="column-1 flex flex-wrap justify-center gap-1">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className="m-2 p-4 rounded-md h-max flex flex-col justify-center shadow-lg bg-slate-100 font-bold text-black w-60 hover:-translate-y-1 hover:scale-110 duration-300"
+          >
+            <i
+              className={feature.icon + " self-center mb-5 " + feature.color}
+              aria-hidden="true"
+              style={{ fontSize: "3rem" }}
+            ></i>
+            <h3 className="text-lg mb-1">{feature.title}</h3>
+            <p className="font-normal leading-normal">{feature.description}</p>
+          </div>
+        ))}
+      </div>
+      <div className="text-2xl font-bold flex justify-center my-4">
+        ....and many more!
+      </div>
+    </div>
+  );
+}
+export default Features;

Website/app/page.js

@@ -1,27 +1,32 @@
-import Header from "./Header"
-import MainSection from "./MainSection"
+import Header from "./Header";
+import MainSection from "./MainSection";
 import Contribute from "./Contribute";
-import Demo from "./Demo"
+import Demo from "./Demo";
 import Footer from "./Footer";
+import Features from "./Features";
 
 export default async function Home() {
-    const data = await getData()
-    return (
-        <>
-            <Header props={"bg-top"}/>
-            <MainSection/>
-            <Contribute props={data}/>
-            <Demo/>
-            <Footer/>
-        </>
-    )
+  const data = await getData();
+  return (
+    <>
+      <Header props={"bg-top"} />
+      <MainSection />
+      <Contribute props={data} />
+      <Features />
+      <Demo />
+      <Footer />
+    </>
+  );
 }
 
-export async function getData(){
-    const res = await fetch('https://api.github.com/repos/SaptarshiSarkar12/Drifty/contributors?per_page=100&page=1', {method:'GET'})
-    const contrib = await res.json();
-    return {
-        contrib,
-        revalidate: 3600
-    }
-}
+export async function getData() {
+  const res = await fetch(
+    "https://api.github.com/repos/SaptarshiSarkar12/Drifty/contributors?per_page=100&page=1",
+    { method: "GET" }
+  );
+  const contrib = await res.json();
+  return {
+    contrib,
+    revalidate: 3600,
+  };
+}