Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #80 from adityalaxkar123/main
added loan section
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 */ | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
The re-import of
RoutesandRouteis breaking application throwing an error. Please remove the redeclaration.