-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathMainPage.jsx
275 lines (267 loc) · 13.6 KB
/
MainPage.jsx
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
import Image from "next/image";
import React from "react";
const MainPage = () => {
return (
<div>
<div className="w-full h-[500px] bg-[#D9D9D9] bg-[url('/assets/Home/hero_bg.png')] flex justify-center items-center">
<div className="text-center w-[700px] h-[178px]">
<h1 className="font-bold text-white text-4xl">
Stay ahead of the curve with must-read blog posts from the tech
world.
</h1>
<button className="bg-white text-black w-[241px] h-[53px] px-5 py-1 font-semibold rounded-[77px] mt-[40px]">
Join the Hive
</button>
</div>
</div>
<div className="mt-5 w-[1200px] m-auto h-auto">
<div>
<h1 className="text-4xl">Trending Posts</h1>
<hr className="h-[4px] w-[120px] mt-[12px] bg-black" />
</div>
<div className="grid grid-cols-3 p-11 gap-10 mt-5">
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
<div className="w-[362px] h-[368px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-t-2xl">
<div className="w-[90%] bg-[#755757] h-[180px] m-auto rounded-xl"></div>
</div>
<div className="w-full h-[100px] bg-[#D9D9D9]">
<div className="flex w-[327px] mt-12 m-auto h-[60px] justify-between">
<p className="text-xl font-light">DD-MON-YYYY</p>
<p className="text-xl font-light">Name</p>
</div>
<p className="text-2xl w-[327px] m-auto font-bold">
Topic of the blog ...........
</p>
</div>
</div>
</div>
</div>
<div className="w-[928px] h-[230px] m-auto bg-[#D9D9D9] rounded-3xl"></div>
<div className="mt-10 w-[1200px] m-auto h-auto">
<div>
<h1 className="text-4xl">Latest Posts</h1>
<hr className="h-[4px] w-[120px] mt-[12px] bg-black" />
</div>
<div className="grid grid-cols-1 p-11 gap-10 mt-5">
<div className="w-[1170px] grid grid-cols-3 justify-center items-center h-[288px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-l-2xl">
<div className="w-[322px] bg-[#755757] h-[205px] m-auto rounded-xl"></div>
</div>
<div className="w-full items-center justify-center col-span-2 bg-[#D9D9D9] rounded-r-2xl">
<div className="w-[668px] flex flex-col gap-10 m-auto h-[168px] justify-between">
<p className="text-xl font-semibold">
Topic of the blog ................
</p>
<p className="text-xl">
Lorem ipsum dolaor sit amet, consectetur adipiscing elit.
Felis suscipit gravida euismod arcu urna pha retra. Proin
fusce imperdiet lerisque.
</p>
<div className="w-full h-[20px] flex justify-between items-center">
<p className="text-base w-[151px] font-light">DD-MON-YYYY</p>
<p className="text-base font-light w-[64px]">Name</p>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 p-11 gap-10 mt-5">
<div className="w-[1170px] grid grid-cols-3 justify-center items-center h-[288px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-l-2xl">
<div className="w-[322px] bg-[#755757] h-[205px] m-auto rounded-xl"></div>
</div>
<div className="w-full items-center justify-center col-span-2 bg-[#D9D9D9] rounded-r-2xl">
<div className="w-[668px] flex flex-col gap-10 m-auto h-[168px] justify-between">
<p className="text-xl font-semibold">
Topic of the blog ................
</p>
<p className="text-xl">
Lorem ipsum dolaor sit amet, consectetur adipiscing elit.
Felis suscipit gravida euismod arcu urna pha retra. Proin
fusce imperdiet lerisque.
</p>
<div className="w-full h-[20px] flex justify-between items-center">
<p className="text-base w-[151px] font-light">DD-MON-YYYY</p>
<p className="text-base font-light w-[64px]">Name</p>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 p-11 gap-10 mt-5">
<div className="w-[1170px] grid grid-cols-3 justify-center items-center h-[288px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-l-2xl">
<div className="w-[322px] bg-[#755757] h-[205px] m-auto rounded-xl"></div>
</div>
<div className="w-full items-center justify-center col-span-2 bg-[#D9D9D9] rounded-r-2xl">
<div className="w-[668px] flex flex-col gap-10 m-auto h-[168px] justify-between">
<p className="text-xl font-semibold">
Topic of the blog ................
</p>
<p className="text-xl">
Lorem ipsum dolaor sit amet, consectetur adipiscing elit.
Felis suscipit gravida euismod arcu urna pha retra. Proin
fusce imperdiet lerisque.
</p>
<div className="w-full h-[20px] flex justify-between items-center">
<p className="text-base w-[151px] font-light">DD-MON-YYYY</p>
<p className="text-base font-light w-[64px]">Name</p>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 p-11 gap-10 mt-5">
<div className="w-[1170px] grid grid-cols-3 justify-center items-center h-[288px] border-2 border-[#D9D9D9] shadow-lg rounded-2xl bg-[#D9D9D9]">
<div className="w-full h-[200px] flex justify-center items-center rounded-l-2xl">
<div className="w-[322px] bg-[#755757] h-[205px] m-auto rounded-xl"></div>
</div>
<div className="w-full items-center justify-center col-span-2 bg-[#D9D9D9] rounded-r-2xl">
<div className="w-[668px] flex flex-col gap-10 m-auto h-[168px] justify-between">
<p className="text-xl font-semibold">
Topic of the blog ................
</p>
<p className="text-xl">
Lorem ipsum dolaor sit amet, consectetur adipiscing elit.
Felis suscipit gravida euismod arcu urna pha retra. Proin
fusce imperdiet lerisque.
</p>
<div className="w-full h-[20px] flex justify-between items-center">
<p className="text-base w-[151px] font-light">DD-MON-YYYY</p>
<p className="text-base font-light w-[64px]">Name</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="h-[230px] m-auto"></div>
<div className="bg-[#322E2E] w-full h-[388px] gap-10 items-center justify-center p-5 grid grid-cols-3">
<div className="w-[863px] m-auto col-span-2 h-[207px]">
<div className="grid h-[207px] m-auto grid-rows-3 justify-between gap-10">
<div>
<p className="text-3xl text-white font-normal">
What topics do you want to read?
</p>
<hr className="h-[4px] w-[120px] rounded-xl mt-[12px] bg-white" />
</div>
<p className="text-2xl text-white font-normal">
What you were looking for wasn't found? Our writing team will
ensure that we start covering the topic extensively
</p>
<p className="text-xl text-white font-light">Suggest topics</p>
</div>
</div>
<div>
<Image
src="/assets/Home/suggestion.png"
width={278}
height={301}
alt=""
/>
</div>
</div>
<div className="bg-gradient-to-bl flex flex-col justify-center items-center from-[#DDD8D8] via-[#979495] to-[#4E4D4C] w-full h-[546px]">
<div className="h-[116px] w-[563px] m-auto my-5">
<h1 className="text-4xl text-black font-bold text-center">
Testimonals
</h1>
<p className="text-xl text-black font-medium text-center">
Here’s what our readers have to say about our blogs and events and
how it helped them in their lives
</p>
</div>
<div className="w-[931px] h-[253px] bg-[#FFFFFF] rounded-xl">
<div className="w-[931px] h-[253px] p-5 flex flex-col jus">
<p className="text-base w-[835px] h-[133px] m-auto font-normal text-black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis
suscipit gravida euismod arcu. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Felis suscipit gravida euismod arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis
suscipit gravida euismod arcu. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Felis suscipit gravida euismod arcu.
</p>
<div className="w-[148px] h-[62px] ml-5 grid grid-cols-2">
<div className="w-[62px] h-[62px] rounded-full bg-[#E9DFDF]"></div>
<div>
<p className="text-base text-black font-semibold">Name</p>
<p className="text-base text-black font-light">Position</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default MainPage;