feat: alliance members added (non-prod rn) (#124)

* feat: alliance members added (non-prod rn)
* feat: alliance members added
* feat: bounty complete status added & code refactored
* style: code formatted
* refactor: dependencies update
* style: news sorted desc by creation date

Closes SUP-2573
Closes SUP-2572
Closes SUP-2580

.gitignore

@@ -46,3 +46,4 @@ yarn-error.log*
 /public/images/nextImageExportOptimizer/
 /public/images/logos/nextImageExportOptimizer/
 /.env
+/public/nextImageExportOptimizer/*

package.json

@@ -54,18 +54,17 @@
     "next": "12.3.4",
     "next-gtag": "0.2.0",
     "next-image-export-optimizer": "0.17.1",
-    "next-seo": "5.15.0",
+    "next-seo": "6.0.0",
     "next-themes": "0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.8.0",
-    "react-paginate": "8.1.5",
-    "react-scroll": "1.8.9",
-    "swr": "1.3.0"
+    "react-paginate": "8.2.0",
+    "react-scroll": "1.8.9"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.5.1",
-    "@commitlint/config-conventional": "17.4.4",
+    "@commitlint/cli": "17.6.1",
+    "@commitlint/config-conventional": "17.6.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/exec": "6.0.3",
@@ -75,30 +74,30 @@
     "@types/aos": "3.0.4",
     "@types/gtag.js": "0.0.12",
     "@types/node": "18.15.11",
-    "@types/react": "18.0.34",
-    "@types/react-dom": "18.0.11",
-    "@types/react-scroll": "1.8.6",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.1",
+    "@types/react-scroll": "1.8.7",
     "autoprefixer": "10.4.14",
-    "cssnano": "5.1.15",
-    "eslint": "8.38.0",
-    "eslint-config-next": "13.3.0",
+    "cssnano": "6.0.1",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.4",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.1",
+    "lint-staged": "13.2.2",
     "postcss": "8.4.21",
     "postcss-flexbugs-fixes": "5.0.2",
-    "prettier": "2.8.7",
-    "prettier-plugin-tailwindcss": "0.2.7",
+    "prettier": "2.8.8",
+    "prettier-plugin-tailwindcss": "0.2.8",
     "react-schemaorg": "2.0.0",
-    "sass": "1.61.0",
+    "sass": "1.62.1",
     "schema-dts": "1.1.2",
     "semantic-release": "19.0.5",
-    "tailwindcss": "3.3.1",
+    "tailwindcss": "3.3.2",
     "typescript": "4.9.5"
   },
   "resolutions": {
     "lodash": "4.17.21"
   },
   "packageManager": "yarn@3.2.4"
-}
+}

src/components/Block/Alliance.tsx

@@ -1,6 +1,6 @@
 import Container from "@/components/Container";
 import AtomTitle from "@/components/Atom/Title";
-import React from "react";
+import React, { MouseEvent } from "react";
 import { IoLogoTwitter } from "react-icons/io";
 import alliance from "@json/alliance.json";
 
@@ -13,62 +13,87 @@ function QuoteIcon(props: any) {
 }
 
 export default function BlockAlliance() {
+  const useOpen = (event: MouseEvent) => {
+    const currentTarget = event.target as HTMLElement;
+    if (!currentTarget.closest("a")) {
+      window.open(currentTarget.closest("li")?.dataset.url, "_blank");
+    }
+  };
+
   return (
-    <section id="alliance" className="bg-gradient-to-r pb-1 from-pink-100 to-pink-300 dark:from-pink-600 dark:to-pink-900 py-16 mt-8 text-center">
+    <section id="alliance" className="mt-8 bg-gradient-to-r from-pink-100 to-pink-300 py-16 pb-1 text-center dark:from-pink-600 dark:to-pink-900">
       <Container>
         <div className="mx-auto max-w-5xl text-slate-700 dark:text-zinc-100 md:text-center">
           <AtomTitle alignText="center">4626 Alliance</AtomTitle>
           <p className="mu-4 text-xl leading-relaxed">
             <strong>The 4626 Alliance</strong> is a group of leading protocols and applications that share the mission of supporting the development and deployment of
-            <code className="mx-[2px]  select-none rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code> vaults.
-            <code className="mx-[2px] select-none rounded-lg bg-pink-100 dark:bg-pink-900 px-2 py-1">ERC-4626</code>
+            <code className="mx-[2px]  select-none rounded-lg bg-pink-100 px-2 py-1 dark:bg-pink-900">ERC-4626</code> vaults.
+            <code className="mx-[2px] select-none rounded-lg bg-pink-100 px-2 py-1 dark:bg-pink-900">ERC-4626</code>
             drastically simplifies the process of building cool and useful applications by decreasing the complexity of integration while improving UX and security.
           </p>
         </div>
         <ul role="list" className="mx-auto my-16 grid grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-4">
-          {alliance.map((testimonial, testimonialIndex) => (
-            <li key={testimonialIndex}>
-              <a href={testimonial.website} target="_blank" className="relative flex rounded-lg bg-white dark:bg-zinc-700 p-6 shadow-xl shadow-slate-900/10 lg:hover:bg-white/70 dark:lg:hover:bg-zinc-700/70 transition-colors delay-75 ease-linear" rel="noreferrer">
-                <figure>
-                  <QuoteIcon className="absolute top-6 left-6 fill-pink-100/40 dark:fill-pink-50/5 group-hover:fill-white/70" />
-                  <blockquote className="relative">
-                    <p className="text-right text-lg text-slate-700 dark:text-zinc-100">{testimonial.content}</p>
+          {alliance
+            .sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
+            .map((singleAllie, singleAllieIndex) => (
+              <li
+                data-url={singleAllie.website}
+                key={singleAllieIndex}
+                className="relative flex select-none rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10 dark:bg-zinc-700  transition-colors delay-75 ease-linear md:hover:bg-white/60 dark:md:hover:bg-zinc-700/50 cursor-pointer"
+                onClick={useOpen}
+              >
+                <figure className="flex flex-col items-stretch">
+                  <QuoteIcon className="absolute left-6 top-6 fill-pink-100/40 group-hover:fill-white/70 dark:fill-pink-50/5" />
+                  <blockquote className="relative mb-6">
+                    <p className="text-right text-lg text-slate-700 dark:text-zinc-100">{singleAllie.content}</p>
                   </blockquote>
-                  <figcaption className="relative mt-6 flex items-center justify-between border-t-[0.5px] border-pink-200 pt-6 text-left">
+                  <figcaption className="relative mt-auto flex items-center justify-between border-t-[0.5px] border-pink-200 pt-6 text-left">
                     <div>
-                      <div className="mt-3 flex items-center whitespace-nowrap bg-gradient-to-r from-pink-500 to-pink-900 dark:from-pink-50 dark:to-pink-300 bg-clip-text text-2xl font-extrabold uppercase tracking-tight text-transparent">
-                        {testimonial.name}
-                        <a
-                          href={`https://twitter.com/${testimonial.twitter}`}
-                          target="_blank"
-                          className="group ml-4 inline-flex items-center space-x-1.5 font-semibold text-pink-700 dark:text-pink-100 underline decoration-from-font underline-offset-4 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
-                          rel="noreferrer"
-                        >
-                          <IoLogoTwitter className="h-[20px] w-auto md:opacity-25 md:group-hover:opacity-100" />
-                        </a>
-                      </div>
-                    </div>
-                    <div className="overflow-hidden rounded-full bg-slate-50">
-                      <img className="h-14 w-14 object-cover" src={`/images/logos/${testimonial.logo}`} alt={testimonial.name} width={70} height={70} />
+                      <a
+                        rel="noreferrer"
+                        href={singleAllie.website}
+                        target="_blank"
+                        className="mt-3 flex items-center whitespace-nowrap bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text text-xl font-extrabold uppercase tracking-tight text-transparent transition-all delay-75 ease-linear dark:from-pink-50 dark:to-pink-300 lg:hover:from-pink-700 lg:hover:to-pink-900 lg:hover:dark:from-pink-400 lg:hover:dark:to-pink-600"
+                      >
+                        {singleAllie.name}
+                      </a>
+                      <a
+                        href={`https://twitter.com/${singleAllie.twitter}`}
+                        target="_blank"
+                        className="group inline-flex items-center space-x-1.5 font-semibold text-pink-700 underline decoration-from-font underline-offset-4 dark:text-pink-100 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
+                        rel="noreferrer"
+                      >
+                        <small className="font-mono lowercase tracking-tight">follow on</small>{" "}
+                        <IoLogoTwitter className="h-[20px] w-auto md:opacity-25 md:group-hover:opacity-100" />
+                      </a>
                     </div>
+                    <a
+                      rel="noreferrer"
+                      href={singleAllie.website}
+                      target="_blank"
+                      className="inline-flex overflow-hidden rounded-full bg-slate-50/40 p-[5px] shadow-md shadow-slate-900/20 dark:bg-slate-100"
+                    >
+                      <img className="h-14 w-14 rounded-full object-contain" src={`/content/images/alliance/${singleAllie.logo}`} alt={singleAllie.name} width={70} height={70} />
+                    </a>
                   </figcaption>
                 </figure>
-              </a>
-            </li>
-          ))}
+              </li>
+            ))}
         </ul>
-        <div className="pb-8 flex flex-col items-center md:mt-8">
+        <div className="flex flex-col items-center pb-8 md:mt-8">
           <div className="py-16">
             <AtomTitle alignText="center">Funds Raised</AtomTitle>
             <div className="text-xl leading-relaxed text-slate-700 dark:text-zinc-100">The alliance contributes capital to advance the development of the ERC-4626 ecosystem</div>
-            <div className="text-4xl font-black mt-8 flex items-center justify-center whitespace-nowrap bg-gradient-to-bl from-pink-500 to-pink-900 dark:from-pink-100 dark:to-pink-300 bg-clip-text text-transparent">$15,000</div>
+            <div className="mt-8 flex items-center justify-center whitespace-nowrap bg-gradient-to-bl from-pink-500 to-pink-900 bg-clip-text text-4xl font-black text-transparent dark:from-pink-100 dark:to-pink-300">
+              $30,000
+            </div>
           </div>
 
           <a
             target="_blank"
             href="https://forms.gle/DsCsttsxBUYQTB9r6"
             rel="nofollow noreferrer"
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-pink-700 dark:border-pink-300 px-8 py-5 text-xl font-medium text-pink-700 dark:text-pink-300 shadow-sm transition-all md:hover:bg-pink-700 dark:md:hover:bg-pink-600 md:hover:text-white md:hover:shadow-md"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-pink-700 px-8 py-5 text-xl font-medium text-pink-700 shadow-sm transition-all dark:border-pink-300 dark:text-pink-300 md:hover:bg-pink-700 md:hover:text-white md:hover:shadow-md dark:md:hover:bg-pink-600"
           >
             Join the Alliance
           </a>