Repository: PiggyStark/Piggystark-Frontend
Pull request #14: Implements the `One Convenient Interface tailoured for you` section
Author: login: chiscookeke11
Created: 2025-03-26T18:33:04Z | Merged: 2025-03-27T20:04:25Z

---
#### **Description**  
This PR adds the "One Convenient Interface Tailored for You" section to the application. The section includes:  
- A heading and three feature cards explaining the benefits.  
- A visually appealing layout with responsive styles.  
- Decorative background images to enhance the design.  

#### **Implementation Details**  
- Used a `convenientCards` array to dynamically generate the feature cards.  
- Styled using Tailwind CSS for responsiveness and consistency.  
- Applied conditional styling to align certain cards (`ml-auto` for the second card).  
- Integrated `next/image` for optimized asset loading.  

#### **Screenshots (if applicable)**  
https://www.loom.com/share/2f8418f5ed3640e4bd54a27e3d064015?sid=b8a80530-a758-4a31-a784-a956a3f53dff

#### **Testing Instructions**  
1. Pull the branch and start the development server: 

2. Verify that the section renders correctly across different screen sizes.  
3. Check that the layout and styles match the design requirements.  

#### **Checklist**  
- [x] Implemented the section with dynamic content.  
- [x] Ensured responsiveness and correct styling.  
- [x] Verified accessibility and performance.  

#### **Additional Notes**  
Let me know if any modifications are needed! 

---

please review @GideonBature 



Diff:
diff --git a/app/components/convenient.tsx b/app/components/convenient.tsx
new file mode 100644
index 0000000..d80b8bd
--- /dev/null
+++ b/app/components/convenient.tsx
@@ -0,0 +1,89 @@
+import Image from "next/image"
+
+
+
+
+
+export default function Convenient() {
+
+
+
+
+    const convenientCards = [
+        {
+            heading: "Earn competitive yield on crypto",
+            content: "Put your savings to work by earning passive income through staking and lending, maximizing your returns over time."
+        },
+
+        {
+            heading: "Secure & Decentralized",
+            content: "Your funds remain in non-custodial smart contracts, ensuring full transparency, security, and control over your savings."
+        }
+        ,
+
+        {
+            heading: "Get Rewarded for Saving & Referring Friends",
+            content: "Earn bonuses, referral incentives, and unlock higher savings rewards the longer you stay committed."
+        }
+    ]
+
+
+
+
+
+    return (
+
+
+        <section className=" w-full bg-[#1C1A1E] px-5 md:px-10 py-16 flex flex-col items-center justify-center gap-14 md:gap-30 relative overflow-hidden " >
+            <div className="max-w-screen-2xl w-full" >
+
+
+                <h1 className="text-[#FBF8FF] font-medium md:text-[32px] text-center max-w-[550px] text-[25px] z-10 font-display " >One convenient interface tailored
+                    For you</h1>
+
+
+
+
+                <div className=" w-full flex flex-col items-start justify-evenly gap-16 z-10     "  >
+
+
+                    {
+                        convenientCards.map((convenientCard, index) => (
+                            <div key={index} className={`flex items-center justify-center gap-5  md:gap-[42px] max-w-[825.91px] py-2 px-5   ${index + 1 === 2 ? "ml-auto" : "null"} `}   >
+
+                                <span className=" font-display flex items-center justify-center bg-[#6D72C3] min-w-[70px] min-h-[70px] lg:min-w-[150px] lg:min-h-[150px] rounded-full text-[#F6F7FF] font-medium text-4xl lg:text-[52px] shadow-[inset_17px_17px_25.8px_0px_#33344340,inset_0px_4px_4px_0px_#00000040] " >
+                                    {index + 1}
+                                </span>
+
+                                <div className=" flex flex-col items-start justify-between gap-6 " >
+                                    <h2 className="text-[#FFFFFFCC] font-medium text-xl md:text-2xl font-display "  > {convenientCard.heading} </h2>
+                                    <p className=" text-[#FFFFFFB2] font-medium text-lg md:text-2xl max-w-[599px] font-heading "  > {convenientCard.content} </p>
+                                </div>
+                            </div>
+                        ))
+                    }
+
+                </div>
+
+
+
+                <div className=" w-full max-w-[683.27px] h-full flex items-center justify-center absolute bottom-[-30px] right-0 z-0  " >
+
+
+                    <Image src={"/abstract-right.svg"} height={100} width={100} alt="abstract" className=" w-full h-full " />
+
+                </div>
+
+
+                <div className=" w-full max-w-[683.27px] h-full flex items-center justify-center  absolute bottom-[-100px] left-0 z-0  " >
+
+
+                    <Image src={"/abstract-left.svg"} height={100} width={100} alt="abstract" className=" w-full h-full " />
+
+                </div>
+
+            </div>
+        </section>
+
+    )
+}
diff --git a/app/page.tsx b/app/page.tsx
index e592779..b914783 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import Convenient from "@components/convenient";
 import Footer from "./components/Footer";
 import Navbar from "./components/navbar";
 import Offer from "@components/offer";
