-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1197 lines (1194 loc) · 57.5 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
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" data-theme="" style="scroll-behavior: smooth">
<!-- head start -->
<head>
<!-- meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JohuCafe</title>
<meta name="description" content="Best Cafe House in Town" />
<meta name="keywords" content="Coffee, Cha, Cold Coffee, Hot Coffee" />
<meta name="author" content="Shejan Mahamud" />
<!-- favicon link -->
<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon" />
<!-- css file -->
<link rel="stylesheet" href="./styles/style.css" />
<!-- google font link -->
<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=Manrope:wght@200;300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
</head>
<!-- head end and body start-->
<body class="font-manrove w-full h-auto">
<!-- header start -->
<header>
<div
class="navbar bg-base-100 w-full lg:w-[90%] mx-auto my-3 flex items-center justify-between"
>
<div class="">
<div class="dropdown md:hidden">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li><a>Home</a></li>
<li>
<a>Menus</a>
</li>
<li><a>About</a></li>
<li><a>Reviews</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="inline-flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="35"
viewBox="0 0 62 65"
fill="none"
>
<g clip-path="url(#clip0_60_141)">
<path
d="M55.3551 27.8521L7.23615 34.7869C5.15259 35.0932 3.04087 34.397 1.63306 32.8652C0.619437 31.7512 0 30.2751 0 28.6598C0 25.3178 2.64668 22.5884 5.99727 22.4213C6.22252 22.4213 6.41962 22.3935 6.64487 22.3656L54.7639 15.4588C56.8474 15.1524 58.9591 15.8487 60.3669 17.3804C61.3806 18.4944 62 19.9705 62 21.5858C62 24.9279 59.3533 27.6572 56.0027 27.8243C55.8056 27.7964 55.5804 27.8243 55.3551 27.8521Z"
fill="#FF8938"
/>
<path
d="M50.3433 44.2838L11.6567 49.8539C8.16529 49.8539 5.34967 47.0689 5.34967 43.6154C5.34967 40.162 8.16529 37.3769 11.6567 37.3769L50.3433 31.8069C53.8347 31.8069 56.6503 34.5919 56.6503 38.0454C56.6503 41.4709 53.8347 44.2838 50.3433 44.2838Z"
fill="#f00"
/>
<path
d="M40.1226 61.3561L21.8492 64.1411C18.3579 64.1411 15.5422 61.3561 15.5422 57.9026C15.5422 54.4492 18.3579 51.6642 21.8492 51.6642L40.1226 48.8792C43.614 48.8792 46.4296 51.6642 46.4296 55.1176C46.4578 58.5711 43.614 61.3561 40.1226 61.3561Z"
fill="#f00"
/>
<path
d="M37.307 14.7625V6.37958C37.307 2.92614 34.4914 0.141113 31 0.141113C27.5086 0.141113 24.693 2.92614 24.693 6.37958V16.5728L37.307 14.7625Z"
fill="#FF8938"
/>
</g>
<defs>
<clipPath id="clip0_60_141">
<rect
width="62"
height="64"
fill="white"
transform="translate(0 0.141113)"
/>
</clipPath>
</defs>
</svg>
<a
class="bg-clip-text text-transparent bg-gradient-to-r from-[#F00] to-[#FF8938] text-2xl font-bold"
>JohuTea</a
>
</div>
</div>
<div class="navbar-center hidden lg:flex md:flex">
<ul
class="menu menu-horizontal px-1 flex items-center gap-4 font-medium text-base md:text-xs md:gap-2 lg:text-base"
>
<li><a>Home</a></li>
<li>
<details>
<summary>Menus</summary>
<ul class="p-2">
<li>
<a>Coffee</a>
<ul>
<li><a>Cold Coffee</a></li>
<li><a>Black Coffee</a></li>
<li><a>Hot Coffee</a></li>
</ul>
</li>
<li><a>Cha</a></li>
</ul>
</details>
</li>
<li><a>About</a></li>
<li><a>Reviews</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="flex items-center gap-3">
<div class="hidden lg:flex">
<a
class="bg-gradient-primary text-white px-5 py-3 rounded-lg font-bold text-base"
>Buy Tea</a
>
</div>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<div class="indicator">
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.79 10.47V17.79C17.79 20.12 15.9 22 13.58 22H6.21C3.89 22 2 20.11 2 17.79V10.47C2 8.14001 3.89 6.26001 6.21 6.26001H13.58C15.9 6.26001 17.79 8.15001 17.79 10.47Z"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M5.5 4V2.25"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9.5 4V2.25"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.5 4V2.25"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 13.16C22 15.48 20.11 17.37 17.79 17.37V8.94995C20.11 8.94995 22 10.83 22 13.16Z"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M2 12H17.51"
stroke="#292D32"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span
class="badge badge-sm indicator-item bg-gradient-primary border-2 border-white px-3 py-3 rounded-full text-white"
>3</span
>
</div>
</div>
<div
tabindex="0"
class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow"
>
<div class="card-body">
<span class="font-bold text-lg">3 Items</span>
<span class="text-info">Subtotal: $99</span>
<div class="card-actions">
<button
class="btn btn-primary btn-block bg-gradient-primary text-white border-none"
>
View cart
</button>
</div>
</div>
</div>
</div>
<div class="dropdown dropdown-end">
<div
tabindex="0"
role="button"
class="rounded-full bg-gradient-primary h-11 w-11 flex items-center justify-center"
>
<div class="w-10 h-10">
<img
alt="Tailwind CSS Navbar component"
src="./images/avatar.jpg"
class="rounded-full"
/>
</div>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<a class="justify-between">
Profile
<span class="badge bg-gradient-primary text-white border-none"
>New</span
>
</a>
</li>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul>
</div>
</div>
</div>
<!-- hero section start -->
<section
class="w-[90%] mx-auto grid lg:grid-cols-2 grid-cols-1 row-auto items-center my-28 gap-10"
>
<div>
<h1 class="text-6xl font-extrabold leading-[70px] tracking-wide">
It's good tea time at The JohuTea
</h1>
<p class="text-[#777] font-medium w-[90%] my-8">
Tea and Botanical Solutions Supplier Give Optimum Satisfaction To
Your Taste Buds.
</p>
<button
class="bg-gradient-primary px-5 py-4 flex items-center gap-2 text-white text-lg font-semibold rounded-lg"
>
<span>Explore More</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
>
<path
d="M4.5 19.7788L19.5 4.77881M19.5 4.77881H8.25M19.5 4.77881V16.0288"
stroke="white"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="relative">
<img src="./images/banner.png" alt="banner.jpg" class="" />
<div
class="bg-white shadow-2xl rounded-2xl px-3 lg:px-8 lg:py-8 py-3 inline-flex items-center gap-2 absolute bottom-0 lg:left-36 left-16 md:left-56 md:bottom-8"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="46"
viewBox="0 0 48 46"
fill="none"
>
<path
d="M42.4416 13.778L29.9033 12.6152L24.9228 1.04987C24.574 0.240051 23.4259 0.240051 23.0772 1.04987L18.0966 12.6151L5.5584 13.778C4.68043 13.8594 4.32568 14.9514 4.98802 15.5333L14.4482 23.8439L11.6796 36.1279C11.4858 36.988 12.4147 37.6629 13.1728 37.2128L24 30.7838L34.8272 37.2128C35.5854 37.663 36.5141 36.988 36.3204 36.1279L33.5517 23.8439L43.012 15.5333C43.6743 14.9514 43.3195 13.8594 42.4416 13.778Z"
fill="#FFDC64"
/>
<path
d="M11.1823 0.651717C11.8215 1.53953 13.6256 5.35235 14.6571 7.57442C14.8193 7.92373 14.381 8.23929 14.1011 7.97463C12.3211 6.29163 9.2775 3.37113 8.63831 2.48322C8.13253 1.78075 8.292 0.801249 8.99456 0.295467C9.69703 -0.210315 10.6765 -0.0507523 11.1823 0.651717Z"
fill="#FFF082"
/>
<path
d="M36.8177 0.651717C36.1785 1.53953 34.3744 5.35235 33.343 7.57442C33.1808 7.92373 33.6191 8.23929 33.8989 7.97463C35.6789 6.29163 38.7224 3.37103 39.3617 2.48322C39.8675 1.78075 39.708 0.801249 39.0055 0.295467C38.303 -0.210315 37.3235 -0.0507523 36.8177 0.651717Z"
fill="#FFF082"
/>
<path
d="M46.9183 26.6867C45.8782 26.3475 41.6974 25.7871 39.2671 25.4796C38.8851 25.4313 38.7177 25.9447 39.0547 26.1309C41.199 27.3155 44.9062 29.3277 45.9463 29.6669C46.7692 29.9353 47.6539 29.4858 47.9223 28.6627C48.1907 27.8397 47.7412 26.9551 46.9183 26.6867Z"
fill="#FFF082"
/>
<path
d="M1.08176 26.6867C2.12182 26.3475 6.30261 25.7871 8.73289 25.4796C9.11492 25.4313 9.28236 25.9447 8.94533 26.1309C6.80098 27.3155 3.09382 29.3277 2.05376 29.6669C1.23082 29.9353 0.346098 29.4858 0.0776916 28.6627C-0.190715 27.8397 0.258817 26.9551 1.08176 26.6867Z"
fill="#FFF082"
/>
<path
d="M22.4807 44.3756C22.4807 43.2816 23.2443 39.1332 23.7055 36.7272C23.778 36.3491 24.3181 36.3491 24.3906 36.7272C24.8518 39.1332 25.6154 43.2816 25.6154 44.3756C25.6154 45.2412 24.9137 45.9429 24.0481 45.9429C23.1824 45.943 22.4807 45.2412 22.4807 44.3756Z"
fill="#FFF082"
/>
<path
d="M26.7338 5.2555L24.9227 1.04987C24.5739 0.240051 23.4258 0.240051 23.0771 1.04987L18.0965 12.6151L5.5584 13.778C4.68043 13.8594 4.32568 14.9514 4.98802 15.5333L14.4482 23.8439L11.6796 36.1279C11.4858 36.988 12.4147 37.6629 13.1728 37.2128L14.6138 36.3571C16.9762 21.0646 23.6177 9.83875 26.7338 5.2555Z"
fill="#FFC850"
/>
</svg>
<div>
<h1 class="text-[#1C1C1C] font-extrabold text-2xl">5.00</h1>
<p class="text-[#777] text-xs lg:text-base">
Trust Pilot Ratings
</p>
</div>
</div>
</div>
</section>
</header>
<main class="w-[90%] mx-auto">
<!-- featured section start -->
<section class="w-full my-28">
<h1 class="text-center text-4xl lg:text-5xl font-extrabold">
Our Featured Products
</h1>
<p
class="text-center text-[#777] font-medium lg:w-[65%] mx-auto mt-6 mb-16"
>
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly believable.
</p>
<div
class="grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 row-auto mx-auto gap-10"
>
<div
class="bg-gradient-secondary flex flex-col justify-center items-center px-6 py-8 text-center rounded-2xl gap-3"
>
<img src="./images/tea-1.png" alt="tea-1.png" />
<h1 class="font-extrabold text-2xl text-[#1C1C1C]">Milk Tea</h1>
<p class="text-[#777] font-medium">
Creamer could be replaced by fresh milk`
</p>
</div>
<div
class="bg-gradient-secondary flex flex-col justify-center items-center px-6 py-8 text-center rounded-2xl gap-3"
>
<img src="./images/tea-2.png" alt="tea-2.png" />
<h1 class="font-extrabold text-2xl text-[#1C1C1C]">Black Tea</h1>
<p class="text-[#777] font-medium">
Creamer could be replaced by fresh milk
</p>
</div>
<div
class="bg-gradient-secondary flex flex-col justify-center items-center px-6 py-8 text-center rounded-2xl gap-3"
>
<img src="./images/tea-3.png" alt="tea-3.png" />
<h1 class="font-extrabold text-2xl text-[#1C1C1C]">Lemon Tea</h1>
<p class="text-[#777] font-medium">
Creamer could be replaced by fresh milk
</p>
</div>
<div
class="bg-gradient-secondary flex flex-col justify-center items-center px-6 py-8 text-center rounded-2xl gap-3"
>
<img src="./images/tea-4.png" alt="tea-4.png" />
<h1 class="font-extrabold text-2xl text-[#1C1C1C]">Green Tea</h1>
<p class="text-[#777] font-medium">
Creamer could be replaced by fresh milk
</p>
</div>
</div>
</section>
<!-- special dish sec -->
<section class="my-40 w-90 mx-auto">
<div class="flex items-end justify-between mb-28">
<div class="flex flex-col gap-3 lg:gap-5">
<p
class="bg-clip-text text-transparent bg-gradient-to-r from-[#F00] to-[#FF8938] text-sm font-bold lg:text-sm uppercase tracking-ls"
>
Special Cha
</p>
<h1 class="text-2xl lg:text-4xl font-bold capitalize md:text-3xl">
Standout Cha <br />From Our Menu
</h1>
</div>
<div class="flex gap-5 items-center">
<button
class="bg-gradient-primary h-10 w-10 rounded-full flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="16"
viewBox="0 0 12 20"
fill="none"
>
<path
d="M2 2L9.7645 9.7645"
stroke="white"
stroke-width="4"
stroke-linecap="round"
/>
<path
d="M2 18L9.7645 10.2355"
stroke="white"
stroke-width="4"
stroke-linecap="round"
/>
</svg>
</button>
<button
class="bg-[#EFEFEF] h-10 w-10 rounded-full flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="16"
viewBox="0 0 12 20"
fill="none"
>
<path
d="M9.76453 2L2.00003 9.7645"
stroke="#6F6E6E"
stroke-width="4"
stroke-linecap="round"
/>
<path
d="M9.76453 18L2.00003 10.2355"
stroke="#6F6E6E"
stroke-width="4"
stroke-linecap="round"
/>
</svg>
</button>
</div>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-4 lg:grid-rows-1 md:grid-cols-2 md:grid-rows-2 gap-10 mx-auto"
>
<!-- first food -->
<div
class="shadow-2xl rounded-3xl flex flex-col gap-3 relative py-8 px-6"
>
<div
class="flex items-center justify-center bg-gradient-primary w-[62px] h-[50px] absolute top-0 right-0"
style="border-radius: 0px 37.5px 0px 42.5px"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="fi-sr-heart" clip-path="url(#clip0_1_105)">
<path
id="Vector"
d="M17.5 1.91653C16.3739 1.93405 15.2724 2.24839 14.3068 2.82781C13.3411 3.40722 12.5453 4.2312 12 5.21653C11.4546 4.2312 10.6589 3.40722 9.69323 2.82781C8.72753 2.24839 7.62604 1.93405 6.49999 1.91653C4.70493 1.99453 3.01369 2.77979 1.79577 4.10077C0.577848 5.42175 -0.0677617 7.17106 -1.11917e-05 8.96653C-1.11917e-05 13.5135 4.78599 18.4795 8.79999 21.8465C9.69621 22.5997 10.8293 23.0126 12 23.0126C13.1706 23.0126 14.3038 22.5997 15.2 21.8465C19.214 18.4795 24 13.5135 24 8.96653C24.0677 7.17106 23.4221 5.42175 22.2042 4.10077C20.9863 2.77979 19.295 1.99453 17.5 1.91653Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1_105">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="flex justify-center mb-3">
<img
src="./images/special-cha-1.png"
alt="special-cha-1.png"
class="h-[200px] w-[200px]"
/>
</div>
<h1 class="text-lg font-semibold">Smoothy Cha</h1>
<p class="text-[#555] text-sm font-semibold">
Mixed flavour of smoothy
</p>
<div class="flex items-center justify-between">
<p class="text-base font-bold">
<span class="text-[#FF6868] text-xs font-semibold">$</span>24.00
</p>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
>
<g clip-path="url(#clip0_1_97)">
<path
d="M1.3268 12.4003L4.8868 15.0003L3.5348 19.1873C3.31631 19.8367 3.31354 20.5393 3.52691 21.1904C3.74027 21.8415 4.15834 22.4062 4.7188 22.8003C5.26965 23.2071 5.93719 23.425 6.62195 23.4216C7.30671 23.4182 7.97204 23.1936 8.5188 22.7813L11.9998 20.2193L15.4818 22.7783C16.0317 23.1828 16.6956 23.4024 17.3782 23.4058C18.0607 23.4091 18.7268 23.1959 19.2806 22.7968C19.8343 22.3977 20.2473 21.8333 20.4601 21.1848C20.6729 20.5362 20.6745 19.8369 20.4648 19.1873L19.1128 15.0003L22.6728 12.4003C23.2219 11.9988 23.6302 11.4341 23.8391 10.7867C24.0481 10.1393 24.0472 9.44249 23.8365 8.79569C23.6258 8.1489 23.216 7.58523 22.6658 7.18521C22.1156 6.78519 21.4531 6.56927 20.7728 6.56831H16.3998L15.0728 2.43231C14.8641 1.78126 14.4541 1.21332 13.9018 0.810371C13.3495 0.407422 12.6835 0.190292 11.9998 0.190292C11.3161 0.190292 10.6501 0.407422 10.0978 0.810371C9.54553 1.21332 9.13548 1.78126 8.9268 2.43231L7.5998 6.56831H3.2308C2.55054 6.56927 1.88799 6.78519 1.33778 7.18521C0.787564 7.58523 0.377837 8.1489 0.167118 8.79569C-0.0436018 9.44249 -0.0445344 10.1393 0.164453 10.7867C0.37344 11.4341 0.781657 11.9988 1.3308 12.4003H1.3268Z"
fill="#FFE605"
/>
</g>
<defs>
<clipPath id="clip0_1_97">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
<p class="text-para font-semibold text-xs">4.6</p>
</div>
</div>
</div>
<!-- 2nd food -->
<div
class="shadow-2xl rounded-3xl flex flex-col gap-3 relative py-8 px-6"
>
<div
class="flex items-center justify-center bg-gradient-primary w-[62px] h-[50px] absolute top-0 right-0"
style="border-radius: 0px 37.5px 0px 42.5px"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="fi-sr-heart" clip-path="url(#clip0_1_105)">
<path
id="Vector"
d="M17.5 1.91653C16.3739 1.93405 15.2724 2.24839 14.3068 2.82781C13.3411 3.40722 12.5453 4.2312 12 5.21653C11.4546 4.2312 10.6589 3.40722 9.69323 2.82781C8.72753 2.24839 7.62604 1.93405 6.49999 1.91653C4.70493 1.99453 3.01369 2.77979 1.79577 4.10077C0.577848 5.42175 -0.0677617 7.17106 -1.11917e-05 8.96653C-1.11917e-05 13.5135 4.78599 18.4795 8.79999 21.8465C9.69621 22.5997 10.8293 23.0126 12 23.0126C13.1706 23.0126 14.3038 22.5997 15.2 21.8465C19.214 18.4795 24 13.5135 24 8.96653C24.0677 7.17106 23.4221 5.42175 22.2042 4.10077C20.9863 2.77979 19.295 1.99453 17.5 1.91653Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1_105">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="flex justify-center mb-3">
<img
src="./images/special-cha-3.png"
alt="special-cha-3png"
class="h-[200px] w-[200px]"
/>
</div>
<h1 class="text-lg font-semibold">Orange Cha</h1>
<p class="text-[#555] text-sm font-semibold">
Flavour of orange and tea
</p>
<div class="flex items-center justify-between">
<p class="text-base font-bold">
<span class="text-[#FF6868] text-xs font-semibold">$</span>26.00
</p>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
>
<g clip-path="url(#clip0_1_97)">
<path
d="M1.3268 12.4003L4.8868 15.0003L3.5348 19.1873C3.31631 19.8367 3.31354 20.5393 3.52691 21.1904C3.74027 21.8415 4.15834 22.4062 4.7188 22.8003C5.26965 23.2071 5.93719 23.425 6.62195 23.4216C7.30671 23.4182 7.97204 23.1936 8.5188 22.7813L11.9998 20.2193L15.4818 22.7783C16.0317 23.1828 16.6956 23.4024 17.3782 23.4058C18.0607 23.4091 18.7268 23.1959 19.2806 22.7968C19.8343 22.3977 20.2473 21.8333 20.4601 21.1848C20.6729 20.5362 20.6745 19.8369 20.4648 19.1873L19.1128 15.0003L22.6728 12.4003C23.2219 11.9988 23.6302 11.4341 23.8391 10.7867C24.0481 10.1393 24.0472 9.44249 23.8365 8.79569C23.6258 8.1489 23.216 7.58523 22.6658 7.18521C22.1156 6.78519 21.4531 6.56927 20.7728 6.56831H16.3998L15.0728 2.43231C14.8641 1.78126 14.4541 1.21332 13.9018 0.810371C13.3495 0.407422 12.6835 0.190292 11.9998 0.190292C11.3161 0.190292 10.6501 0.407422 10.0978 0.810371C9.54553 1.21332 9.13548 1.78126 8.9268 2.43231L7.5998 6.56831H3.2308C2.55054 6.56927 1.88799 6.78519 1.33778 7.18521C0.787564 7.58523 0.377837 8.1489 0.167118 8.79569C-0.0436018 9.44249 -0.0445344 10.1393 0.164453 10.7867C0.37344 11.4341 0.781657 11.9988 1.3308 12.4003H1.3268Z"
fill="#FFE605"
/>
</g>
<defs>
<clipPath id="clip0_1_97">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
<p class="text-para font-semibold text-xs">4.8</p>
</div>
</div>
</div>
<!-- 3rd food -->
<div
class="shadow-2xl rounded-3xl flex flex-col gap-3 relative py-8 px-6"
>
<div
class="flex items-center justify-center bg-gradient-primary w-[62px] h-[50px] absolute top-0 right-0"
style="border-radius: 0px 37.5px 0px 42.5px"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="fi-br-heart" clip-path="url(#clip0_1_104)">
<path
id="Vector"
d="M17.25 1.85071C16.2243 1.86063 15.2152 2.11065 14.3035 2.58073C13.3918 3.05081 12.6029 3.72788 12 4.55771C11.397 3.72788 10.6081 3.05081 9.69644 2.58073C8.78476 2.11065 7.77565 1.86063 6.74996 1.85071C4.89173 1.92491 3.13848 2.73189 1.87358 4.09517C0.608672 5.45846 -0.0649657 7.26713 -4.03235e-05 9.12571C-4.03235e-05 13.6777 4.67396 18.5507 8.59996 21.8377C9.55329 22.6393 10.7589 23.0788 12.0045 23.0788C13.25 23.0788 14.4556 22.6393 15.409 21.8377C19.331 18.5507 24.009 13.6777 24.009 9.12571C24.0738 7.26563 23.399 5.45564 22.1322 4.0921C20.8653 2.72856 19.1098 1.9226 17.25 1.85071ZM13.477 19.5387C13.0634 19.8869 12.5401 20.0779 11.9995 20.0779C11.4588 20.0779 10.9355 19.8869 10.522 19.5387C5.74196 15.5307 2.99996 11.7357 2.99996 9.12571C2.9362 8.06292 3.29424 7.01789 3.99634 6.21749C4.69844 5.4171 5.68793 4.92596 6.74996 4.85071C7.81199 4.92596 8.80148 5.4171 9.50358 6.21749C10.2057 7.01789 10.5637 8.06292 10.5 9.12571C10.5 9.52353 10.658 9.90506 10.9393 10.1864C11.2206 10.4677 11.6021 10.6257 12 10.6257C12.3978 10.6257 12.7793 10.4677 13.0606 10.1864C13.3419 9.90506 13.5 9.52353 13.5 9.12571C13.4362 8.06292 13.7942 7.01789 14.4963 6.21749C15.1984 5.4171 16.1879 4.92596 17.25 4.85071C18.312 4.92596 19.3015 5.4171 20.0036 6.21749C20.7057 7.01789 21.0637 8.06292 21 9.12571C21 11.7357 18.258 15.5307 13.477 19.5387Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1_104">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="flex justify-center mb-3">
<img
src="./images/special-cha-2.png"
alt="special-cha-2.png"
class="h-[200px] w-[200px]"
/>
</div>
<h1 class="text-lg font-semibold">Bubble Cha</h1>
<p class="text-[#555] text-sm font-semibold">
Bubbles with tradional flavour
</p>
<div class="flex items-center justify-between">
<p class="text-base font-bold">
<span class="text-[#FF6868] text-xs font-semibold">$</span>23.00
</p>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
>
<g clip-path="url(#clip0_1_97)">
<path
d="M1.3268 12.4003L4.8868 15.0003L3.5348 19.1873C3.31631 19.8367 3.31354 20.5393 3.52691 21.1904C3.74027 21.8415 4.15834 22.4062 4.7188 22.8003C5.26965 23.2071 5.93719 23.425 6.62195 23.4216C7.30671 23.4182 7.97204 23.1936 8.5188 22.7813L11.9998 20.2193L15.4818 22.7783C16.0317 23.1828 16.6956 23.4024 17.3782 23.4058C18.0607 23.4091 18.7268 23.1959 19.2806 22.7968C19.8343 22.3977 20.2473 21.8333 20.4601 21.1848C20.6729 20.5362 20.6745 19.8369 20.4648 19.1873L19.1128 15.0003L22.6728 12.4003C23.2219 11.9988 23.6302 11.4341 23.8391 10.7867C24.0481 10.1393 24.0472 9.44249 23.8365 8.79569C23.6258 8.1489 23.216 7.58523 22.6658 7.18521C22.1156 6.78519 21.4531 6.56927 20.7728 6.56831H16.3998L15.0728 2.43231C14.8641 1.78126 14.4541 1.21332 13.9018 0.810371C13.3495 0.407422 12.6835 0.190292 11.9998 0.190292C11.3161 0.190292 10.6501 0.407422 10.0978 0.810371C9.54553 1.21332 9.13548 1.78126 8.9268 2.43231L7.5998 6.56831H3.2308C2.55054 6.56927 1.88799 6.78519 1.33778 7.18521C0.787564 7.58523 0.377837 8.1489 0.167118 8.79569C-0.0436018 9.44249 -0.0445344 10.1393 0.164453 10.7867C0.37344 11.4341 0.781657 11.9988 1.3308 12.4003H1.3268Z"
fill="#FFE605"
/>
</g>
<defs>
<clipPath id="clip0_1_97">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
<p class="text-para font-semibold text-xs">4.5</p>
</div>
</div>
</div>
<!-- 4th food -->
<div
class="shadow-2xl rounded-3xl flex flex-col gap-3 relative py-8 px-6"
>
<div
class="flex items-center justify-center bg-gradient-primary w-[62px] h-[50px] absolute top-0 right-0"
style="border-radius: 0px 37.5px 0px 42.5px"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="fi-br-heart" clip-path="url(#clip0_1_104)">
<path
id="Vector"
d="M17.25 1.85071C16.2243 1.86063 15.2152 2.11065 14.3035 2.58073C13.3918 3.05081 12.6029 3.72788 12 4.55771C11.397 3.72788 10.6081 3.05081 9.69644 2.58073C8.78476 2.11065 7.77565 1.86063 6.74996 1.85071C4.89173 1.92491 3.13848 2.73189 1.87358 4.09517C0.608672 5.45846 -0.0649657 7.26713 -4.03235e-05 9.12571C-4.03235e-05 13.6777 4.67396 18.5507 8.59996 21.8377C9.55329 22.6393 10.7589 23.0788 12.0045 23.0788C13.25 23.0788 14.4556 22.6393 15.409 21.8377C19.331 18.5507 24.009 13.6777 24.009 9.12571C24.0738 7.26563 23.399 5.45564 22.1322 4.0921C20.8653 2.72856 19.1098 1.9226 17.25 1.85071ZM13.477 19.5387C13.0634 19.8869 12.5401 20.0779 11.9995 20.0779C11.4588 20.0779 10.9355 19.8869 10.522 19.5387C5.74196 15.5307 2.99996 11.7357 2.99996 9.12571C2.9362 8.06292 3.29424 7.01789 3.99634 6.21749C4.69844 5.4171 5.68793 4.92596 6.74996 4.85071C7.81199 4.92596 8.80148 5.4171 9.50358 6.21749C10.2057 7.01789 10.5637 8.06292 10.5 9.12571C10.5 9.52353 10.658 9.90506 10.9393 10.1864C11.2206 10.4677 11.6021 10.6257 12 10.6257C12.3978 10.6257 12.7793 10.4677 13.0606 10.1864C13.3419 9.90506 13.5 9.52353 13.5 9.12571C13.4362 8.06292 13.7942 7.01789 14.4963 6.21749C15.1984 5.4171 16.1879 4.92596 17.25 4.85071C18.312 4.92596 19.3015 5.4171 20.0036 6.21749C20.7057 7.01789 21.0637 8.06292 21 9.12571C21 11.7357 18.258 15.5307 13.477 19.5387Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1_104">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="flex justify-center mb-3">
<img
src="./images/special-cha-1.png"
alt="special-cha-1.png"
class="h-[200px] w-[200px]"
/>
</div>
<h1 class="text-lg font-semibold">Mixed Cha</h1>
<p class="text-[#555] text-sm font-semibold">
Mixing of 3 flavour cha
</p>
<div class="flex items-center justify-between">
<p class="text-base font-bold">
<span class="text-[#FF6868] text-xs font-semibold">$</span>24.00
</p>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
>
<g clip-path="url(#clip0_1_97)">
<path
d="M1.3268 12.4003L4.8868 15.0003L3.5348 19.1873C3.31631 19.8367 3.31354 20.5393 3.52691 21.1904C3.74027 21.8415 4.15834 22.4062 4.7188 22.8003C5.26965 23.2071 5.93719 23.425 6.62195 23.4216C7.30671 23.4182 7.97204 23.1936 8.5188 22.7813L11.9998 20.2193L15.4818 22.7783C16.0317 23.1828 16.6956 23.4024 17.3782 23.4058C18.0607 23.4091 18.7268 23.1959 19.2806 22.7968C19.8343 22.3977 20.2473 21.8333 20.4601 21.1848C20.6729 20.5362 20.6745 19.8369 20.4648 19.1873L19.1128 15.0003L22.6728 12.4003C23.2219 11.9988 23.6302 11.4341 23.8391 10.7867C24.0481 10.1393 24.0472 9.44249 23.8365 8.79569C23.6258 8.1489 23.216 7.58523 22.6658 7.18521C22.1156 6.78519 21.4531 6.56927 20.7728 6.56831H16.3998L15.0728 2.43231C14.8641 1.78126 14.4541 1.21332 13.9018 0.810371C13.3495 0.407422 12.6835 0.190292 11.9998 0.190292C11.3161 0.190292 10.6501 0.407422 10.0978 0.810371C9.54553 1.21332 9.13548 1.78126 8.9268 2.43231L7.5998 6.56831H3.2308C2.55054 6.56927 1.88799 6.78519 1.33778 7.18521C0.787564 7.58523 0.377837 8.1489 0.167118 8.79569C-0.0436018 9.44249 -0.0445344 10.1393 0.164453 10.7867C0.37344 11.4341 0.781657 11.9988 1.3308 12.4003H1.3268Z"
fill="#FFE605"
/>
</g>
<defs>
<clipPath id="clip0_1_97">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
<p class="text-para font-semibold text-xs">4.7</p>
</div>
</div>
</div>
<!-- food end -->
</div>
</section>
<!-- about us section -->
<section
class="w-full mx-auto my-40 grid lg:grid-cols-2 grid-cols-1 row-auto items-center gap-16"
>
<div class="grid grid-cols-2 grid-rows-3 gap-6">
<div
class="bg-gradient-1 row-start-1 row-end-2 opacity-10 rounded-xl"
></div>
<div
class="bg-[#57763a1a] row-start-1 row-end-3 rounded-xl px-6 py-10 flex items-center justify-center"
>
<img src="./images/fresh-1.png" alt="fresh-1.png" />
</div>
<div
class="bg-[#e6a6231a] row-start-2 row-end-4 rounded-xl px-6 py-10 flex items-center justify-center"
>
<img src="./images/fresh-2.png" alt="fresh-2.png" />
</div>
<div class="bg-gradient-4 row-start-3 row-end-4 rounded-xl"></div>
</div>
<div class="flex flex-col gap-8">
<h1 class="text-[#1C1C1C] text-5xl font-extrabold">
Great Tea, Freshly Presented
</h1>
<p class="text-[#777] font-medium leading-[28px]">
The meaning of gong cha is chanese is to provide the best tea to
emperor from all possessions . It represents the highest quality and
self expectation. Establishing in 2006, Gong cha had been deeply
appreciated by its custoers because of good words of mouth and
unique customized service orginated from Taiwan.
</p>
<div>
<h1 class="text-[#1c1c1c] text-xl font-extrabold mb-2">
Unique Taste
</h1>
<p class="text-[#777] font-medium leading-[28px]">
A Unique and different style from other teapots gives a luxurious
and minimalist impression
</p>
</div>
<div>
<h1 class="text-[#1c1c1c] text-xl font-extrabold mb-2">
Premium Quality
</h1>
<p class="text-[#777] font-medium leading-[28px]">
Premium Quality that makes tea more elegant and more durable when
you use it.
</p>
</div>
</div>
</section>
<!-- review section -->
<section
class="w-full h-auto my-40 mx-auto bg-gradient-primary rounded-2xl relative grid lg:grid-cols-2 grid-cols-1 row-auto items-center lg:gap-16 gap-8"
>
<div class="w-full lg:px-12 px-8 py-10">
<img
src="./images/review-logo.svg"
alt="review-logo.svg"
class="absolute lg:bottom-6 lg:left-60 bottom-40 z-10"
/>
<h1
class="text-[#F4F4F4] text-2xl lg:text-5xl font-extrabold leading-[60px]"
>
Meet Our Super Clients
</h1>
<p class="text-[#f4f4f4] font-medium leading-[28px] my-5 lg:my-10">
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly
believable.
</p>
<div
class="lg:px-6 px-4 lg:py-4 py-3 rounded-lg bg-white inline-flex"
>
<button
class="bg-clip-text text-transparent bg-gradient-to-r from-[#F00] to-[#FF8938] lg:text-xl text-sm font-bold"
>
Show All
</button>
</div>
</div>
<div class="lg:px-16 px-8 pb-16 lg:pb-0">
<div
class="relative lg:opacity-30 opacity-20 z-10 lg:top-20 top-32 hidden lg:block"
>
<img
src="./images/client.png"
alt="client.png"
class="ring-4 ring-white rounded-full absolute -top-8 -left-6"
/>
<div
class="bg-white px-10 py-6 inline-flex flex-col gap-6 rounded-2xl"
>
<p class="text-[#777] font-medium leading-[28px]">
We are providing the best and suitable home insurance services
for the people who are interested to treatment
</p>
<div>
<h1 class="text-[#1c1c1c] font-xl font-extrabold">
Ilham Yuda
</h1>
<p class="text-[#777] font-medium">Businessman</p>
</div>
</div>
</div>
<!-- 2nd -->
<div class="relative z-20 lg:-left-16 left-0 right-0">
<img
src="./images/client.png"
alt="client.png"
class="ring-4 ring-white rounded-full absolute lg:-top-8 lg:-left-6 -right-4 -top-6"
/>
<div
class="bg-white px-10 py-6 inline-flex flex-col gap-6 rounded-2xl"
>
<p class="text-[#777] font-medium leading-[28px]">
We are providing the best and suitable home insurance services
for the people who are interested to treatment
</p>
<div class="flex justify-between items-center">
<div>
<h1 class="text-[#1c1c1c] font-xl font-extrabold">
Ilham Yuda
</h1>
<p class="text-[#777] font-medium">Businessman</p>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
>
<circle cx="12.5" cy="3.64111" r="3.5" fill="#A2BDF6" />
<circle cx="3.5" cy="11.6411" r="3.5" fill="#A2BDF6" />
<circle cx="21.5" cy="11.6411" r="3.5" fill="#EDB7D5" />
<circle cx="12.5" cy="19.6411" r="3.5" fill="#EDB7D5" />
</svg>
</div>
</div>
</div>
<!-- 3rd -->
<div
class="relative lg:opacity-30 opacity-20 z-10 lg:-top-20 -top-24 hidden lg:block"
>
<img
src="./images/client.png"
alt="client.png"
class="ring-4 ring-white rounded-full absolute -top-8 -left-6"
/>
<div
class="bg-white px-5 lg:px-10 lg:py-6 py-3 inline-flex flex-col lg:gap-6 gap-3 rounded-2xl"
>
<p class="text-[#777] font-medium leading-[28px]">
We are providing the best and suitable home insurance services
for the people who are interested to treatment
</p>
<div>
<h1 class="text-[#1c1c1c] font-xl font-extrabold">
Ilham Yuda
</h1>
<p class="text-[#777] font-medium">Businessman</p>
</div>
</div>
</div>
</div>
</section>
<!-- news and event section -->
<section class="w-full mx-auto my-40">
<h1 class="text-center text-4xl lg:text-5xl font-extrabold">
News & Events
</h1>
<p
class="text-center text-[#777] font-medium lg:w-[65%] mx-auto mt-6 mb-16"
>
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly believable.
</p>
<div
class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 row-auto gap-16"
>
<!-- 1st -->
<div
class="border border-[#D2D2D2] rounded-xl px-4 flex flex-col items-center py-4"
>
<div class="">
<img
src="./images/news-1.png"
alt="news-1.png"
class="object-cover"
/>
</div>
<div class="px-3 flex flex-col gap-3 py-3">
<p class="text-[#777] font-medium">Jan 21, 2024</p>
<h1 class="text-[#1c1c1c] font-extrabold text-xl">
Collecting 8 points for discount
</h1>
<p class="text-[#777] font-medium">
There are many variations of passages of Lorem Ipsum available.
</p>
<p class="text-sm font-extrabold">Learn More</p>
</div>
</div>
<!-- 2nd -->
<div
class="border border-[#D2D2D2] rounded-xl px-4 flex flex-col items-center py-4"
>
<div class="">
<img
src="./images/news-2.png"
alt="news-2.png"
class="object-cover"
/>
</div>
<div class="px-3 flex flex-col gap-3 py-3">
<p class="text-[#777] font-medium">Jan 21, 2024</p>
<h1 class="text-[#1c1c1c] font-extrabold text-xl">
Collecting 8 points for discount
</h1>
<p class="text-[#777] font-medium">
There are many variations of passages of Lorem Ipsum available.
</p>
<p class="text-sm font-extrabold">Learn More</p>
</div>
</div>
<!-- 3rd -->
<div
class="border border-[#D2D2D2] rounded-xl px-4 flex flex-col items-center py-4"
>
<div class="">
<img
src="./images/news-3.png"
alt="news-3.png"
class="object-cover"
/>
</div>
<div class="px-3 flex flex-col gap-3 py-3">
<p class="text-[#777] font-medium">Jan 21, 2024</p>
<h1 class="text-[#1c1c1c] font-extrabold text-xl">
Collecting 8 points for discount
</h1>
<p class="text-[#777] font-medium">
There are many variations of passages of Lorem Ipsum available.
</p>
<p class="text-sm font-extrabold">Learn More</p>
</div>
</div>
<!-- end -->
</div>
</section>
<!-- faq section -->
<section
class="w-full mx-auto my-20 grid grid-cols-1 lg:grid-cols-2 row-auto gap-16 items-center"
>
<div>
<img src="./images/faq.png" alt="faq.png" />
</div>
<div>
<h1 class="text-4xl lg:text-5xl font-extrabold">FAQ</h1>
<p class="text-[#777] font-medium mx-auto mt-6 mb-8">
You can explore some frequintly asked questions of ours.
</p>
<div class="collapse collapse-plus bg-base-200">
<input type="radio" name="my-accordion-3" checked="checked" />
<div class="collapse-title text-xl font-medium">
What is JohuTea known for?
</div>
<div class="collapse-content">
<p>
JohuTea is known for offering a diverse range of high-quality