Created the Features page

src/pages/Features/Features.jsx

@@ -1,5 +1,43 @@
-const Features = () => {
+import Feature from "@/pages/Features/components/Feature/index.js";
-    return (<h2>Features</h2>)
+
-}
+import SheepstarGlobal from "@/assets/services/Global.png";
+import GlobalImage from "@/assets/features/Global.png";
+
+import Kratos from "@/assets/services/Kratos.png";
+import KratosImage from "@/assets/features/Moderation.png";
+
+import Garry from "@/assets/services/Garry.png";
+import GarryImage from "@/assets/features/Giveaway.png";
+
+import Polly from "@/assets/services/Polly.png";
+import PollyImage from "@/assets/features/Poll.png";
+
+const Features = () => (
+    <div className="main-wrapper">
+        <Feature title="Your server is inactive?"
+                 description="We got you covered. With Sheepstar Global you can connect your server with other servers from around the world!"
+                 name="Sheepstar Global"
+                 icon={SheepstarGlobal}
+                 image={GlobalImage}/>
+
+        <Feature title="Need some help?"
+                 description="Kratos offers many helpful commands to help you moderate your server and keeping it clean."
+                 name="Kratos"
+                 icon={Kratos}
+                 image={KratosImage} reverse/>
+
+        <Feature title="You like Giveaways?"
+                 description="Have you ever wanted to give something back to your community? Now you can. Garry offers you the simplest way to create a Giveaway."
+                 name="Garry Giveaway"
+                 icon={Garry}
+                 image={GarryImage}/>
+
+        <Feature title="What do they think?"
+                 description="Polly helps you understand what your  community really wants. Just make a poll. Yep, its that simple."
+                 name="Polly"
+                 icon={Polly}
+                 image={PollyImage} reverse/>
+    </div>
+)
 
 export default Features;