@@ -9,6 +10,7 @@ export default function Home() {
         <Navbar />
       </div>
       <Offer />
+      <Convenient/>
       <Footer />
     </>
   );
diff --git a/public/abstract-left.svg b/public/abstract-left.svg
new file mode 100644
index 0000000..f5ae9b2
--- /dev/null
+++ b/public/abstract-left.svg
@@ -0,0 +1,3 @@
+<svg width="715" height="664" viewBox="0 0 715 664" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-625.455 508.628C-625.455 508.628 253.824 -352.066 37.0755 303.533C-179.673 959.131 657.72 790.358 657.72 790.358" stroke="#302E2E" stroke-opacity="0.2" stroke-width="113" stroke-linecap="round"/>
+</svg>
diff --git a/public/abstract-right.svg b/public/abstract-right.svg
new file mode 100644
index 0000000..a5d764d
--- /dev/null
+++ b/public/abstract-right.svg
@@ -0,0 +1,3 @@
+<svg width="797" height="1238" viewBox="0 0 797 1238" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.7283 57.5C56.7283 57.5 1207.79 492.214 521.907 571.911C-163.977 651.607 341.948 1339.9 341.948 1339.9" stroke="#302E2E" stroke-opacity="0.2" stroke-width="113" stroke-linecap="round"/>
+</svg>


Reviews:
user: login: wheval
body: Great job!!, please fix the changes
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T13:41:43Z

