feat: add the features section

app/(root)/page.jsx

@@ -1,3 +1,4 @@
+import Features from "@/components/Features";
 import Hero from "@/components/Hero";
 
 export const metadata = {
@@ -36,6 +37,7 @@ function Home() {
   return (
     <>
       <Hero />
+      <Features />
       Some other sections, of course!
     </>
   );

components/Features.jsx

@@ -0,0 +1,30 @@
+import { features } from "@/constants";
+
+function Features() {
+  return (
+    <div className="mx-auto px-3 py-12 max-w-screen-xl">
+      <h2 className="text-center font-bold text-4xl md:text-5xl hyphens-auto">
+        Experience Effortless <span className="text-primary">Email</span>
+      </h2>
+      <p className="text-center text-xl text-muted-foreground my-5">
+        Discover a seamless and intuitive way to manage your inbox with our
+        open-source webmail application, powered by the robust MERN stack.
+      </p>
+      <div className="flex flex-col md:flex-row md:flex-wrap">
+        {features.map((feature, index) => (
+          <div className="p-4 w-full md:w-1/2 lg:w-1/4" key={index}>
+            <div className="bg-card text-card-foreground border-border border w-full h-full rounded-lg px-3 py-6 text-center">
+              <h3 className="text-2xl font-bold flex flex-col items-center mb-6">
+                {feature.icon}
+                <span className="mt-2">{feature.title}</span>
+              </h3>
+              <p>{feature.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Features;

constants/index.jsx

@@ -1,3 +1,5 @@
+import { Bird, MonitorSmartphone, Server, Sparkles } from "lucide-react";
+
 export const headerLinks = {
   nav: [
     {
@@ -21,3 +23,30 @@ export const headerLinks = {
     target: "_blank"
   }
 };
+
+export const features = [
+  {
+    icon: <Bird className="w-10 h-10 text-primary" />,
+    title: "Free as in freedom",
+    description:
+      "With MERNMail being open-source and licensed under MIT, you're protected from potential risks like backdoors often associated with proprietary software. You can also contribute to its development through the Git repository."
+  },
+  {
+    icon: <Sparkles className="w-10 h-10 text-primary" />,
+    title: "Simple and clean",
+    description:
+      "MERNMail offers an intuitive, clutter-free interface for effortless email management. Built on the MERN stack, our design ensures a seamless and responsive user experience. Focus on what matters – your emails."
+  },
+  {
+    icon: <Server className="w-10 h-10 text-primary" />,
+    title: "Self-hosted",
+    description:
+      "Take control of your emails with MERNMail's self-hosted feature. Easily host your data on your own servers. Enjoy enhanced privacy and security, with a simple setup process. Say goodbye to third-party data centers and hello to email independence."
+  },
+  {
+    icon: <MonitorSmartphone className="w-10 h-10 text-primary" />,
+    title: "Mobile-friendly",
+    description:
+      "Access your emails seamlessly on any device with MERNMail. Our responsive design ensures a smooth experience on smartphones and tablets, making it easy to read, compose, and organize emails on the go."
+  }
+];

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./constants/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}"
   ],
   safelist: ["dark"],