Skip to content

Commit

Permalink
dada
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicotinelnwza007
nicotinelnwza007 committed Jul 21, 2024
1 parent 2f4f73c commit 3ed4e47
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 79 deletions.
114 changes: 62 additions & 52 deletions components/firstpage.js
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,88 @@
import Image from "next/image";
import Link from "next/link";

import logo from "@/app/hero/logo.png";
import React from "react";

export default function FirstPage() {
return (
<div>
<nav className="bg-white shadow-md p-8 flex justify-between">
<div>Credit Buddy</div>
<ul className="flex justify-around gap-[24px]">
<li className="nav-item">
<a href="/" className="nav-link">
Home
</a>
</li>
<li className="nav-item">
<a href="/about" className="nav-link">
Caculate
</a>
</li>
<li className="nav-item">
<a href="/services" className="nav-link">
About us
</a>
</li>
<li className="nav-item">
<a href="/contact" className="nav-link">
Policy
</a>
</li>
</ul>
<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={170} height={170} alt="Credit Card" />
</div>
<ul className="flex space-x-6 text-center justify-center items-center">
<li className="nav-item">
<a href="/" className="text-white text-lg hover:text-yellow-400">
Home
</a>
</li>
<li className="nav-item">
<a
href="/hero"
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>
</nav>

<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="flex flex-col itext-center justify-center items-center min-h-screen bg-gradient-to-r from-[#383838] to-[#9E9E9E]">
<div className="text-center">
ให้เหมาะกับสไตล์คุณ ผ่านเว็บไซต์ช่วยวางแผนการใช้บัตรเครดิต
</div>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
About Us
</div>
</div>
</Link>
<div className="grid grid-cols-3 gap-[4px] p-1">
<div className="grid grid-cols-3 gap-[32px] p-1">
<div className="flex items-center justify-center h-screen ">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
<div className="bg-[#575757] 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">26,332,679</p>
<h2>ล้านใบ</h2>

</div>
</div>
<div className="flex items-center justify-center h-screen ">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
<div className="flex items-center justify-center h-screen ">
<div className="bg-[#575757] 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">26,332,679</p>
<h2>ล้านใบ</h2>

</div>
</div>
</div>
<div className="flex items-center justify-center">
<div className="bg-white shadow-lg rounded-lg p-8 h-[400px] w-[750px] text-center">
<h2 className="text-2xl font-bold mb-4">Louriepoiem</h2>
<p className="text-gray-700 mb-6">lorepium</p>
<Link href="/hero">
<div className="inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
เข้าใช้บริการ
</div>
</Link>
<div className="flex items-center justify-center h-screen ">
<div className="bg-[#575757] 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">26,332,679</p>
<h2>ล้านใบ</h2>

</div>
</div>
</div>
</div>
Expand Down
Binary file added src/app/hero/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 50 additions & 27 deletions src/app/hero/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from "@mui/material";
import React from "react";
import Image from "next/image";
import logo from "@/app/hero/logo.png";

const recommendCard = (amount, creditCards) => {
const suitableCards = creditCards.filter(
Expand Down Expand Up @@ -127,30 +128,44 @@ const App = () => {
return (
<div>
<nav className="bg-teal-500 shadow-md p-8 flex justify-between items-center">
<div className="text-4xl text-white font-bold">Credit Buddy</div>
<ul className="flex space-x-6">
<li className="nav-item">
<a href="/" className="text-white text-lg">
Home
</a>
</li>
<li className="nav-item">
<a href="/calculate" className="text-white text-lg">
คำนวณ
</a>
</li>
<li className="nav-item">
<a href="/about" className="text-white text-lg">
เกี่ยวกับ
</a>
</li>
<li className="nav-item">
<a href="/policy" className="text-white text-lg">
นโยบาย
</a>
</li>
</ul>
<div className="text-white text-lg">Login</div>
<div className="text-4xl text-white font-bold">
{" "}
<Image src={logo} width={170} height={170} 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>


<div className="text-white text-xl font-bold">User</div>
</nav>
<div className="bg-[#696969] text-white">
<div className="flex gap-[8px] p-12 justify-center items-center">
Expand Down Expand Up @@ -272,7 +287,11 @@ const App = () => {
</div>

<div className="bg-[#575757] 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">
<Typography
variant="h5"
gutterBottom
className="mt-10 mb-4 text-xl"
>
วันที่รูดบัตรนั้น
</Typography>
<Box component="form" noValidate autoComplete="off">
Expand All @@ -291,9 +310,13 @@ const App = () => {
onClick={() => {
const dayOfPurchase = new Date(purchaseDate).getDate();
if (dayOfPurchase <= 15) {
setRecommendation("You should use Card 1 for this purchase.");
setRecommendation(
"You should use Card 1 for this purchase."
);
} else {
setRecommendation("You should use Card 2 for this purchase.");
setRecommendation(
"You should use Card 2 for this purchase."
);
}
}}
className="mt-6"
Expand Down

0 comments on commit 3ed4e47

Please sign in to comment.