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/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.