-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
179 lines (147 loc) · 9.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Lane</title>
<!--CSS-->
<link rel="stylesheet" href="./dist/output.css">
<!--ICONS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.min.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/swiper-bundle.min.css"> -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script type="module" src="./js/sign-up.js" defer></script>
</head>
<body>
<!--Navbar-->
<header class="sticky top-0 h-[90px] shadow-xl z-30 bg-white">
<div class="container mx-auto flex justify-between h-full items-center">
<a href="#">
<img src="./assets/logo.jpeg" alt="" class="w-[200px]">
</a>
<nav>
<div class="cursor-pointer lg:hidden" id="nav_trigger_btn">
<i class="ri-menu-4-line text-4xl text-primary"></i>
</div>
<ul class="fixed w-full h-0 p-0 bg-white overflow-hidden border-t top-[90px] left-0 right-0 flex flex-col gap-4 lg:relative lg:flex-row lg:p-0 lg:top-0 lg:border-none lg:h-full transition-all duration-300" id="nav_menu">
<li class="p-2"><a href="./index.html">Home</a></li>
<li class="p-2"><a href="./index.html#about">About</a></li>
<li class="p-2"><a href="./index.html#contact">Contact Us</a></li>
<!-- Placeholder for user info or sign-in button -->
<div id="user-auth-section">
<button class="btn-accent w-[120px] h-[50px] lg:p-0 p-2 rounded-lg">
<a href="./sign-up.html" class="text-white hover:text-black" id="auth-btn">Sign Up</a>
</button>
</div>
</ul>
</nav>
</div>
</header>
<main class="max-w-[1920px] mx-auto bg-white overflow-hidden">
<!--Hero-->
<section class="hero h-[640px] xl:h-[700px] bg-hero bg-center lg:bg-cover bg-no-repeat bg-fixed xl:rounded-bl-[290px] relative z-20" id="home">
<div class="container mx-auto h-full flex items-center justify-center xl:justify-start">
<div class="hero__text w-[567px] flex flex-col items-center text-center xl:text-left lg:items-start">
<h1 class="h1 mb-8">Memory Lane</h1>
<p class="mb-8">
One stop solution for dementia patients, caretakers and doctors.
</p>
<button class="btn btn-accent mx-auto xl:mx-0"><a href="" class="text-white hover:text-primary">Get Started</a>
<i class="ri-arrow-right-line text-white"></i>
</button>
</div>
</div>
</section>
<!--About-->
<section class="steps mt-[30px] xl:mt-[30px] relative z-20 mb-20" id="about">
<div class="container mx-auto">
<div class="flex justify-center text-center pb-10">
<h2 class="h2 ">About Us</h2>
</div>
<div class="grid grid-cols-1 gap-12 xl:grid-cols-3">
<!--Step 1-->
<div class="steps__step text-center bg-accent-secondary p-4 rounded-xl">
<div class="mb-4">
<i class="ri-brain-2-line text-5xl text-accent"></i>
</div>
<h3 class="h3 mb-5">Dementia Patients</h3>
<p class="mb-5 max-w-md mx-auto">Memory Lane helps patients by providing mind games, photo gallery to keep their minds active</p>
<a href="#" class="font-medium">Read More
<i class="ri-arrow-right-line"></i>
</a>
</div>
<!--Step 2-->
<div class="steps__step text-center bg-accent-secondary p-4 rounded-xl">
<div class="mb-4">
<i class="ri-empathize-line text-5xl text-accent"></i>
</div>
<h3 class="h3 mb-5">Caretakers</h3>
<p class="mb-5 max-w-md mx-auto">Memory Lane helps caretakers to keep track of the patients health with ease</p>
<a href="#" class="font-medium">Read More
<i class="ri-arrow-right-line"></i>
</a>
</div>
<!--Step 3-->
<div class="steps__step text-center bg-accent-secondary p-4 rounded-xl">
<div class="mb-4">
<i class="ri-nurse-line text-5xl text-accent"></i>
</div>
<h3 class="h3 mb-5">Doctors</h3>
<p class="mb-5 max-w-md mx-auto">Memory Lane provides electronic healthcare system to have better access to the patients health history.</p>
<a href="#" class="font-medium">Read More
<i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</section>
<section class="about mt-[80px] xl:mt-[120px] relative z-20">
<div class="container mx-auto xl:px-0">
<div class="flex flex-col text-center xl:text-left xl:flex-row justify-between items-center gap-8 xl:gap-[74px]">
<div class="about__text flex-1 order-1 xl:order-none max-w-xl xl:max-w-[410px] flex flex-col items-center xl:items-start gap-8 ">
<h2 class="h2">Preserving the memories that matter most. </h2>
<p>Memory Lane is a platform designed to provide information and support for people affected by dementia, including those living with the condition, their families, caregivers, and healthcare professionals.
</p>
</div>
<div class="about__image order-2 xl:order-none max-w-[453px] mx-auto xl:max-w-none xl:mx-0">
<img src="./assets/bg-hero2.jpg" alt="" class="rounded-3Xl">
</div>
</div>
</div>
</section>
<!--Contact Us-->
<section class="mt-[80px] xl:mt-[120px] relative z-20" id="contact">
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
<h2 class="mb-4 h2 tracking-tight text-center text-primary">Contact Us</h2>
<form action="#" class="space-y-8">
<div>
<label for="email" class="block mb-2 text-md font-medium text-gray-900 ">Your email</label>
<input type="email" id="email" class="shadow-sm bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 " placeholder="Enter Your Email" required>
</div>
<div>
<label for="subject" class="block mb-2 text-sm font-medium text-gray-900 ">Subject</label>
<input type="text" id="subject" class="block p-3 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 " placeholder="Let us know how we can help you" required>
</div>
<div class="sm:col-span-2">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 ">Your message</label>
<textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 " placeholder="Leave a comment..."></textarea>
</div>
<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-accent sm:w-fit focus:ring-4 focus:outline-none focus:ring-primary-300 ">Send message</button>
</form>
</div>
</section>
<!--Footer-->
<footer class="bg-white m-4">
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<hr class="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2022 <a href="index.html" class="hover:underline">Memory Lane™</a>. All Rights Reserved.</span>
</div>
</footer>
</main>
<script src="./js/main.js"></script>
</body>
</html>