Skip to content

Commit

Permalink
klmp
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent 9a5c25d commit 29af2c1
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 86 deletions.
78 changes: 38 additions & 40 deletions components/firstpage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import logo from "@/app/hero/logo.png";
import React from "react";
import photo from "@/app/hero/card.png";


export default function FirstPage() {
return (
<div>
Expand Down Expand Up @@ -34,50 +33,49 @@ export default function FirstPage() {
</a>
</li>
</ul>
<div className="text-white text-xl font-bold">User</div>
<div className="text-white text-2xl ">Login</div>
</nav>

<div className="flex flex-col text-center justify-between items-center min-h-screen bg-gradient-to-r from-[#383838] to-[#9E9E9E]">
<div className="flex justify-between p-10">
<div>
<Image src={photo} width={500} height={500} alt="Credit Card" />
</div>
<div className="flex flex-col text-center justify-center items-center mx-auto">
<div className="ml-8 text-start text-white text-[32px]">
การใช้บัตรเครดิตอย่างมีกลยุทธ์ คือ <br></br>การยกระดับคุณภาพชีวิต <br></br>และเป็นกุญแจสู่การเงินที่มั่นคง
</div>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-4 px-8 mt-8 before:rounded hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105 rounded-xl">
คำนวณกัน!
<div className="flex flex-col text-center justify-between items-center min-h-screen bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900">
<div className="flex justify-between p-10">
<div>
<Image src={photo} width={500} height={500} alt="Credit Card" />
</div>
<div className="flex flex-col text-center justify-center items-center mx-auto">
<div className="ml-8 text-start text-white text-[42px]">
การใช้บัตรเครดิตอย่างมีกลยุทธ์ คือ <br></br>การยกระดับคุณภาพชีวิต <br></br>และเป็นกุญแจสู่การเงินที่มั่นคง
</div>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-4 px-8 mt-8 rounded hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105 rounded-xl">
คำนวณกัน!
</div>
</Link>
</div>
</Link>
</div>

</div>

<div className="grid grid-cols-3 gap-[32px] p-8 z-10">
<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 p-[50px] h-[275px] w-[406px] text-center text-white rounded-xl">
<h2 className="text-2xl font-bold mb-4">จำนวนบัตรทั้งสิ้น</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">26,332,679</p>
<h2 className="text-2xl font-bold mb-4">ล้านใบ</h2>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white">
<h2 className="text-2xl font-bold mb-4">ยอดสินเชื่อค้างชำระ</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">467,124,720</p>
<h2 className="text-2xl font-bold mb-4">ล้านบาท</h2>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white">
<h2 className="text-2xl font-bold mb-4">การเบิกเงินสดล่วงหน้า</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">16,876.01</p>
<h2 className="text-2xl font-bold mb-4">ล้านบาท</h2>
</div>
</div>
</div>

<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 p-[50px] h-[275px] w-[406px] text-center text-white rounded-xl shadow-lg">
<h2 className="text-2xl font-bold mb-4">จำนวนบัตรทั้งสิ้น</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">26,332,679</p>
<h2 className="text-2xl font-bold mb-4">ล้านใบ</h2>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white shadow-lg">
<h2 className="text-2xl font-bold mb-4">ยอดสินเชื่อค้างชำระ</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">467,124,720</p>
<h2 className="text-2xl font-bold mb-4">ล้านบาท</h2>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-lg p-[50px] h-[275px] w-[406px] text-center text-white shadow-lg">
<h2 className="text-2xl font-bold mb-4">การเบิกเงินสดล่วงหน้า</h2>
<p className="text-[#46A8A7] text-[32px] font-bold mb-6">16,876.01</p>
<h2 className="text-2xl font-bold mb-4">ล้านบาท</h2>
</div>
</div>
</div>
</div>
</div>
);
Expand Down
0 src/app/favicon.ico → favicon.ico
View file
File renamed without changes.
101 changes: 55 additions & 46 deletions src/app/hero/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,63 +130,62 @@ const App = () => {
<div>
<nav className="bg-teal-500 shadow-md p-8 flex justify-between items-center">
<div className="text-4xl text-white font-bold">
{" "}
<Image src={logo} width={130} height={130} alt="Credit Card" />
</div>
<ul className="flex space-x-6">
<li className="nav-item">
<a href="/" className="text-white text-lg hover:text-yellow-400">
Home
</a>
</li>
<li className="nav-item">
<a
href="/calculate"
className="text-white text-lg hover:text-yellow-400"
>
คำนวณ
</a>
</li>
<li className="nav-item">
<a
href="/about"
className="text-white text-lg hover:text-yellow-400"
>
เกี่ยวกับ
</a>
</li>
<li className="nav-item">
<a
href="/policy"
className="text-white text-lg hover:text-yellow-400"
>
นโยบาย
</a>
</li>
</ul>

<ul className="flex space-x-6">
<li className="nav-item">
<a href="/" className="text-white text-lg hover:text-yellow-400">
Home
</a>
</li>
<li className="nav-item">
<a
href="/calculate"
className="text-white text-lg hover:text-yellow-400"
>
คำนวณ
</a>
</li>
<li className="nav-item">
<a
href="/about"
className="text-white text-lg hover:text-yellow-400"
>
เกี่ยวกับ
</a>
</li>
<li className="nav-item">
<a
href="/policy"
className="text-white text-lg hover:text-yellow-400"
>
นโยบาย
</a>
</li>
</ul>

<div className="text-white text-xl font-bold">User</div>
<div className="text-white text-2xl font-bold">Login</div>
</nav>
<div className="bg-[#696969] text-white">
<div className="bg-gradient-to-r from-gray-800 via-gray-900 to-black text-white">
<div className="flex gap-[8px] p-12 justify-center items-center">
<Image src={creditcard} width={400} height={400} alt="Credit Card" />
<Image src={creditcard2} width={400} height={400} alt="Credit Card" />
<Image src={plus} width={200} height={200} alt="Credit Card" />
<Image src={plus} width={100} height={100} alt="Add Card" />
</div>
<div className="border-t-4 border-yellow-500 p-4 w-4/5 mx-auto flex justify-center items-center">
{" "}
</div>

<div className="flex gap-4 mt-10 p-8">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography
variant="h5"
gutterBottom
className=" mb-4 text-3xl font-bold"
></Typography>
>
รายได้ทั้งหมด (เดือน)
</Typography>
<Box component="form" noValidate autoComplete="off">
<div className="text-[24px] text-white">รายได้ทั้งหมด (เดือน)</div>
<TextField
type="number"
value={salary}
Expand All @@ -195,9 +194,13 @@ const App = () => {
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">
<Typography
variant="h5"
gutterBottom
className="text-[24px] text-white mt-6"
>
สัดส่วนภาระหนี้ยัตรเครดิตที่รับได้(เดือน)
</div>
</Typography>
<TextField
type="number"
value={percentage}
Expand All @@ -216,7 +219,7 @@ const App = () => {
</Button>
</Box>
</div>
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-[24px] text-white">
ใช้จ่ายกับ
</Typography>
Expand All @@ -230,7 +233,13 @@ const App = () => {
margin="normal"
className="bg-white rounded-lg"
/>
<div className="text-[24px] text-white">รายจ่าย</div>
<Typography
variant="h5"
gutterBottom
className="text-[24px] text-white mt-6"
>
รายจ่าย
</Typography>
<TextField
type="number"
value={expenseAmount}
Expand Down Expand Up @@ -271,7 +280,7 @@ const App = () => {
</div>

<div className="flex gap-4 mt-10 p-8">
<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography variant="h5" gutterBottom className="text-xl font-bold">
ยอดเงินที่สามารถใช้ได้
</Typography>
Expand All @@ -288,11 +297,11 @@ const App = () => {
<Typography className="mb-6">{recommendation}</Typography>
</div>

<div className="bg-[#575757] p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg w-full md:w-1/2 text-white">
<Typography
variant="h5"
gutterBottom
className="mt-10 mb-4 text-xl"
className="text-xl font-bold"
>
วันที่รูดบัตรนั้น
</Typography>
Expand Down

0 comments on commit 29af2c1

Please sign in to comment.