From 020108c2793e0ddf4a6d30a896c6d9a4345e4910 Mon Sep 17 00:00:00 2001
From: adityalaxkar123 <adityalaxkar9876@gmail.com>
Date: Sun, 6 Oct 2024 15:37:11 +0530
Subject: [PATCH] added loan section

---
 frontend/package-lock.json               |  22 +--
 frontend/src/App.js                      |   9 +-
 frontend/src/components/Loan/Loan.js     |  10 --
 frontend/src/components/Navbar/Navbar.js |   1 +
 frontend/src/pages/Home/Hom.js           |   8 +-
 frontend/src/pages/Loan/Loan.css         | 166 +++++++++++++++++++++++
 frontend/src/pages/Loan/Loan.js          | 111 +++++++++++++++
 7 files changed, 293 insertions(+), 34 deletions(-)
 delete mode 100644 frontend/src/components/Loan/Loan.js
 create mode 100644 frontend/src/pages/Loan/Loan.css
 create mode 100644 frontend/src/pages/Loan/Loan.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5e4de4e..dba2a67 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6009,6 +6009,7 @@
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
       "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "license": "MIT",
       "dependencies": {
         "immer": "^10.0.3",
         "redux": "^5.0.1",
@@ -22110,6 +22111,7 @@
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
       "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "license": "MIT",
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.3",
         "use-sync-external-store": "^1.0.0"
@@ -22165,6 +22167,7 @@
       "version": "6.26.2",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
       "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
       "dependencies": {
         "@remix-run/router": "1.19.2",
         "react-router": "6.26.2"
@@ -24227,18 +24230,6 @@
         "boolbase": "~1.0.0"
       }
     },
-    "node_modules/svgo/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/swiper": {
       "version": "11.1.14",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
@@ -24257,7 +24248,6 @@
         "node": ">= 4.7.0"
       }
     },
-
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -24863,16 +24853,10 @@
       }
     },
     "node_modules/typescript": {
-
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
-
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
-
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index fc64380..61d6843 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Routes, Route } from "react-router-dom"; // Resolved spacing issue
+import { Routes, Route } from "react-router-dom"; 
 import Navbar from "./components/Navbar/Navbar.js";
 import Hom from "./pages/Home/Hom.js";
 import Educ from "./components/Education/Educ.js";
@@ -11,7 +11,7 @@ import Login from "./components/Login/Login.js";
 import Signup from "./components/Signup/Signup.js";
 import Footer from "./components/Footer/Footer.js";
 import About from "./pages/About/About.js";
