Skip to content

Commit 36d802e

Browse files
AyanavaKarmakarAyanavaKarmakar
authored
feat: added feature cards on Landing Page + make the "Go Back to Homepage" button change to darker color on hover (#63)
Closes #64 ## Checklist - [x] I have followed every step in the [contributing guide](https://github.com/Pujo-Atlas-Kolkata/PujoAtlasKol-Web/blob/dev/CONTRIBUTING.md) - [x] The PR title follows the convention we established [conventional-commit](https://www.conventionalcommits.org/en/v1.0.0/) - [x] I performed a functional test on my final commit --- ## Changelog - added pulse animation to `*` in home page subheading - added scroll down indicator below image carousel - added feature cards below image carousel - made the sidenav on large screens sticky - changed color of 404 button - added hover effect on "Go back to homepage button" - which changes button color --- ## Screenshots ![deploy-preview-63--pujoatlas netlify app_(Nest Hub Max)](https://github.com/user-attachments/assets/7fd5a5d6-7cc7-4bbc-89da-45dfe45c8b28) ![deploy-preview-63--pujoatlas netlify app_(iPhone SE)](https://github.com/user-attachments/assets/192950d3-eab3-4527-9d8d-77466c303e39) ![deploy-preview-63--pujoatlas netlify app_2(Nest Hub Max)](https://github.com/user-attachments/assets/f02ba8dc-09b1-437d-ab87-47e9adb98a1c)
2 parents 567ccb1 + db23aad commit 36d802e

File tree

4 files changed

+163
-7
lines changed

4 files changed

+163
-7
lines changed

‎src/components/Carousel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Carousel = () => {
2424
slideWidth,
2525
'[--slide-spacing:0] lg:[--slide-spacing:2rem]',
2626
'[--slide-height:5rem] lg:[--slide-height:20rem]',
27-
'w-full mx-auto grid place-items-center relative',
27+
'w-full mx-auto grid place-items-center relative pb-4',
2828
)}
2929
>
3030
<ControlButton

‎src/layouts/Layout.astro

