From acf8572fc5a86dcd090107c864515ebc3a4ab47a Mon Sep 17 00:00:00 2001 From: Bhumika Date: Sat, 26 Oct 2024 13:34:13 +0530 Subject: [PATCH] Changes saved and no conflicts --- frontend/public/images/calc.jpg | 3 + frontend/src/pages/Loan/Loan.css | 148 +++++++++++++++++++++++++------ frontend/src/pages/Loan/Loan.js | 46 +++++++--- 3 files changed, 159 insertions(+), 38 deletions(-) create mode 100644 frontend/public/images/calc.jpg diff --git a/frontend/public/images/calc.jpg b/frontend/public/images/calc.jpg new file mode 100644 index 0000000..f484f66 --- /dev/null +++ b/frontend/public/images/calc.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c2bc6ad3866c21701961ef81ccf98293c75101a57708d91fea004b53ea1682f7 +size 27173 diff --git a/frontend/src/pages/Loan/Loan.css b/frontend/src/pages/Loan/Loan.css index fbff91b..262c1bd 100644 --- a/frontend/src/pages/Loan/Loan.css +++ b/frontend/src/pages/Loan/Loan.css @@ -1,7 +1,7 @@ :root { - --primary-color: #2b4b77; + --primary-color: #0D92F4; --secondary-color: #4a90e2; - --tertiary-color: #86c5da; + --tertiary-color: #D2E0FB; --background-color: #f8f9fa; --text-color: #333; --card-background: #ffffff; @@ -41,12 +41,11 @@ body { .loan-title { font-size: 2.8rem; - background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); - -webkit-background-clip: text; - color: transparent; + color:#091057; margin-bottom: 1.5rem; text-align: center; - text-transform: uppercase; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: bold; animation: slideIn var(--transition-speed) ease-in-out; } @@ -90,20 +89,22 @@ body { } .loan-section h2 { - font-size: 1.8rem; - color: var(--primary-color); - margin-bottom: 10px; + font-size: 1.5rem; + color: #024CAA; + margin-bottom: 12px; position: relative; + font-weight: 600; + } .loan-section h2::after { content: ''; display: block; width: 60px; - height: 4px; + height: 3px; background: var(--secondary-color); position: absolute; - bottom: -10px; + bottom: -7px; left: 0; transition: width var(--transition-speed); } @@ -298,11 +299,14 @@ body { transition: .2s linear; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); display: flex; - flex-direction: column; - align-items: left; + align-items: center; + justify-content: center; + + } + .loan-calculator:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); @@ -310,19 +314,24 @@ body { .loan-calculator h2 { font-size: 2rem; - color: var(--primary-color); + color: #091057; margin-bottom: 2rem; text-align: center; + font-weight: 600; } .calculator-form { display: flex; flex-direction: column; gap: 1.5rem; + + } .calculator-form label { font-weight: bold; + display: flex; + flex-direction: column; } .calculator-form input, @@ -333,8 +342,13 @@ body { transition: border-color 0.3s; margin-left: 20px; box-shadow: none; + width:40vw; +} +.btn-container{ + display: flex; + justify-content:start; + width:50vw; } - .calculator-form input:focus, .calculator-form select:focus { border-color: var(--accent-color); @@ -344,39 +358,54 @@ body { background: var(--primary-color); color: #fff; font-size: 1rem; - width: 50%; cursor: pointer; - padding: 0.75rem 1.5rem; + padding: 0.75rem 1.2rem; transition: background-color 0.3s; transition: .2s linear; } -.loan-button:hover { - width: 50%; +.btn-container button{ + width:42vw; +} +.btn-container:hover{ + padding-left:10px; +} + +.loan-button:hover { background-color: var(--secondary-color); + } .calculator-result { + display: flex; + flex-direction: column; margin-top: 1rem; - background: var(--card-background); padding: 1rem; - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); + } .calculator-result h3 { - font-size: 1.8rem; - color: var(--primary-color); + font-size: 1.3rem; + color: #091057; text-align: center; margin-bottom: 10px; + font-weight: bold; + +} +.summary{ + display: flex; + justify-content: space-evenly; } - .calculator-result p { font-size: 1.2rem; text-align: center; color: #555; } +.calculator-result span{ + font-weight: bold; + font-size: small; +} @media (max-width: 768px) { .horizontal-cards { @@ -394,3 +423,72 @@ body { } } +.types-of-loans ul{ + display: flex; + gap: 10px; + flex-wrap: wrap; + +} + +.types-of-loans li{ + border:2px solid #024CAA; + padding-inline:20px; + padding-block:10px; + border-radius: 10px; + width:max-content; + color:rgb(2, 2, 79); + display:inline-flex; + align-items: center; + gap:10px; + + +} + +.types-of-loans{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap:5px; +} + +.loan-section h2{ + margin-bottom: 1.5rem; +} +.tips .h2{ + display:flex; + align-items: center; + justify-content: center; + gap:10px; + font-size: 1.5rem; + color: #024CAA; + margin-bottom: 12px; + position: relative; + font-weight: 600; +} +.tips li{ + border:2px solid #024CAA; + padding-inline:20px; + padding-block:10px; + border-radius: 30px; + display:inline-flex; + align-items: center; + gap:10px; + color:#091057; +} + +.tips ul{ + display: flex; + flex-direction: column; + gap:4px; + +} + +.img-container{ + border:2px solid blue; + width:40vw; +} + +.div-form{ + width:45vw; +} \ No newline at end of file diff --git a/frontend/src/pages/Loan/Loan.js b/frontend/src/pages/Loan/Loan.js index 72caffe..78b767b 100644 --- a/frontend/src/pages/Loan/Loan.js +++ b/frontend/src/pages/Loan/Loan.js @@ -1,5 +1,10 @@ import React, { useState } from 'react'; import './Loan.css'; // Import your custom CSS file +import { FaHandPointRight, FaCaravan } from "react-icons/fa"; +import { MdTipsAndUpdates } from "react-icons/md"; +import { AiFillCreditCard } from "react-icons/ai"; +import { FaHouse } from "react-icons/fa6"; +import { PiStudentFill } from "react-icons/pi"; const Loan = () => { const [loanAmount, setLoanAmount] = useState(''); @@ -76,10 +81,10 @@ const Loan = () => {

Types of Loans

@@ -88,17 +93,23 @@ const Loan = () => {
+
+

Tips for Applying for Loans and Grants

+ +
+
    -
  • Check your credit score before applying.
    • -
  • Research various options to find the best terms.
    • -
  • Gather necessary documentation in advance.
    • -
  • Be clear about your purpose and how you plan to use the funds.
    • +
  • Check your credit score before applying.
    • +
  • Research various options to find the best terms.
    • +
  • Gather necessary documentation in advance.
    • +
  • Be clear about your purpose and how you plan to use the funds.
-

Loan Calculator

+
+

Loan Calculator

e.preventDefault()}> +
+ +
{calculationResult && (

Loan Summary:

-

{calculationResult.frequency} Payment: ${calculationResult.paymentPerPeriod}

-

Total Payment: ${calculationResult.totalPayment}

-

Total Interest: ${calculationResult.totalInterest}

+
+

{calculationResult.frequency} Payment: ${calculationResult.paymentPerPeriod}

+

Total Payment: ${calculationResult.totalPayment}

+

Total Interest: ${calculationResult.totalInterest}

+
)} +
+
+ +
); }; -export default Loan; +export default Loan; \ No newline at end of file