HERO ANIMATION
The hero animation is extremely important.
On initial page load:
- The page begins with the deep purple background.
- The white page/card composition appears.
- Hero elements animate into position.
- The large “Welcome To Spark” typography settles into place.
- The phone/device enters smoothly.
- Floating elements subtly move into their final positions.
- App buttons appear after the primary hero content.
Use smooth premium easing.
Do NOT use:
- bouncing animations
- excessive spring effects
- random rotations
- aggressive zooms
- generic fade-in for everything
Use controlled editorial motion.
Recommended motion characteristics:
- duration around 0.7–1.2 seconds
- ease-out / custom cubic-bezier
- subtle opacity transitions
- small translate/scale movement
- staggered entrances
7. HOW IT WORKS SECTION
After the hero, transition into the next section.
The video shows a large white rounded card.
Center the typography:
How it
works
The word works is placed inside a vivid purple rounded pill.
Behind/around it is a soft purple circular glow.
There is also a small floating icon on the left.
The visual should look almost like a kinetic typography animation.
Animation:
- “How it” enters first
- “works” slides/scales into position
- purple glow expands behind it
- small icon floats into position
- entire composition settles
The glow must be soft and blurred, not a hard neon effect.
8. ONE SIMPLE HACK SECTION
Next section:
Large heading:
One simple hack.
Below it:
Many browser benefits.
The second line should be visually lighter/smaller.
The section contains multiple white cards.
Primary card:
Get Up to
Large highlighted number:
120+
Small supporting text indicating online shopping/offers.
Another card:
Shop anywhere.
Supporting copy:
Track here.
The right side contains a browser/mobile shopping UI mockup.
The mockup should overlap the cards slightly.
The composition must resemble the reference:
- left statistic card
- center information card
- right device/browser mockup
- floating UI elements
- large white rounded container
- thin gray borders
- subtle shadows
9. SHOPPING UI MOCKUP
Create realistic but clean UI inside the phone/browser mockups.
The reference contains shopping/reward information.
Use small UI elements such as:
- product cards
- shopping items
- reward indicators
- progress indicators
- order information
- notification bubbles
- browser/shop icons
- small colored buttons
The UI should look like a real polished product interface.
Do NOT use random placeholder blocks.
10. REWARDS SECTION
Next section:
Heading:
Rewards that
are actually rewarding.
Create a multi-card layout.
One card should contain a reward/product visual.
Another should show:
8654357 unread emails.
No more.
The exact large number shown in the video should be preserved.
Another section/card contains:
Data is like donuts.
Not to be shared.
Another contains:
Keep tabs
on your shopping.
The cards should feel like a modular editorial dashboard.
Use:
- rounded cards
- subtle gray borders
- small colorful icons
- purple highlights
- green accent icon
- product imagery
- small UI charts
- progress/order indicators
11. REWARD CARD DETAILS
Include visual UI similar to the video:
- reward points
- shopping/order count
- product image
- progress indicator
- colorful bar chart
- small status badges
- green circular icon
- orange accent icon
The reference shows a chart at the bottom/right of the rewards section.
Recreate that visual composition.
Do not replace it with a generic chart library style.
It should look custom-designed and integrated into the landing page.
12. PERSONAL SHOPPING GUIDE SECTION
This is one of the strongest visual moments in the video.
Large heading:
Your
Then:
Personal
Then:
Shopping
Then:
Guide
The word Personal is placed inside a bright purple rounded rectangle/pill.
The typography is oversized.
A small female profile image/avatar overlaps the purple Personal pill.
Additional floating icons appear around the heading.
Use:
*
Pay: ₹25,000.00 per month
Benefits:
Work Location: In person
