https://webdevpuneet.com/website-section-templates/category/hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/navbar/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/features/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/pricing/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/testimonials/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/faq/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/cta/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/stats/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/team/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/contact/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/blog/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/scroll/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/listings/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/website-section-templates/category/footer/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/website-section-templates/saas-split-hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/saas-split-hero.png SaaS Split Hero — free website section template A two-column SaaS landing page hero: an announcement badge linking to news, a bold headline with a highlighted phrase, supporting text, primary and secondary buttons, a social-proof line and a product screenshot in a glowing frame. It stacks on narrow screens. https://webdevpuneet.com/website-section-templates/centered-gradient-hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/centered-gradient-hero.png Centred Gradient Hero — free website section template A centred, dark landing page hero with soft glowing gradients drawn in CSS: a small eyebrow, a large headline, supporting text, two buttons, a reassurance note and an optional wide product screenshot that rises from the bottom of the section. https://webdevpuneet.com/website-section-templates/image-background-hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/image-background-hero.png Image Background Hero — free website section template A full-width hero with your photo as the background, a dark gradient overlay that keeps text readable, a small label, a large white headline, supporting text, two buttons and an optional row of three stats along the bottom. https://webdevpuneet.com/website-section-templates/app-product-hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/app-product-hero.png App Product Hero — free website section template A mobile app landing hero: a headline and supporting text, App Store and Google Play download buttons, a star rating line, and a phone screenshot with two floating highlight cards, on a soft gradient background. https://webdevpuneet.com/website-section-templates/portfolio-hero/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/portfolio-hero.png Personal Portfolio Hero — free website section template A personal website hero for designers, developers and freelancers: an "available for work" badge with a live dot, a friendly "Hi, I'm…" headline, a short bio, buttons for your work and contact, social links, and your photo in an organic blob frame. https://webdevpuneet.com/website-section-templates/features-icon-grid/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/features-icon-grid.png Icon Grid Features — free website section template The classic features section: an eyebrow, a centred heading and intro, then a responsive grid of cards, each with an icon, a short title, a sentence of detail and an optional link. Add, remove and reorder cards; the grid reflows from three columns to one. https://webdevpuneet.com/website-section-templates/features-split-image/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/features-split-image.png Split Features With Image — free website section template A two-column feature section: an eyebrow, heading and intro above a short list of icon-led features and a button on one side, a framed product screenshot on the other. Ideal for explaining one product area in depth, and it stacks on narrow screens. https://webdevpuneet.com/website-section-templates/features-bento/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/features-bento.png Bento Grid Features — free website section template A modern bento box grid on a dark background: cards of different sizes arranged in a tidy mosaic, each with an icon, title and text, and any card can carry a screenshot. Popular with AI and developer products; the grid reflows to two columns and then one. https://webdevpuneet.com/website-section-templates/features-alternating/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/features-alternating.png Alternating Feature Rows — free website section template A zig-zag feature section: a centred heading, then rows that alternate image-left and image-right. Each row has a small label, a heading, a paragraph, a checklist of benefits, an optional link and its own image. Add as many rows as you need; they stack on phones. https://webdevpuneet.com/website-section-templates/features-steps/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/features-steps.png How It Works Steps — free website section template A "how it works" section that explains a process in a few numbered steps. Each step has a number badge, an icon, a title and a short description, joined by a dashed connector line; a button below invites visitors to start. Steps sit in a row on desktop and stack on phones. https://webdevpuneet.com/website-section-templates/pricing-three-tier/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/pricing-three-tier.png Three-Tier Pricing — free website section template The classic SaaS pricing table: three plan cards side by side with the middle one highlighted as "Most popular", each with a name, short description, price, button and feature checklist. A monthly/yearly switch above the cards swaps every price, with the toggle sliding across and the new prices rolling in. https://webdevpuneet.com/website-section-templates/pricing-dark-glow/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/pricing-dark-glow.png Dark Glow Pricing — free website section template A dark pricing section for modern AI and developer products: plan cards on a deep background, the featured plan wrapped in a glowing gradient border with a soft halo, and a monthly/yearly switch that slides between options. Holds up to four plans and reflows on smaller screens. https://webdevpuneet.com/website-section-templates/pricing-single-plan/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/pricing-single-plan.png Single Plan Pricing — free website section template Pricing for products with one plan: on the left a heading, intro and a two-column "everything included" checklist; on the right a price card with the plan name, a monthly/yearly switch, the price, a button and a money-back guarantee line. Simple pricing, presented with confidence. https://webdevpuneet.com/website-section-templates/pricing-rows/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/pricing-rows.png Pricing List Rows — free website section template Plans and packages as horizontal rows instead of cards: each row shows the plan name and description, a few highlight chips, the price and a button, with one featured row picked out by a badge. A left-aligned heading sits beside the monthly/yearly switch. Rows stack neatly on phones. https://webdevpuneet.com/website-section-templates/testimonials-grid/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/testimonials-grid.png Testimonial Wall — free website section template A "wall of love" testimonials section: a heading with an overall rating summary, then customer quotes in a masonry layout where cards of different lengths fit together neatly. Each card has optional stars, the quote, and the person’s photo, name and role. https://webdevpuneet.com/website-section-templates/testimonials-carousel/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/testimonials-carousel.png Testimonial Carousel — free website section template A testimonial slider with a left-aligned heading and arrow buttons above a row of quote cards. Drag it with the mouse and it glides with momentum and snaps to the nearest card (GSAP Draggable + Inertia); swipe on touch screens, or use the arrows, which ease from card to card. https://webdevpuneet.com/website-section-templates/testimonials-marquee/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/testimonials-marquee.png Testimonial Marquee — free website section template Two rows of testimonial cards that scroll endlessly in opposite directions under a centred heading, with soft fades at both edges. Hovering a row eases it to a stop so visitors can read; it loops seamlessly with GSAP and becomes a hand-scrollable row for people who prefer reduced motion. https://webdevpuneet.com/website-section-templates/testimonial-spotlight/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/testimonial-spotlight.png Testimonial Spotlight — free website section template One customer story, told big: a large quote that reveals line by line, the customer’s photo with their name, role and company, and a row of result stats (like "3× faster reporting") with a link to the full case study. Ideal when one great quote says more than ten small ones. https://webdevpuneet.com/website-section-templates/faq-accordion/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/faq-accordion.png FAQ Accordion — free website section template A centred FAQ section: heading and intro, then a single column of questions that expand smoothly to show their answers, one at a time, with a rotating plus/minus icon. A contact line underneath catches anyone whose question isn’t answered. https://webdevpuneet.com/website-section-templates/faq-split/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/faq-split.png Split FAQ With Contact Card — free website section template A two-column FAQ: on the left a heading, intro and a support card with an icon, a short message and a contact button, which stays in view while you scroll; on the right an accordion of questions that open smoothly. Several answers can be open at once. https://webdevpuneet.com/website-section-templates/faq-grid/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/faq-grid.png FAQ Grid — free website section template Questions and answers laid out openly in a two-column grid, with no clicking needed: each card has a small question icon, the question in bold and the answer below. Ideal when the answers are short and you want every one seen. Shown here on a dark theme. https://webdevpuneet.com/website-section-templates/cta-gradient-banner/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/cta-gradient-banner.png Gradient CTA Banner — free website section template A bold closing call to action: a rounded panel in a rich brand gradient with a subtle grid texture and a soft glow that follows the pointer, a centred heading and text, two buttons that drift toward the cursor, and a short reassurance note underneath. https://webdevpuneet.com/website-section-templates/cta-split-image/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/cta-split-image.png Split CTA With Image — free website section template A dark call-to-action card split in two: on the left an eyebrow, heading, short checklist and two buttons; on the right a product image (a phone screen by default) rising from the bottom edge of the card. Great for app downloads and product sign-ups. https://webdevpuneet.com/website-section-templates/cta-newsletter/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/cta-newsletter.png Newsletter Signup CTA — free website section template An email newsletter sign-up: an icon, heading and short pitch, social proof (“Join 25,000 readers”), then an email field and subscribe button side by side, with a privacy note below. The form posts to any email service’s form URL, so it works in a plain HTML page. https://webdevpuneet.com/website-section-templates/cta-strip/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/cta-strip.png CTA Strip — free website section template A compact call to action that fits between other sections: a tinted band with an icon, a one-line heading and a short sentence on the left and two buttons on the right. It stacks neatly on phones and keeps the page moving without a big interruption. https://webdevpuneet.com/website-section-templates/stats-counters/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/stats-counters.png Animated Stats Counters — free website section template A row of key numbers that count up from zero as the section scrolls into view, under a centred heading. Each stat has a big value (prefixes, suffixes, commas and decimals all supported), a label and an optional short note, separated by thin dividers. https://webdevpuneet.com/website-section-templates/logo-cloud/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/logo-cloud.png Scrolling Logo Cloud — free website section template A slim “Trusted by” strip: a short line of text above a row of customer logos that scrolls endlessly with soft fades at both edges and pauses on hover. Logos are grey until hovered. Upload real logos, or use the built-in icon-and-name marks until you have them. https://webdevpuneet.com/website-section-templates/stats-dark-split/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/stats-dark-split.png Stats With Logos (Dark) — free website section template A dark “results” section: on the left a heading, short text and a button; on the right four stat cards with icons whose numbers count up as they scroll into view; underneath, a row of customer logos. It packs proof, scale and credibility into one block. https://webdevpuneet.com/website-section-templates/navbar-simple/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/navbar-simple.png Simple Sticky Navbar — free website section template A clean, responsive site header: logo on the left, navigation links, a log-in link and a call-to-action button. It sticks to the top with a frosted blur and a shadow once you scroll, and on small screens the links fold into an accessible hamburger menu that animates open with GSAP. https://webdevpuneet.com/website-section-templates/navbar-floating/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/navbar-floating.png Floating Pill Navbar — free website section template A modern floating header: a dark, frosted-glass pill that hovers a little below the top of the page, with the logo, centred links and a bright CTA. On small screens the hamburger opens a full-screen menu with large links that stagger in, the style made popular by AI and design-tool websites. https://webdevpuneet.com/website-section-templates/navbar-announcement/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/navbar-announcement.png Navbar With Announcement Bar — free website section template A two-part site header: a slim announcement bar on top for news, launches or offers, with a link and a close button that collapses it smoothly; underneath, a navbar with the logo and links on the left and sign-in plus a CTA on the right. On phones the links fold into an animated menu. https://webdevpuneet.com/website-section-templates/footer-columns/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/footer-columns.png Multi-Column Footer — free website section template The classic website footer: your logo, a one-line description and social icons on the left, up to five columns of links on the right, and a bottom bar with the copyright, legal links and a back-to-top button that scrolls smoothly with GSAP. https://webdevpuneet.com/website-section-templates/footer-giant/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/footer-giant.png Big Wordmark Footer — free website section template A bold, modern footer: a closing call to action with a button at the top, a row of links and social icons in the middle, and your brand name as a giant wordmark across the full width at the bottom, revealed letter by letter with GSAP SplitText. A favourite of agencies, studios and design-led startups. https://webdevpuneet.com/website-section-templates/footer-newsletter/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/footer-newsletter.png Footer With Newsletter — free website section template A footer that grows your list: on the left your logo, a short newsletter pitch and an email form that posts to any email service; on the right columns of links; underneath, social icons, the copyright and legal links. Shown in a deep navy theme. https://webdevpuneet.com/website-section-templates/footer-minimal/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/footer-minimal.png Minimal Footer — free website section template A small, tidy footer for landing pages and simple sites: logo on the left, a single row of links in the middle and social icons on the right, with a thin divider and the copyright line underneath. On phones everything stacks and centres. https://webdevpuneet.com/website-section-templates/team-grid/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/team-grid.png Team Grid — free website section template A “meet the team” grid: a centred heading, then cards with each person’s photo, name, role and a one-line bio. LinkedIn and X icons slide up over the photo on hover (and are always visible on touch screens). Add up to twelve people; the grid reflows from four columns to two. https://webdevpuneet.com/website-section-templates/team-carousel/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/team-carousel.png Team Carousel — free website section template A team section with personality: tall portrait cards in a horizontal row, each with the person’s name and role over a soft gradient at the bottom of the photo. Drag it with the mouse (GSAP Draggable + Inertia), swipe on touch screens, or use the arrow buttons beside the heading. https://webdevpuneet.com/website-section-templates/team-hiring/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/team-hiring.png Team With Hiring CTA — free website section template A culture-and-careers section: on the left a heading, short text and a mosaic of round team photos with a “+ more” bubble; on the right a “We’re hiring” card listing perks and open roles (each linking to its job page) with a button to the careers page. https://webdevpuneet.com/website-section-templates/contact-split-form/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/contact-split-form.png Contact Form With Details — free website section template A complete “Contact us” section: on the left a heading, short text and a list of ways to reach you (email, phone, office, chat), each with an icon and link; on the right a contact form card. The form sends in the background to Formspree, Basin or your own endpoint and shows an animated thank-you message. https://webdevpuneet.com/website-section-templates/contact-cards/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/contact-cards.png Contact Options Cards — free website section template A “How can we help?” section that sends each visitor to the right place: cards for sales, support, partnerships and press, each with an icon, a short description, a response-time note and its own button or email link. Clean on a dark theme, and it stacks neatly on phones. https://webdevpuneet.com/website-section-templates/contact-map/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/contact-map.png Contact With Map — free website section template A location-focused contact section: a large embedded map (OpenStreetMap by default, or paste a Google Maps embed link) beside a heading and a list of offices, each with the city, address, phone and email. Perfect for shops, clinics, restaurants and companies with physical locations. https://webdevpuneet.com/website-section-templates/blog-cards/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/blog-cards.png Blog Post Cards — free website section template A “latest from the blog” section: a heading with a view-all link, then post cards with a cover image, category tag, date and read time, title, short excerpt and the author’s photo and name. Covers zoom gently on hover; the grid goes from three columns to one. https://webdevpuneet.com/website-section-templates/blog-featured/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/blog-featured.png Featured Post With List — free website section template A magazine-style blog layout: one featured post takes the left half with a big cover, category, title, excerpt and author, while a list of recent posts with small thumbnails, categories and dates fills the right. Ideal for homepages and blog front pages. https://webdevpuneet.com/website-section-templates/blog-list/ 2026-10-20 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/blog-list.png Editorial Post List — free website section template An editorial post list for studios, writers and design-led brands: each post is a wide row with the date, category, a large title and an arrow. On desktop, hovering a row shows its cover image in a tilted card that follows the cursor, animated with GSAP. On phones it’s a clean, fast list. https://webdevpuneet.com/website-section-templates/scroll-gallery/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/scroll-gallery.png Horizontal Scroll Gallery — free website section template A gallery that turns vertical scrolling into horizontal movement. On larger screens the section pins and a row of tall image cards slides sideways as visitors scroll down, then the page carries on. Each card has a photo, a tag, a title and a line of text, and links anywhere. On phones and without JavaScript it is a swipeable row with scroll snapping. https://webdevpuneet.com/website-section-templates/scroll-story/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/scroll-story.png Pinned Scroll Story — free website section template A scrollytelling section for product tours and stories. On larger screens the steps scroll up one by one while an image stage beside them stays pinned and crossfades to the image of the step in view; the active step is highlighted. On phones and without JavaScript every step simply shows its own image above its text. https://webdevpuneet.com/website-section-templates/scroll-stack/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/scroll-stack.png Stacking Cards — free website section template Feature or service cards that stack up as you scroll. On larger screens each card pins a little below the one before, the next card slides over it, and the covered cards shrink and dim, so the section reads like a deck being dealt. Each card has an icon, label, title, text and an optional image. Without JavaScript and on phones the cards form a normal column. https://webdevpuneet.com/website-section-templates/scroll-path/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/scroll-path.png Scroll Path Timeline — free website section template A vertical timeline joined by a hand-drawn SVG line. As visitors scroll, the line draws itself down the page and each milestone lights up when the line reaches it. Milestones have a date, icon, title and text. The line is inline SVG coloured by the theme, so it always matches; without JavaScript it is simply drawn in full. https://webdevpuneet.com/website-section-templates/restaurant-menu/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/restaurant-menu.png Restaurant Menu — free website section template A printed-menu style section for restaurants, cafés and bars. Dishes sit in two columns, each with its name, a dotted leader to the price, a short description and an optional tag such as "V" or "Chef’s pick". A note below covers allergens or service, and an optional button links to bookings. Add one section per course: starters, mains, desserts or drinks. https://webdevpuneet.com/website-section-templates/property-listings/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/property-listings.png Property Listings — free website section template Real estate listing cards in a responsive grid. Each card shows a photo with a status badge (For sale, To rent, Sold), the price, a title, the address and key facts such as bedrooms, bathrooms and floor area, and links to the full listing. Until you upload photos, every card shows a themed SVG house illustration, so the section looks finished with any colour preset. https://webdevpuneet.com/website-section-templates/class-timetable/ 2026-10-22 monthly 0.7 https://webdevpuneet.com/images/section-templates/previews/class-timetable.png Class Timetable — free website section template A weekly schedule for classes, sessions or events. Rows show the day, time, class name, coach or teacher and a level badge in an accessible table on larger screens; on phones each row becomes a labelled card. A note and a booking button sit underneath. Column headings are editable, so it works for gyms, yoga studios, dance and music schools, courses and conferences.