Skip to content

Commit c675648

Browse files
pawan-livepawan-live
authored
Feat/about page (#61)
* fix: scroll to categories section added offset * add about page * fix about page
1 parent 95d0acc commit c675648

File tree

6 files changed

+168
-8
lines changed

6 files changed

+168
-8
lines changed

‎next.config.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import type { NextConfig } from "next";
33
const nextConfig: NextConfig = {
44
/* config options here */
55
images: {
6-
domains: ["images.unsplash.com", "rc-api-stage.matterofcode.dev"],
6+
domains: [
7+
"images.unsplash.com",
8+
"rc-api-stage.matterofcode.dev",
9+
"upload.wikimedia.org",
10+
],
711
},
812
};
913

‎public/doctor-asanka-nugaliyadde.jpeg‎

86.3 KB
Loading

‎src/app/about/page.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import Image from "next/image";
2+
import Image1 from "../../../public/doctor.png";
3+
import DoctorPhoto from "../../../public/doctor-asanka-nugaliyadde.jpeg";
4+
import Link from "next/link";
5+
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
6+
7+
export default function Page() {
8+
return (
9+
<div className="">
10+
<section className="flex flex-col items-center justify-center h-[400px] bg-gradient-to-r from-blue-100 to-white text-center px-4">
11+
<h1 className="text-4xl font-bold text-gray-800 mb-4">
12+
About Arthritis.lk
13+
</h1>
14+
<p className="text-lg text-gray-600 max-w-2xl">
15+
The vision, mission, and the driving force behind this useful
16+
information portal
17+
</p>
18+
</section>
19+
<div className="container mx-auto xl:px-[200px] py-10 pb-16 px-[24px] flex flex-col gap-8 gap-y-16 items-start h-auto ">
20+
<section>
21+
<h1 className="text-3xl font-bold">What is Arthritis.lk</h1>
22+
<div className="flex flex-col lg:flex-row mt-8 gap-8">
23+
<Image
24+
src={Image1}
25+
width={400}
26+
height={400}
27+
className="object-cover rounded-xl w-full h-[300px] lg:max-h-[600px] lg:max-w-[600px]"
28+
alt="Image"
29+
/>
30+
<div>
31+
<p className="text-lg text-gray-600">
32+
Arthritis.lk is a free and open-to-all platform where patients
33+
can find information about specific Rheumatic conditions. Led by
34+
Dr. Asanka Nugaliyadde, Consultant Rheumatologist at the
35+
Teaching Hospital, Kurunegala.
36+
</p>
37+
<p className="text-lg text-gray-600 mt-2">
38+
Suspendisse nisi nullam pellentesque odio magna. Montes nascetur
39+
risus pharetra aliquet, tempus ante efficitur. Magnis pharetra
40+
taciti dolor; sapien cursus porttitor. Dictumst felis non
41+
aliquet; inceptos venenatis taciti magna. Dui metus massa morbi
42+
malesuada interdum ad eget vel. Pulvinar habitant arcu mollis
43+
erat senectus. Non tempor varius dui ante sed nibh vel
44+
scelerisque. Conubia ac tortor est dapibus platea aptent. Aenean
45+
mus consequat eros condimentum in mollis urna venenatis maximus.
46+
</p>
47+
<Link
48+
href="/contact"
49+
className="inline-flex items-center mt-4 hover:text-blue-600 transition-all duration-300 font-semibold">
50+
Learn more about the doctor
51+
<ArrowTopRightOnSquareIcon width={24} className="ml-2" />
52+
</Link>
53+
</div>
54+
</div>
55+
</section>
56+
<section>
57+
<h1 className="text-3xl font-bold">About the Doctor</h1>
58+
<div className="flex flex-col lg:flex-row mt-8 gap-8">
59+
<div className="relative min-w-[300px] min0 h-[300px] w-[300px]">
60+
<Image
61+
src={DoctorPhoto}
62+
width={400}
63+
height={400}
64+
className="absolute w-full h-full object-cover rounded-xl"
65+
alt="Image"
66+
/>
67+
</div>
68+
<div>
69+
<p className="text-lg text-gray-600">
70+
Arthritis.lk is a free and open-to-all platform where patients
71+
can find information about specific Rheumatic conditions. Led by
72+
Dr. Asanka Nugaliyadde, Consultant Rheumatologist at the
73+
Teaching Hospital, Kurunegala.
74+
</p>
75+
<p className="text-lg text-gray-600 mt-2">
76+
Suspendisse nisi nullam pellentesque odio magna. Montes nascetur
77+
risus pharetra aliquet, tempus ante efficitur. Magnis pharetra
78+
taciti dolor; sapien cursus porttitor. Dictumst felis non
79+
aliquet; inceptos venenatis taciti magna. Dui metus massa morbi
80+
malesuada interdum ad eget vel.
81+
</p>
82+
<p className="mt-4 font-semibold italic">
83+
Dr Asanka Nugaliyadde
84+
<br />
85+
MBBS MD Specialty Certificate in Rheumatology (UK)
86+
<br />
87+
Consultant Rheumatologist at Teaching Hospital Kurunegala
88+
</p>
89+
<div className="flex items-center mt-4 space-x-4">
90+
<Link
91+
href="https://www.linkedin.com/in/asanka-nugaliyadde-20006188"
92+
className="inline-flex items-center hover:text-blue-600 transition-all duration-300 font-semibold">
93+
Linkedin
94+
<ArrowTopRightOnSquareIcon width={24} className="ml-2" />
95+
</Link>
96+
<Link
97+
href="https://www.researchgate.net/profile/Asanka-Nugaliyadde-2"
98+
className="inline-flex items-center hover:text-blue-600 transition-all duration-300 font-semibold">
99+
Research Gate
100+
<ArrowTopRightOnSquareIcon width={24} className="ml-2" />
101+
</Link>
102+
<Link
103+
href="https://www.researchgate.net/profile/Asanka-Nugaliyadde-2"
104+
className="inline-flex items-center hover:text-blue-600 transition-all duration-300 font-semibold">
105+
Email
106+
<ArrowTopRightOnSquareIcon width={24} className="ml-2" />
107+
</Link>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
<section>
113+
<h1 className="text-3xl font-bold">About the Hospital</h1>
114+
<div className="flex flex-col lg:flex-row mt-8 gap-8">
115+
<div className="relative min-w-[300px] min0 h-[300px] w-[300px]">
116+
<Image
117+
src={
118+
"https://upload.wikimedia.org/wikipedia/commons/0/05/Teaching_Hospital_Kurunegala.png"
119+
}
120+
width={400}
121+
height={400}
122+
className="absolute w-full h-full object-cover rounded-xl"
123+
alt="Image"
124+
/>
125+
</div>
126+
<div>
127+
<p className="text-lg text-gray-600">
128+
Suspendisse nisi nullam pellentesque odio magna. Montes nascetur
129+
risus pharetra aliquet, tempus ante efficitur. Magnis pharetra
130+
taciti dolor; sapien cursus porttitor. Dictumst felis non
131+
aliquet; inceptos venenatis taciti magna. Dui metus massa morbi
132+
malesuada interdum ad eget vel.
133+
</p>
134+
<p className="text-lg text-gray-600 mt-2">
135+
Suspendisse nisi nullam pellentesque odio magna. Montes nascetur
136+
risus pharetra aliquet, tempus ante efficitur. Magnis pharetra
137+
taciti dolor; sapien cursus porttitor. Dictumst felis non
138+
aliquet; inceptos venenatis taciti magna. Dui metus massa morbi
139+
malesuada interdum ad eget vel.
140+
</p>
141+
<div className="flex items-center mt-4 space-x-4">
142+
<Link
143+
href="https://linkedin.com/in/asanka-nugaliyadde"
144+
className="inline-flex items-center hover:text-blue-600 transition-all duration-300 font-semibold">
145+
Contact Hospital
146+
<ArrowTopRightOnSquareIcon width={24} className="ml-2" />
147+
</Link>
148+
</div>
149+
</div>
150+
</div>
151+
</section>
152+
</div>
153+
</div>
154+
);
155+
}

‎src/app/components/MainCategorySection.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ export default async function MainCategorySection() {
1515
const categories = response.data;
1616

1717
return (
18-
<section id="categories" className="container bg-white py-12 mx-auto">
18+
<section
19+
className="container bg-white py-12 mx-auto scroll-m-[100px]"
20+
id="categories">
1921
<h2 className="text-[#484848] font-bold text-4xl text-center">
2022
Main Categories
2123
</h2>
2224
<p className="text-[#9E9E9E] text-center px-8 py-8 text-2xl">
2325
Some of the most common types Rheumatic diseases
2426
</p>
25-
<div className="categories flex flex-wrap justify-center gap-4 px-8">
27+
<div className="flex flex-wrap justify-center gap-4 px-8">
2628
{categories.map((category) => (
2729
<Link key={category.id} href={`/${category.slug}`}>
2830
<div

‎src/app/components/Navbar/Navbar.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -191,9 +191,8 @@ export default function Navbar({ data }: { data: NavbarType }) {
191191
))}
192192
<button
193193
className="px-6 py-2 bg-[#2F7CC4] text-white rounded-full text-sm hover:bg-[#276ca3] transition"
194-
style={{ width: "98px", height: "38px" }}
195-
>
196-
Explore
194+
style={{ width: "98px", height: "38px" }}>
195+
{navbarButton?.buttonText}
197196
</button>
198197
<div className="mt-4">
199198
<div className="relative" ref={dropdownRef}>

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import InfoSection from "./components/InfoSection/InfoSection";
1111

1212
export default async function Home() {
1313
return (
14-
<div>
14+
<>
1515
<HeroSection selectedLang="en" />
1616
{/* <ContactCard /> */}
1717
<InfoSection />
1818
<MainCategorySection />
1919
<ContactCard />
2020
{/* <AZCards azCards={translationsData["en"]["az-cards"]} /> */}
21-
</div>
21+
</>
2222
);
2323
}

0 commit comments

Comments
 (0)