pr-add-prince7703-131

package.json

@@ -17,7 +17,8 @@
     "react-router-dom": "^6.22.1",
     "react-scroll": "^1.9.0",
     "react-use-gesture": "^9.1.3",
-    "scroll-lock": "^2.1.5"
+    "scroll-lock": "^2.1.5",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

src/components/Benefits.jsx

@@ -5,7 +5,7 @@ import Arrow from "../assets/svg/Arrow";
 import { GradientLight } from "./design/Benefits";
 import ClipPath from "../assets/svg/ClipPath";
 import { Link } from "react-router-dom";
-
+import Button from "./design/Button";
 // Function to generate a unique gradient for each item
 const generateGradient = (index) => {
   const gradients = [
@@ -35,7 +35,6 @@ const Benefits = () => {
                 background: generateGradient(index),
                 borderImageSlice: 1,
                 borderRadius: "80px",
-
               }}
               key={item.id}
             >
@@ -51,17 +50,15 @@ const Benefits = () => {
                   />
 
                   <Link to={item.url} className="flex items-center ml-auto">
-                    <p className="ml-auto font-code text-xs font-bold text-n-1 uppercase tracking-wider transition-transform duration-300 hover:scale-110">
-                      Learn more
-                    </p>
-                    <Arrow />
+                    <Button />
                   </Link>
                 </div>
               </div>
 
               {item.light && <GradientLight />}
 
-              <div className="absolute inset-0.5 bg-n-8 transition-opacity duration-300 ease-in-out hover:bg-opacity-80"
+              <div
+                className="absolute inset-0.5 bg-n-8 transition-opacity duration-300 ease-in-out hover:bg-opacity-80"
                 style={{ clipPath: "url(#benefits)", borderRadius: "22%" }} // Add borderRadius here as well
               ></div>
 
@@ -74,4 +71,4 @@ const Benefits = () => {
   );
 };
 
-export default Benefits;
+export default Benefits;

src/components/design/Button.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import styled from "styled-components";
+
+const Button = () => {
+  return (
+    <StyledWrapper>
+      <button className="cssbuttons-io-button">
+        Learn more
+        <div className="icon">
+          <svg
+            height="24"
+            width="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </button>
+    </StyledWrapper>
+  );
+};
+
+const StyledWrapper = styled.div`
+  .cssbuttons-io-button {
+    background: linear-gradient(to right, #4b0082, #1d3557, #0d9488);
+
+    color: #f0f0f0;
+    font-family: inherit;
+    padding: 0.35em;
+    padding-left: 1.2em;
+    font-size: 17px;
+    font-weight: 500;
+    border-radius: 0.9em;
+    border: none;
+    letter-spacing: 0.05em;
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0 0 1.6em -0.6em #1e293b;
+    overflow: hidden;
+    position: relative;
+    height: 2.8em;
+    padding-right: 3.3em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .cssbuttons-io-button .icon {
+    background: #111827;
+    margin-left: 1em;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.2em;
+    width: 2.2em;
+    border-radius: 0.7em;
+    box-shadow: 0.1em 0.1em 0.6em 0.2em #000000;
+    right: 0.3em;
+    transition: all 0.3s;
+  }
+
+  .cssbuttons-io-button:hover .icon {
+    width: calc(100% - 0.6em);
+  }
+
+  .cssbuttons-io-button .icon svg {
+    width: 1.1em;
+    transition: transform 0.3s;
+    color: #e5e7eb;
+  }
+
+  .cssbuttons-io-button:hover .icon svg {
+    transform: translateX(0.1em);
+  }
+
+  .cssbuttons-io-button:active .icon {
+    transform: scale(0.95);
+  }
+
+  .cssbuttons-io-button:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+  }
+`;
+
+export default Button;

src/participants/prince.js

@@ -0,0 +1,12 @@
+import princeImg from "./avatars/img/prince.jpg";
+
+const prince = {
+  id: "30",
+  name: "Prince Koshti",
+  university: "NIT Silchar Assam",
+  img: princeImg,
+  pr: [131],
+  prLink: ["https://github.com/iamAyushChamoli/hacktoberfest-24/pull/131"],
+};
+
+export default prince;