Review comments:
diff_hunk: @@ -0,0 +1,84 @@
+import Image from "next/image"
+
+
+
+
+
+export default function Convenient() {
+
+
+
+
+    const convenientCards = [
+        {
+            heading: "Earn competitive yield on crypto",
+            content: "Put your savings to work by earning passive income through staking and lending, maximizing your returns over time."
+        },
+
+        {
+            heading: "Secure & Decentralized",
+            content: "Your funds remain in non-custodial smart contracts, ensuring full transparency, security, and control over your savings."
+        }
+        ,
+
+        {
+            heading: "Get Rewarded for Saving & Referring Friends",
+            content: "Earn bonuses, referral incentives, and unlock higher savings rewards the longer you stay committed."
+        }
+    ]
+
+
+
+
+
+    return (
+        <section className=" w-full bg-[#1C1A1E] px-5 md:px-10 py-16 flex flex-col items-center justify-center gap-14 md:gap-30 relative overflow-hidden " >
+
+
+            <h1 className="text-[#FBF8FF] font-medium md:text-[32px] text-center max-w-[550px] text-[25px] z-10  " >One convenient interface tailored
path: app/components/convenient.tsx
user: login: wheval
body: use the font class `font-display` and correct font-weight
created_at: 2025-03-27T13:38:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,84 @@
+import Image from "next/image"
+
+
+
+
+
+export default function Convenient() {
+
+
+
+
+    const convenientCards = [
+        {
+            heading: "Earn competitive yield on crypto",
+            content: "Put your savings to work by earning passive income through staking and lending, maximizing your returns over time."
+        },
+
+        {
+            heading: "Secure & Decentralized",
+            content: "Your funds remain in non-custodial smart contracts, ensuring full transparency, security, and control over your savings."
+        }
+        ,
+
+        {
+            heading: "Get Rewarded for Saving & Referring Friends",
+            content: "Earn bonuses, referral incentives, and unlock higher savings rewards the longer you stay committed."
+        }
+    ]
+
+
+
+
+
+    return (
+        <section className=" w-full bg-[#1C1A1E] px-5 md:px-10 py-16 flex flex-col items-center justify-center gap-14 md:gap-30 relative overflow-hidden " >
+
+
+            <h1 className="text-[#FBF8FF] font-medium md:text-[32px] text-center max-w-[550px] text-[25px] z-10  " >One convenient interface tailored
+                For you</h1>
+
+
+
+
+            <div className=" w-full flex flex-col items-start justify-evenly gap-16 z-10     "  >
+
+
+                {
+                    convenientCards.map((convenientCard, index) => (
+                        <div key={index} className={`flex items-center justify-center gap-5  md:gap-[42px] max-w-[825.91px] py-2 px-5   ${index + 1 === 2 ? "ml-auto" : "null"} `}   >
+
+                            <span className=" flex items-center justify-center bg-[#6D72C3] min-w-[70px] min-h-[70px] lg:w-[150px] lg:h-[150px] rounded-full text-[#F6F7FF] font-medium text-4xl lg:text-[52px] shadow-[inset_17px_17px_25.8px_0px_#33344340,inset_0px_4px_4px_0px_#00000040] " >
+                                {index + 1}
+                            </span>
+
+                            <div className=" flex flex-col items-start justify-between gap-6 " >
+                                <h2 className="text-[#FFFFFFCC] font-medium text-xl md:text-2xl "  > {convenientCard.heading} </h2>
path: app/components/convenient.tsx
user: login: wheval
body: use the correct class `font-display` 
created_at: 2025-03-27T13:38:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,84 @@
+import Image from "next/image"
+
+
+
+
+
+export default function Convenient() {
+
+
+
+
+    const convenientCards = [
+        {
+            heading: "Earn competitive yield on crypto",
+            content: "Put your savings to work by earning passive income through staking and lending, maximizing your returns over time."
+        },
+
+        {
+            heading: "Secure & Decentralized",
+            content: "Your funds remain in non-custodial smart contracts, ensuring full transparency, security, and control over your savings."
+        }
+        ,
+
+        {
+            heading: "Get Rewarded for Saving & Referring Friends",
+            content: "Earn bonuses, referral incentives, and unlock higher savings rewards the longer you stay committed."
+        }
+    ]
+
+
+
+
+
+    return (
+        <section className=" w-full bg-[#1C1A1E] px-5 md:px-10 py-16 flex flex-col items-center justify-center gap-14 md:gap-30 relative overflow-hidden " >
+
+
+            <h1 className="text-[#FBF8FF] font-medium md:text-[32px] text-center max-w-[550px] text-[25px] z-10  " >One convenient interface tailored
+                For you</h1>
+
+
+
+
+            <div className=" w-full flex flex-col items-start justify-evenly gap-16 z-10     "  >
+
+
+                {
+                    convenientCards.map((convenientCard, index) => (
+                        <div key={index} className={`flex items-center justify-center gap-5  md:gap-[42px] max-w-[825.91px] py-2 px-5   ${index + 1 === 2 ? "ml-auto" : "null"} `}   >
+
+                            <span className=" flex items-center justify-center bg-[#6D72C3] min-w-[70px] min-h-[70px] lg:w-[150px] lg:h-[150px] rounded-full text-[#F6F7FF] font-medium text-4xl lg:text-[52px] shadow-[inset_17px_17px_25.8px_0px_#33344340,inset_0px_4px_4px_0px_#00000040] " >
+                                {index + 1}
+                            </span>
+
+                            <div className=" flex flex-col items-start justify-between gap-6 " >
+                                <h2 className="text-[#FFFFFFCC] font-medium text-xl md:text-2xl "  > {convenientCard.heading} </h2>
+                                <p className=" text-[#FFFFFFB2] font-medium text-lg md:text-2xl max-w-[599px] "  > {convenientCard.content} </p>
path: app/components/convenient.tsx
user: login: wheval
body: use the class `font-heading` for syne.
while `font-display` is for Unbounded
created_at: 2025-03-27T13:39:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,84 @@
+import Image from "next/image"
+
+
+
+
+
+export default function Convenient() {
+
+
+
+
+    const convenientCards = [
+        {
+            heading: "Earn competitive yield on crypto",
+            content: "Put your savings to work by earning passive income through staking and lending, maximizing your returns over time."
+        },
+
+        {
+            heading: "Secure & Decentralized",
+            content: "Your funds remain in non-custodial smart contracts, ensuring full transparency, security, and control over your savings."
+        }
+        ,
+
+        {
+            heading: "Get Rewarded for Saving & Referring Friends",
+            content: "Earn bonuses, referral incentives, and unlock higher savings rewards the longer you stay committed."
+        }
+    ]
+
+
+
+
+
+    return (
+        <section className=" w-full bg-[#1C1A1E] px-5 md:px-10 py-16 flex flex-col items-center justify-center gap-14 md:gap-30 relative overflow-hidden " >
+
path: app/components/convenient.tsx
user: login: wheval
body: add a div that wraps all the children. the div should have the `max-w-screen-2xl` class.

`section>div`
created_at: 2025-03-27T13:41:11Z
author_association: CONTRIBUTOR

PR comments:
user: login: chiscookeke11
created_at: 2025-03-27T14:09:53Z
body: Changes implemented @wheval 
please review 

author_association: CONTRIBUTOR
user: login: wheval
created_at: 2025-03-27T20:04:29Z
body: LGTM⚡
author_association: CONTRIBUTOR