Drivoo - Automotive Website Template

Drive your brand forward

Drivoo is a premium website template for car dealerships, rental companies,
EV brands and automotive studios. Huge display type, full-bleed photography
and smooth scroll animations make every model look its best, and a built-in
Sanity Studio lets you edit every word and image without touching code.

Every page is built from sections. Add, remove and reorder them in the
Studio, and the site updates within a minute. Showcase your cars, tell your
story, publish news and take enquiries, all from one place.

Built on a modern stack

- **Next.js 16** (App Router, React 19) for fast, SEO-friendly pages
- **Tailwind CSS v4** with all colours and type in one theme file
- **GSAP + Lenis** for smooth scrolling and scroll-linked animation
- **Sanity Studio** as a free, hosted content editor
- **Resend** for contact form emails
- Deploys to **Vercel** in a few clicks

Rebrand in minutes

Change one colour variable and the buttons, cards and footer follow. Upload
your logo in Site settings (light and dark versions), set the menu, footer
and social links, and you're ready to launch.

Features (bullet list)

- 5 page types: Home, About, Services, Contact, Blog + blog post
- 15 drag-and-drop sections, all editable in Sanity Studio
- Page builder: add, remove and reorder sections on any page
- Car catalogue with its own content type, reusable across pages
- Blog with listing page, post pages, rich text body and share links
- Working contact form (emails sent through Resend)
- Live Google Maps from an address, no API key needed
- Video banner with muted loop and play/pause
- Drag carousel with progress bar
- Scroll-driven car animations (GSAP ScrollTrigger)
- Smooth scrolling with Lenis
- Respects "reduce motion" settings
- Fully responsive: mobile, tablet and desktop
- Light or dark menu text per page
- Site settings for logo, menu, footer, newsletter text and social links
- Anchor links so menu items can jump to any section
- Images with hotspot cropping, alt text and blur placeholders
- Per-page SEO titles and descriptions
- Design tokens in one file for quick rebranding
- One-command demo content import (`npm run seed`)
- Clear setup guide (README) from install to going live

Build pages without code

Every page in Drivoo is a stack of sections. Open a page in Sanity Studio,
click **Add item**, pick a section and fill in the fields. Drag sections to
reorder them, or remove the ones you don't need.

There are 15 sections to choose from, from a full-height hero and car cards
to a video banner, feature tabs, a live map and a contact form. Each field
explains where it appears on the page, so editors always know what they're
changing.

Published changes show on the live site within a minute. There's no rebuild,
no redeploy and no developer needed for day-to-day updates.

Show off every car

Cars have their own content type, so you add a model once and show it
anywhere. The Car cards section lists the models you pick, or the three
newest ones if you leave it empty.

Each card pairs a bold black panel with a bright call-to-action button. As
visitors scroll, the car photo drives into the card, giving the page a sense
of motion that fits an automotive brand.

Add a draggable image carousel for interiors and details, and a video banner
for launch films. The video plays as a muted loop with a play/pause button,
and a poster image shows until it loads.

Motion that feels premium

Drivoo uses GSAP and ScrollTrigger for scroll-linked animation, with Lenis
for smooth scrolling. Both run on the same ticker, so animations stay in
sync with the scroll position.

The motion is there to guide the eye, not distract. Huge display type,
edge-to-edge photography and calm transitions keep the focus on the cars.

Visitors who turn on "reduce motion" in their system settings get a still
version of the site. The content and layout stay the same, without the
movement.

A blog that's ready to publish

The Blog page lists every post, newest first, and each post gets its own
page with a clean article layout. Write posts in the Studio with headings,
lists, links and images.

Every post page includes share links, so readers can pass articles on. Use
the Blog posts section to show your latest news on the home page or any
other page.

Posts are their own documents, so you can pick specific ones for a section
or let it show the newest automatically.

Turn visitors into enquiries

The contact page pairs a live Google Map with a working contact form. Type
your address or place name in the Studio and the map updates. No Google API
key is needed.

Form messages go straight to your inbox through Resend. Replies go directly
to the visitor's email address, so following up takes one click.

The Map section can also stand on its own, so you can show your showroom
location on the About page or anywhere else.

Your brand in minutes

All colours, font sizes and spacing live in one theme file. Change the
primary colour and the buttons, cards and footer update together.

Upload a light and a dark version of your logo in Site settings. Set the
menu, footer text, newsletter copy and social links in the same place, and
choose light or dark menu text for each page.

The layout is mobile-first and adapts to phone, tablet and desktop, so
your rebrand looks right on every screen.

---

Pages included

| Page | What's on it |
|---|---|
| Home | Hero, statement, spotlight, intro, car cards, carousel, video banner, feature tabs, latest posts |
| About | Page title, two image + features blocks, live map |
| Services | Page title, feature grid, intro with numbered accordion |
| Contact | Page title, contact form with live map |
| Blog | Page title, post listing |
| Blog post | Article with rich text, images and share links |

Sections included

1. Hero – full-height photo, huge title, button, side note
2. Page title – photo band with centred title for inner pages
3. Statement – one large uppercase line
4. Spotlight – full-width photo with a coloured info card
5. Intro – heading, text, button and optional numbered accordion
6. Car cards – black cards with cars that drive in on scroll
7. Image carousel – draggable, with progress bar
8. Video banner – poster with optional looping video
9. Feature tabs – dark band with tabs, text and stats
10. Image + features – edge-to-edge photo with a feature list
11. Feature grid – 4-column features with hover state
12. Full-width image – wide photo with optional heading
13. Map – live Google Map with optional heading
14. Blog posts – newest posts or hand-picked ones
15. Contact form – map or image beside the form

If you have any question please reach out to me
mail: shohag4y@gmail.com
whatsapp: +8801944229115