+4-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,10 @@ const {
6969
>
7070
<Header />
7171
<div class="flex flex-1">
72-
<aside class="hidden lg:grid place-items-center">
73-
<LargeNavbar path={currentPath} />
72+
<aside class="hidden lg:grid place-items-center relative px-10">
73+
<span class="fixed top-1/2 -translate-y-1/2">
74+
<LargeNavbar path={currentPath} />
75+
</span>
7476
</aside>
7577
<slot />
7678
</div>

‎src/pages/404.astro

+5-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ import { cn } from '@/libs/utils';
1414
<h1 class="text-8xl lg:text-9xl font-bold text-center">404!</h1>
1515
<p class="font-work text-center">Uh oh! Looks like you lost your way.</p>
1616
<a
17-
class={cn('italic flex py-1 lg:px-20 px-6 text-center', 'rounded-full outline outline-1')}
17+
class={cn(
18+
'italic flex py-1 lg:px-20 px-6 text-center',
19+
'rounded-full outline outline-1',
20+
'bg-orange-200 hover:bg-orange-300',
21+
)}
1822
href="/"
1923
>
2024
Go back to homepage -&gt;

‎src/pages/index.astro

+153-3
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,27 @@ import { Carousel } from '@/components/Carousel';
33
import { PlaystoreIcon } from '@/icons';
44
import Layout from '@/layouts/Layout.astro';
55
import { cn } from '@/libs/utils';
6+
import { FaChevronDown } from 'react-icons/fa';
67
---
78

89
<Layout>
910
<main
1011
class={cn(
1112
'flex-1 flex flex-col gap-3 gap-y-3 lg:gap-y-0 lg:gap-6',
1213
'bg-primary-background p-3 lg:p-4 lg:py-12 lg:px-20',
13-
'rounded-l-xl shadow-l-xl overflow-y-auto',
14+
'rounded-l-xl shadow-l-xl overflow-y-auto scroll-smooth',
1415
)}
1516
>
1617
<h1 class="font-work font-semibold text-[55px] lg:text-6xl pt-0 text-center lg:text-left">
1718
Pujo Atlas
1819
</h1>
1920
<p class="block lg:hidden font-work text-center leading-5">
20-
The most advanced <br /> pandal hopping experience*
21+
The most advanced <br /> pandal hopping experience<span class="motion-safe:animate-pulse"
22+
>*</span
23+
>
2124
</p>
2225
<p class="hidden lg:block font-work text-left leading-normal">
23-
The most advanced pandal hopping experience*
26+
The most advanced pandal hopping experience<span class="animate-pulse">*</span>
2427
</p>
2528
<span class="flex justify-center items-center lg:block">
2629
<div
@@ -37,6 +40,153 @@ import { cn } from '@/libs/utils';
3740
</span>
3841
<div class="h-[500px]">
3942
<Carousel client:load client:only="react" />
43+
<a href="#features" aria-label="scroll to features section">
44+
<FaChevronDown className="h-8 lg:h-12 w-8 mx-auto motion-safe:animate-bounce" />
45+
</a>
46+
</div>
47+
<span id="features"></span>
48+
<section
49+
class={cn(
50+
'w-full p-8 mt-5 lg:mt-auto text-amber-950 cursor-pointer',
51+
'bg-primary hover:bg-[#ffe5b0]',
52+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
53+
'border-4 border-amber-950 rounded-lg',
54+
'transition-all duration-300 ease-in-out transform-gpu',
55+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
56+
)}
57+
>
58+
<span
59+
class={cn(
60+
'font-work font-bold text-3xl',
61+
'bg-orange-300 rounded-md px-[2px] py-0.5 whitespace-nowrap',
62+
)}>What is Pujo Atlas?</span
63+
><br /><br />
64+
<span class="font-semibold text-lg lg:text-xl leading-none lg:leading-normal"
65+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Pujo Atlas</span> is your
66+
ultimate guide for Pandal Hopping during Durga Puja in Kolkata! This open-source project aims
67+
to provide a comprehensive and user-friendly webapp that lists all the Durga Pujas happening
68+
around Kolkata and offers a host of features to make your pandal hopping experience seamless
69+
and enjoyable.</span
70+
>
71+
</section>
72+
73+
<div class="flex flex-col lg:flex-row gap-4">
74+
<section
75+
class={cn(
76+
'w-full p-8 text-amber-950 cursor-pointer',
77+
'bg-primary hover:bg-[#ffe5b0]',
78+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
79+
'border-4 border-amber-950 rounded-lg',
80+
'transition-all duration-300 ease-in-out transform-gpu',
81+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
82+
)}
83+
>
84+
<span class={cn('font-work font-bold text-3xl', 'bg-orange-300 rounded-md px-[2px] py-0.5')}
85+
>Pandal Listings</span
86+
><br /><br />
87+
<span class="font-sans font-semibold text-lg lg:text-xl leading-none lg:leading-normal"
88+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
89+
>Categorized Lists</span
90+
> Discover pandals based on popularity, themes, and locality<br />
91+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
92+
>Ratings and Reviews</span
93+
> Check out user ratings and reviews to choose the best pandals<br />
94+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Favourites</span> Save your
95+
favourite pandals for quick access<br /></span
96+
>
97+
</section>
98+
<section
99+
class={cn(
100+
'w-full p-8 text-amber-950 cursor-pointer',
101+
'bg-primary hover:bg-[#ffe5b0]',
102+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
103+
'border-4 border-amber-950 rounded-lg',
104+
'transition-all duration-300 ease-in-out transform-gpu',
105+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
106+
)}
107+
>
108+
<span class={cn('font-work font-bold text-3xl', 'bg-orange-300 rounded-md px-[2px] py-0.5')}
109+
>Map Integration</span
110+
><br /><br />
111+
<span class="font-sans font-semibold text-lg lg:text-xl leading-none lg:leading-normal"
112+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Interactive Map</span>
113+
View the locations of all listed pandals on an interactive map<br />
114+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Navigation</span> Get directions
115+
and the best routes using public transport or walking<br />
116+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
117+
>Real-time Traffic Updates</span
118+
> Avoid traffic and enjoy a smoother pandal hopping experience<br /></span
119+
>
120+
</section>
40121
</div>
122+
123+
<div class="flex flex-col lg:flex-row gap-4">
124+
<section
125+
class={cn(
126+
'w-full p-8 text-amber-950 cursor-pointer',
127+
'bg-primary hover:bg-[#ffe5b0]',
128+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
129+
'border-4 border-amber-950 rounded-lg',
130+
'transition-all duration-300 ease-in-out transform-gpu',
131+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
132+
)}
133+
>
134+
<span class={cn('font-work font-bold text-3xl', 'bg-orange-300 rounded-md px-[2px] py-0.5')}
135+
>Medical Help</span
136+
><br /><br />
137+
<span class="font-sans font-semibold text-lg lg:text-xl leading-none lg:leading-normal"
138+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
139+
>Nearby Hospitals and Clinics</span
140+
> Find locations and contact details of nearby healthcare facilities<br />
141+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">First Aid Tips</span> Access
142+
basic first aid tips for common health issues during pandal hopping<br /></span
143+
>
144+
</section>
145+
<section
146+
class={cn(
147+
'w-full p-8 text-amber-950 cursor-pointer',
148+
'bg-primary hover:bg-[#ffe5b0]',
149+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
150+
'border-4 border-amber-950 rounded-lg',
151+
'transition-all duration-300 ease-in-out transform-gpu',
152+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
153+
)}
154+
>
155+
<span class={cn('font-work font-bold text-3xl', 'bg-orange-300 rounded-md px-[2px] py-0.5')}
156+
>Bites and Meals</span
157+
><br /><br />
158+
<span class="font-sans font-semibold text-lg lg:text-xl leading-none lg:leading-normal"
159+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Nearby Eateries</span>
160+
Discover restaurants and food stalls near pandals<br />
161+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
162+
>Cuisines and Specialties</span
163+
> Explore local delicacies and must-try dishes<br />
164+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">User Reviews</span> Read
165+
user ratings and reviews of food places<br /></span
166+
>
167+
</section>
168+
</div>
169+
170+
<section
171+
class={cn(
172+
'w-full p-8 text-amber-950 cursor-pointer',
173+
'bg-primary hover:bg-[#ffe5b0]',
174+
'shadow-[2px_5px_1px_0px] shadow-amber-950',
175+
'border-4 border-amber-950 rounded-lg',
176+
'transition-all duration-300 ease-in-out transform-gpu',
177+
'hover:scale-[1.01] hover:shadow-[2px_6px_2px_0px]',
178+
)}
179+
>
180+
<span class={cn('font-work font-bold text-3xl', 'bg-orange-300 rounded-md px-[2px] py-0.5')}
181+
>Festive Highlights</span
182+
><br /><br />
183+
<span class="font-sans font-semibold text-lg lg:text-xl leading-none lg:leading-loose"
184+
><span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5">Cultural Programs</span>
185+
Stay updated on cultural events happening in various pandals<br />
186+
<span class="font-extrabold bg-red-300 rounded-md px-[2px] py-0.5"
187+
>Workshops and Competitions</span
188+
> Get details of workshops, competitions, and other activities<br /></span
189+
>
190+
</section>
41191
</main>
42192
</Layout>

0 commit comments

Comments
 (0)