Skip to content

feat: landing page section animations #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Smartlify07 merged 2 commits into from
Aug 10, 2026
Merged

feat: landing page section animations #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bb1169
feat: add GSAP scroll-stepper to practical pathways and animate empow…
Smartlify07 Aug 10, 2026
5b448bf
feat: add directional slide transitions to community stories
Smartlify07 Aug 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"date-fns": "^4.4.0",
"dotenv": "^17.4.2",
"drizzle-orm": "^0.45.2",
"gsap": "^3.15.0",
"lucide-react": "^1.17.0",
"motion": "^12.42.0",
"next": "16.2.6",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

218 changes: 150 additions & 68 deletions src/features/marketing/components/empowerment-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar"
import { ChevronDown, Gift, Star, Stethoscope } from "lucide-react"
import { motion } from "motion/react"
import Image from "next/image"
import { useEffect, useState } from "react"

Expand All @@ -13,7 +14,7 @@ export function EmpowermentSection() {
<h1 className="text-center">Empowering People to Move Forward</h1>
</header>

<div className="grid gap-10 lg:grid-cols-3 lg:items-end lg:gap-10">
<div className="grid gap-10 sm:grid-cols-3 sm:items-end sm:gap-10">
<RestoreHopeCard />
<BuildIndependenceCard />
<NeverNavigateAloneCard />
Expand All @@ -34,16 +35,43 @@ export function RestoreHopeCard() {
</p>
</div>

<div className="h-[272px] translate-y-10 rounded-t-2xl bg-white px-4 py-5 2xl:w-[340px]">
<h1 className="mb-5 text-lg font-bold">Get the support you need</h1>
<motion.div
initial={{ y: 160 }}
whileInView={{ y: 40 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.7, ease: "easeOut" }}
className="h-[272px] rounded-t-2xl bg-white px-4 py-5 2xl:w-[340px]"
>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 1.5, duration: 0.5 }}
>
<h1 className="mb-5 text-lg font-bold">Get the support you need</h1>
</motion.div>
<div className="flex flex-col gap-2">
<Field
label="Support type"
placeholder="Consultation + travel assistance"
/>
<Field label="Estimated cost" placeholder="$750-$1,250" />
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 1.8, duration: 0.5 }}
>
<Field
label="Support type"
placeholder="Consultation + travel assistance"
/>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 2.1, duration: 0.5 }}
>
<Field label="Estimated cost" placeholder="$750-$1,250" />
</motion.div>
</div>
</div>
</motion.div>
</div>
)
}
Expand All @@ -61,70 +89,105 @@ export function NeverNavigateAloneCard() {
</p>
</div>

<div className="h-[272px] translate-y-10 overflow-hidden rounded-t-2xl bg-white px-4 py-5 2xl:w-[340px]">
<h1 className="mb-5 text-lg font-bold">Connect to a specialist</h1>
<motion.div
initial={{ y: 160 }}
whileInView={{ y: 40 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.7, ease: "easeOut" }}
className="h-[272px] overflow-hidden rounded-t-2xl bg-white px-4 py-5 2xl:w-[340px]"
>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 1.5, duration: 0.5 }}
>
<h1 className="mb-5 text-lg font-bold">Connect to a specialist</h1>
</motion.div>

<div className="grid gap-2.5">
<div className="flex items-start gap-2 p-2.5">
<Avatar className="size-12 shrink-0">
<AvatarImage src="/figma-home/M-Anderson.png" />
<AvatarFallback>MA</AvatarFallback>
</Avatar>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-0.5">
<h2 className="text-sm font-semibold text-primary">
Dr. M. Anderson
</h2>
<p className="text-xs text-muted-foreground">
Washington D.C, USA
</p>
</div>

<div className="flex items-center gap-3">
<div className="flex items-center gap-1 text-xs text-primary">
<Star
className="shrink-0 fill-[#F8BD00] text-[#F8BD00]"
size={20}
/>{" "}
5.0
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 1.8, duration: 0.5 }}
>
<div className="flex items-start gap-2 p-2.5">
<Avatar className="size-12 shrink-0">
<AvatarImage
fetchPriority="high"
src="/figma-home/M-Anderson.png"
/>
<AvatarFallback>MA</AvatarFallback>
</Avatar>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-0.5">
<h2 className="text-sm font-semibold text-primary">
Dr. M. Anderson
</h2>
<p className="text-xs text-muted-foreground">
Washington D.C, USA
</p>
</div>
<div className="flex shrink-0 items-center gap-2 text-xs text-primary">
<Stethoscope className="shrink-0" size={20} /> 80 Surgeries/yr