-
+import Loan from "./pages/Loan/Loan.js"; // Ensure the path is correct
 function App() {
   return (
     <>
@@ -20,14 +20,15 @@ function App() {
         <main>
           <Routes>
             <Route path="/" element={<Hom />} />
+            <Route path="/loan" element={<Loan />} /> {/* Corrected this line */}
             <Route path="/about" element={<About />} />
             <Route path="/educ" element={<Educ />} />
             <Route path="/sef" element={<Sef />} />
             <Route path="/craft" element={<Craft />} />
             <Route path="/quiz" element={<Quiz />} />
             <Route path="/act" element={<Act />} />
-            <Route path="/login" element={<Login/>}/>
-            <Route path="/Signup" element={<Signup />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<Signup />} /> {/* Use lowercase for consistency */}
           </Routes>
         </main>
         <Footer />
diff --git a/frontend/src/components/Loan/Loan.js b/frontend/src/components/Loan/Loan.js
deleted file mode 100644
index 230a2f1..0000000
--- a/frontend/src/components/Loan/Loan.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-function Loan ()  {
-  return (
-    <>
-    <h1>Loans </h1>
-    </>
-  )
-}
-export default Loan;
\ No newline at end of file
diff --git a/frontend/src/components/Navbar/Navbar.js b/frontend/src/components/Navbar/Navbar.js
index b60f9d0..64db925 100644
--- a/frontend/src/components/Navbar/Navbar.js
+++ b/frontend/src/components/Navbar/Navbar.js
@@ -24,6 +24,7 @@ function Navbar() {
         <li><a href="/">Home</a></li>
         <li><a href="/about">About Us</a></li>
         <li><a href="/contact">Contact Us</a></li>
+        <li><a href="/loan">Loan</a></li>
       </ul>
       <div className={`nav-menu ${isActive ? 'active' : ''}`}>
         <button className="close-button" onClick={closeNavbar}>
diff --git a/frontend/src/pages/Home/Hom.js b/frontend/src/pages/Home/Hom.js
index cfda047..2356bb4 100644
--- a/frontend/src/pages/Home/Hom.js
+++ b/frontend/src/pages/Home/Hom.js
@@ -97,7 +97,13 @@ arrow_upward
               <div className="card-content">
                 <img src={item.image} alt={item.title} className="card-image" />
                 <p className="card-description">{item.description}</p>
-                <button className="btn-default card-button">{item.action}</button>
+                {item.title === "Loans and Grants" && (
+                  <Link to="/Loan"><button className="btn-default card-button">{item.action}</button></Link>
+                )}
+
+                {item.title !== "Loans and Grants" && (
+                  <button className="btn-default card-button">{item.action}</button>
+                )}
               </div>
             </div>
           ))}
diff --git a/frontend/src/pages/Loan/Loan.css b/frontend/src/pages/Loan/Loan.css
new file mode 100644
index 0000000..62eb848
--- /dev/null
+++ b/frontend/src/pages/Loan/Loan.css
@@ -0,0 +1,166 @@
+/* LoanPage.css */
+
+.loan-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px; /* Reduced padding for smaller devices */
+    background-color: #f8f9fa;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.loan-title {
+    font-size: 2rem; /* Adjusted for smaller screens */
+    margin-bottom: 30px; /* Reduced space below the title */
+    color: #2B4B77;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.horizontal-cards {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px; /* Reduced space below the horizontal cards */
+    flex-wrap: wrap; /* Allow wrapping to next line if necessary */
+}
+
+.loan-section {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+    flex: 1 1 30%; /* Adjust card size and allow wrapping */
+    min-width: 260px; /* Minimum width for smaller screens */
+}
+
+.loan-section:hover {
+    transform: translateY(-5px);
+}
+
+.loan-section h2 {
+    font-size: 1.5rem; /* Adjusted for smaller screens */
+    color: #2B4B77;
+    margin-bottom: 10px;
+}
+
+.loan-section p {
+    font-size: 0.9rem; /* Adjusted for smaller screens */
+    margin-bottom: 10px;
+    line-height: 1.5; /* Better readability */
+}
+
+.loan-types-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0;
+}
+
+.loan-type {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 15px;
+    flex: 1;
+    margin: 0 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+.loan-button {
+    background-color: #2B4B77;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px; /* Adjusted for smaller screens */
+    font-size: 0.9rem; /* Adjusted for smaller screens */
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+    display: inline-block;
+    text-decoration: none;
+    margin-top: 10px;
+}
+
+.loan-button:hover {
+    background-color: #1f3d5b;
+    transform: scale(1.05);
+}
+
+.tips {
+    margin-top: 20px;
+}
+
+.loan-calculator {
+    margin-top: 40px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 25px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calculator-form {
+    display: flex;
+    flex-direction: column; /* Stack inputs vertically */
+}
+
+.calculator-form label {
+    margin-bottom: 15px;
+    font-size: 1rem;
+}
+
+.calculator-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+.calculator-result {
+    margin-top: 20px;
+    font-size: 1.5rem;
+    color: #2B4B77;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+    .loan-title {
+        font-size: 1.8rem; /* Smaller title for tablets and phones */
+    }
+
+    .horizontal-cards {
+        flex-direction: column; /* Stack cards vertically */
+    }
+
+    .loan-section {
+        flex: 1 1 100%; /* Full width on small screens */
+        margin-bottom: 20px; /* Space between stacked cards */
+    }
+
+    .loan-button {
+        padding: 10px; /* Smaller button padding */
+        font-size: 0.85rem; /* Smaller button font size */
+    }
+
+    .calculator-form input {
+        font-size: 0.9rem; /* Smaller input font size */
+    }
+}
+
+@media (max-width: 480px) {
+    .loan-title {
+        font-size: 1.6rem; /* Smaller title for phones */
+    }
+
+    .loan-section h2 {
+        font-size: 1.4rem; /* Smaller heading for cards */
+    }
+
+    .loan-section p {
+        font-size: 0.85rem; /* Smaller paragraph font size */
+    }
+
+    .calculator-result {
+        font-size: 1.2rem; /* Smaller result font size */
+    }
+}
diff --git a/frontend/src/pages/Loan/Loan.js b/frontend/src/pages/Loan/Loan.js
new file mode 100644
index 0000000..8d8cf1c
--- /dev/null
+++ b/frontend/src/pages/Loan/Loan.js
@@ -0,0 +1,111 @@
+// src/LoanPage.js
+import React, { useState } from 'react';
+import './Loan.css'; // Import your custom CSS file
+
+const Loan = () => {
+    const [loanAmount, setLoanAmount] = useState('');
+    const [interestRate, setInterestRate] = useState('');
+    const [loanTerm, setLoanTerm] = useState('');
+    const [totalPayment, setTotalPayment] = useState(null);
+
+    const calculateTotalPayment = () => {
+        const principal = parseFloat(loanAmount);
+        const calculatedInterest = (principal * (parseFloat(interestRate) / 100)) * parseFloat(loanTerm);
+        const total = principal + calculatedInterest;
+        setTotalPayment(total.toFixed(2));
+    };
+
+    return (
+        <div className="loan-container">
+            <h1 className="loan-title">Understanding Loans and Grants</h1>
+            
+            <div className="horizontal-cards">
+                <section className="loan-section">
+                    <h2>What is a Loan?</h2>
+                    <p>
+                        A loan is a sum of money that is borrowed and is expected to be paid back with interest. 
+                        Loans can be secured (backed by collateral) or unsecured (not backed by collateral).
+                    </p>
+                    <a href="https://en.wikipedia.org/wiki/Loan" target="_blank" rel="noopener noreferrer">
+                        <button className="loan-button">Learn More</button>
+                    </a>
+                </section>
+
+                <section className="loan-section">
+                    <h2>What is a Grant?</h2>
+                    <p>
+                        A grant is a financial award given by a government agency, organization, or individual for a specific purpose, 
+                        and it does not need to be paid back.
+                    </p>
+                    <a href="https://en.wikipedia.org/wiki/Grant_(law)" target='_blank' rel="noopener noreferrer">
+                        <button className="loan-button">Learn More</button>
+                    </a>
+                </section>
+
+                <section className="loan-section types-of-loans">
+                    <h2>Types of Loans</h2>
+                    <ul>
+                        <li>Personal Loans</li>
+                        <li>Student Loans</li>
+                        <li>Mortgage Loans</li>
+                        <li>Auto Loans</li>
+                    </ul>
+                    <a href="https://en.wikipedia.org/wiki/Loan#Types" target='_blank' rel="noopener noreferrer">
+                        <button className="loan-button">View Details</button>
+                    </a>
+                </section>
+            </div>
+
+            <section className="loan-section tips">
+                <h2>Tips for Applying for Loans and Grants</h2>
+                <ul>
+                    <li>Check your credit score before applying.</li>
+                    <li>Research various options to find the best terms.</li>
+                    <li>Gather necessary documentation in advance.</li>
+                    <li>Be clear about your purpose and how you plan to use the funds.</li>
+                </ul>
+            </section>
+
+            <section className="loan-calculator">
+                <h2>Loan Calculator</h2>
+                <div className="calculator-form">
+                    <label>
+                        Loan Amount:
+                        <input
+                            type="number"
+                            value={loanAmount}
+                            onChange={(e) => setLoanAmount(e.target.value)}
+                            placeholder="Enter amount"
+                        />
+                    </label>
+                    <label>
+                        Interest Rate (%):
+                        <input
+                            type="number"
+                            value={interestRate}
+                            onChange={(e) => setInterestRate(e.target.value)}
+                            placeholder="Enter rate"
+                        />
+                    </label>
+                    <label>
+                        Loan Term (years):
+                        <input
+                            type="number"
+                            value={loanTerm}
+                            onChange={(e) => setLoanTerm(e.target.value)}
+                            placeholder="Enter term"
+                        />
+                    </label>
+                    <button onClick={calculateTotalPayment} className="loan-button">Calculate</button>
+                </div>
+                {totalPayment && (
+                    <div className="calculator-result">
+                        <h3>Total Amount to be Paid: ${totalPayment}</h3>
+                    </div>
+                )}
+            </section>
+        </div>
+    );
+};
+
+export default Loan;