add new components and editor

components/kit/components/cards/InformationIconCard.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+const InformationIconCard: FC = () => {
+  return (
+    <div className="shadow-lg rounded-2xl w-64 p-4 py-6 bg-white">
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-24 h-24 bg-green-200 rounded-full relative">
+          <i className="w-8 h-8 fas fa-balance-scale-right text-green-700 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
+        </div>
+
+        <p className="text-gray-800 text-xl font-medium mb-4 mt-4">Justice</p>
+        <p className="text-gray-400 text-center text-xs px-2">
+          I therefore look forward to further developments in this area so that
+          we can ease the path in bringing these reckless individuals to
+          justice.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default InformationIconCard;

components/kit/components/confirmations/DeleteConfirmation.tsx

@@ -1,29 +1,17 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 const DeleteConfirmation: FC = () => {
-    return (
-        <div className="shadow-lg rounded-2xl p-4 bg-white w-64 m-auto">
-            <div className="w-full h-full text-center">
-                <div className="flex h-full flex-col justify-between">
-                    <i className="mt-4 fas fa-trash-alt w-12 h-12 m-auto text-indigo-500" />
-                    <p className="text-gray-800 text-xl font-bold mt-4">Remove card</p>
-                    <p className="text-gray-600 text-xs py-2 px-6">Are you sure you want to delete this card ? </p>
-                    <div className="flex items-center justify-between gap-4 mt-6">
-                        <button
-                            type="button"
-                            className="w-1/2 px-4 py-2 text-base text-sm shadow rounded-lg text-white bg-gray-300 hover:bg-gray-400 "
-                        >
-                            Cancel
-                        </button>
-                        <button
-                            type="button"
-                            className="w-1/2 px-4 py-2 text-base text-sm shadow rounded-lg text-white bg-red-500 hover:bg-red-700 "
-                        >
-                            Delete
-                        </button>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="shadow-lg rounded-2xl p-4 bg-white w-64 m-auto">
+      <div className="w-full h-full text-center">
+        <div className="flex h-full flex-col justify-between">
+          <i className="mt-4 fas fa-trash-alt w-12 h-12 m-auto text-indigo-500" />
+          <p className="text-gray-800 text-xl font-bold mt-4">Remove card</p>
+          <p className="text-gray-600 text-xs py-2 px-6">
+            Are you sure you want to delete this card ?{" "}
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 export default DeleteConfirmation;

components/kit/components/pricing/PricingCard.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+
+const PricingCard: FC = () => {
+  return (
+    <div className="shadow-lg rounded-2xl w-64 bg-white p-4">
+      <p className="text-gray-800 text-xl font-medium mb-4">Entreprise</p>
+      <p className="text-gray-900 text-3xl font-bold">
+        $199 <span className="text-gray-300 text-sm">/ month </span>
+      </p>
+      <p className="text-gray-600 text-xs mt-4">
+        For most businesses that want to optimize web queries.
+      </p>
+
+      <ul className="text-sm text-gray-600 w-full mt-6 mb-6">
+        <li className="mb-3">
+          <i className="fas fa-check-circle text-green-400 mr-4" /> All
+          illimited link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check-circle text-green-400 mr-4" /> Own
+          analitycs plateform link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check-circle text-green-400 mr-4" /> 24/24
+          support link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check-circle text-green-400 mr-4" /> Unlimited
+          user
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check-circle text-green-400 mr-4" /> Best ranking
+        </li>
+        <li className="mb-3 text-gray-200">
+          <i className="fas fa-check-circle text-gray-200 mr-4" /> Prenium svg
+        </li>
+        <li className="mb-3 text-gray-200">
+          <i className="fas fa-check-circle text-gray-200 mr-4" /> My wife
+        </li>
+      </ul>
+
+      <button
+        type="button"
+        className="w-full px-3 py-3 text-xs text-sm shadow rounded-lg text-white bg-indigo-500 hover:bg-indigo-700 "
+      >
+        Choose plan
+      </button>
+    </div>
+  );
+};
+export default PricingCard;

components/kit/components/pricing/PricingCard2.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from "react";
+
+const PricingCard2: FC = () => {
+  return (
+    <div className="shadow-lg rounded-2xl w-64 bg-indigo-500 p-4">
+      <div className="flex items-center justify-between">
+        <p className="text-white text-4xl font-medium mb-4">Pro</p>
+        <p className="text-white text-3xl font-bold flex flex-col">
+          $99
+          <span className="text-white  font-thin text-right text-sm">
+            month
+          </span>
+        </p>
+      </div>
+
+      <p className="text-white text-md mt-4">Plan include :</p>
+
+      <ul className="text-sm text-white w-full mt-6 mb-6">
+        <li className="mb-3">
+          <i className="fas fa-check mr-4" /> All illimited link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check mr-4" /> Own analitycs plateform link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check mr-4" /> 24/24 support link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-check mr-4" /> Unlimited user
+        </li>
+        <li className="mb-3 opacity-30">
+          <i className="fas fa-times mr-4" /> Best ranking
+        </li>
+        <li className="mb-3 opacity-30">
+          <i className="fas fa-times mr-4" /> Prenium svg
+        </li>
+        <li className="mb-3 opacity-30">
+          <i className="fas fa-times mr-4" />
+          My wife
+        </li>
+      </ul>
+
+      <button
+        type="button"
+        className="w-full px-3 py-3 text-xs text-sm shadow rounded-lg text-indigo-500 bg-white hover:bg-gray-100 "
+      >
+        Choose plan
+      </button>
+    </div>
+  );
+};
+export default PricingCard2;

components/kit/components/pricing/PricingCard3.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from "react";
+
+const PricingCard3: FC = () => {
+  return (
+    <div className="shadow-lg rounded-2xl w-64 bg-white p-4">
+      <p className="text-black text-3xl font-bold">Essential</p>
+      <p className="text-gray-500 text-sm mb-4">For the basics</p>
+      <p className="text-black text-3xl font-bold">$99</p>
+      <p className="text-gray-500 text-sm mb-4">Per agent per month</p>
+
+      <button
+        type="button"
+        className="w-56 m-auto px-3 py-3 text-xs text-sm shadow border border-black rounded-lg text-black bg-white hover:bg-black hover:text-white"
+      >
+        Request demo
+      </button>
+
+      <ul className="text-sm text-black w-full mt-6 mb-6">
+        <li className="mb-3">
+          <i className="fas fa-dot-circle mr-4" /> All illimited link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-dot-circle mr-4" /> Own analitycs plateform link
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-dot-circle mr-4" /> 24/24 support link
+        </li>
+      </ul>
+      <span className="w-56 block bg-gray-100 h-1 rounded-lg my-2"></span>
+      <ul className="text-sm text-black w-full mt-6 mb-6">
+        <li className="mb-3">
+          <i className="fas fa-plus text-green-500 mr-4" /> Everything off
+          <a href="#" className="text-red-500 font-semibold">
+            free plan
+          </a>
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-plus mr-4 text-green-500" /> Best ranking
+        </li>
+        <li className="mb-3">
+          <i className="fas fa-plus mr-4 text-green-500" /> Prenium svg
+        </li>
+      </ul>
+    </div>
+  );
+};
+export default PricingCard3;

components/kit/components/profile/AddProfilInfo.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+
+const AddProfilInfo: FC = () => {
+  return (
+    <div className="shadow-lg rounded-2xl w-80 p-4 bg-white">
+      <div className="flex flex-row items-start gap-4">
+        <img src="/images/person/1.jpg" className="w-28 h-28 rounded-lg" />
+
+        <div className="h-28 w-full flex flex-col justify-between">
+          <div>
+            <p className="text-gray-800 text-xl font-medium">
+              Charlie Rabiller
+            </p>
+            <p className="text-gray-400 text-xs">FullStack dev</p>
+          </div>
+
+          <div className="rounded-lg bg-blue-100 p-2 w-full">
+            <div className="flex items-center justify-between text-xs text-gray-400">
+              <p className="flex flex-col">
+                Articles
+                <span className="text-black font-bold">34</span>
+              </p>
+              <p className="flex flex-col">
+                Followers <span className="text-black font-bold">455</span>
+              </p>
+              <p className="flex flex-col">
+                Rating <span className="text-black font-bold">9.3</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-between gap-4 mt-6">
+        <button
+          type="button"
+          className="w-1/2 px-4 py-2 text-base text-sm border rounded-lg text-grey-500 bg-white hover:bg-gray-200 "
+        >
+          Chat
+        </button>
+        <button
+          type="button"
+          className="w-1/2 px-4 py-2 text-base text-sm border rounded-lg text-white bg-indigo-500 hover:bg-indigo-700 "
+        >
+          Add friend
+        </button>
+      </div>
+    </div>
+  );
+};
+export default AddProfilInfo;

components/kit/components/profile/Avatar.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props {
+  withBorder?: boolean;
+}
+const Avatar = ({ withBorder }: Props) => {
+  return (
+    <a href="#" className="relative block">
+      <img
+        alt="profil"
+        src="/images/person/1.jpg"
+        className={`rounded-full h-16 w-16 ${
+          withBorder ? " border-2 border-white" : ""
+        }`}
+      />
+      <span className="absolute w-3 border-2 left-1/2 -bottom-2 transform -translate-x-1/2 border-white h-3 bg-green-500 rounded-full"></span>
+    </a>
+  );
+};
+export default Avatar;