<div className="flex items-center gap-3">
<div className="flex items-center gap-1 text-xs text-primary">
<Star
className="shrink-0 fill-[#F8BD00] text-[#F8BD00]"
size={20}
/>{" "}
5.0
</div>
<div className="flex shrink-0 items-center gap-2 text-xs text-primary">
<Stethoscope className="shrink-0" size={20} /> 80
Surgeries/yr
</div>
</div>
</div>
</div>
</div>
<div className="flex items-start gap-2 p-2.5">
<Avatar className="size-12 shrink-0">
<AvatarImage src="/figma-home/A-Rivera.png" />
<AvatarFallback>AR</AvatarFallback>
</Avatar>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-0.5">
<h2 className="text-sm font-semibold text-primary">
Dr. A. Rivera
</h2>
<p className="text-xs text-muted-foreground">
Washington D.C, USA
</p>
</div>

<div className="flex items-center gap-3">
<div className="flex items-center gap-1 text-xs text-primary">
<Star
className="shrink-0 fill-[#F8BD00] text-[#F8BD00]"
size={20}
/>{" "}
5.0
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 2.1, duration: 0.5 }}
>
<div className="flex items-start gap-2 p-2.5">
<Avatar className="size-12 shrink-0">
<AvatarImage
fetchPriority="high"
src="/figma-home/A-Rivera.png"
/>
<AvatarFallback>AR</AvatarFallback>
</Avatar>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-0.5">
<h2 className="text-sm font-semibold text-primary">
Dr. A. Rivera
</h2>
<p className="text-xs text-muted-foreground">
Washington D.C, USA
</p>
</div>
<div className="flex shrink-0 items-center gap-2 text-xs text-primary">
<Stethoscope className="shrink-0" size={20} /> 80 Surgeries/yr

<div className="flex items-center gap-3">
<div className="flex items-center gap-1 text-xs text-primary">
<Star
className="shrink-0 fill-[#F8BD00] text-[#F8BD00]"
size={20}
/>{" "}
5.0
</div>
<div className="flex shrink-0 items-center gap-2 text-xs text-primary">
<Stethoscope className="shrink-0" size={20} /> 80
Surgeries/yr
</div>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</motion.div>
</div>
)
}
Expand All @@ -141,16 +204,29 @@ export function BuildIndependenceCard() {
strengthen financial resilience
</p>
</div>
<div className="relative flex h-[375px] translate-y-10 items-center justify-center rounded-t-2xl bg-[#201063] px-4 py-5 2xl:w-[340px]">
<motion.div
initial={{ y: 280 }}
whileInView={{ y: 40 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.7, ease: "easeOut" }}
className="relative flex h-[375px] items-center justify-center rounded-t-2xl bg-[#201063] px-4 py-5 2xl:w-[340px]"
>
<Image
src="/figma-home/girl-with-phone.png"
alt="A girl with a phone wearing a blue shirt"
width={235}
height={340}
className="translate-y-8"
priority
/>

<div className="absolute top-[14%] -right-4 flex h-14 w-[174px] justify-between rounded-sm bg-white p-2.5">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.4, duration: 0.5 }}
className="absolute top-[14%] -right-4 flex h-14 w-[174px] justify-between rounded-sm bg-white p-2.5"
>
<div>
<h3 className="mb-0.5 text-[8px] font-semibold text-primary">
Week 2: AI, Economic Mobility
Expand All @@ -161,9 +237,15 @@ export function BuildIndependenceCard() {
<div className="flex size-3.5 items-center justify-center rounded-full border text-primary">
<ChevronDown size={7} />
</div>
</div>
</motion.div>

<div className="absolute bottom-12 -left-4 flex h-14 w-[174px] justify-between rounded-sm bg-white p-2.5">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.55, duration: 0.5 }}
className="absolute bottom-12 -left-4 flex h-14 w-[174px] justify-between rounded-sm bg-white p-2.5"
>
<div>
<h3 className="mb-0.5 text-[8px] font-semibold text-primary">
Week 2: AI Productivity and Prompting
Expand All @@ -174,8 +256,8 @@ export function BuildIndependenceCard() {
<div className="flex size-3.5 items-center justify-center rounded-full border text-primary">
<ChevronDown size={7} />
</div>
</div>
</div>
</motion.div>
</motion.div>
</div>
)
}
Expand Down
Loading