Softec - Data Analytics & Software Technology HTML Template
Світлий багатоцільовий шаблон для SaaS-аналітики з п'ятьма варіантами головної, плавним GSAP-скролом і анімованою типографікою героя.
Враження
Softec — Data Analytics & Software Technology HTML Template
Softec — це світлий і позитивний SaaS-шаблон, націлений на data-платформи, платіжні шлюзи, CRM, кібербезпеку і загальний SaaS: меню навіть пропонує п'ять різних головних сторінок під ці п'ять напрямів, побудованих на одній спільній бібліотеці компонентів. Стартова index.html відкривається центрованим заголовком "The Leading Customer Data Platform", під яким SVG-крива малює сама себе товстим штрихом, а нижче — поле введення email і колаж із трьох фото, що масштабується на завантаженні. Палітра світла: майже біле тло, темно-синій текст і набір акцентів (індиго #6865ff, помаранчевий #ff7a41, малиновий #ff3c82, лайм, жовтий), якими розфарбовані різні сервіси та CTA.
Шаблон щільно покладається на GSAP — ScrollSmoother (платний плагін Club GreenSock) керує плавним скролом усієї сторінки на smooth: 2, ScrollTrigger відповідає за pin- і scrub-ефекти (найпомітніший — футер, який стискає темну смугу всередину при появі), а SplitText робить ефектні рядкові реверси для всіх .tp-title-anim-заголовків. До цього додається WOW.js для застарілих wow tpfadeUp появ, Swiper для проєктної каруселі та інших каруселей, Slick для слайдера відгуків, плюс jQuery, Bootstrap, Isotope і Magnific Popup. Стек насичений — варто враховувати у бюджеті JS-бандла.
Підходить для B2B-лендингів SaaS, продажних сторінок аналітичних дашбордів, fintech-продуктів, ПЗ для безпеки тощо. Не підходить для стриманих мінімалістичних портфоліо, редакційних чи новинних сайтів, а також для проєктів, де не можна використовувати платні GSAP-плагіни (без ScrollSmoother частина магії скрол-плавності зникне). Серед практичних застережень: немає темної теми, у шаблоні багато lorem-заглушок, які треба замінити, і важкий JS-стек вимагає контролю першого рендера.
Примітка щодо словника: слайдер відгуків використовує Slick Carousel (jQuery), якого немає у vocabularies.json. Файл slick.min.js справді підключений, але я не вписував його в libraries[], щоб не підставляти неадекватний замінник; реальну залежність зафіксовано у frontmatter компонента testimonial-slider-split. Так само meanmenu (для off-canvas мобільного меню) відсутній у словнику й вказаний лише на рівні компонента. Варто розглянути додавання slick і meanmenu до словника, якщо ці патерни траплятимуться частіше.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home v1 (Data Analytics)
index.html - Home v2 (Payment Gateway)
index-2.html - Home v3 (CRM Software)
index-3.html - Home v4 (Security Software)
index-4.html - Home v5 (SaaS)
index-5.html - About
about.html - Services
service.html - Service Details
service-details.html - Projects
project.html - Project Details
project-details.html - Team
team.html - Team Details
team-details.html - Career
career.html - Career Details
career-details.html - Integrations
integrations.html - Pricing
price.html - Blog
blog.html - Blog List
blog-list.html - Blog Details
blog-details.html - Blog Details v2
blog-details-2.html - Contact
contact.html - Register
register.html - Sign In
sign-in.html - 404
404.html
Ключові фішки
GSAP ScrollSmoother with smooth: 2 driving the entire page scroll
- Де знайти
- assets/js/main.js:1037-1046, index.html:#smooth-wrapper
- Чому цікаво
- Whole-page smooth scroll is wired through ScrollSmoother (a paid GSAP plugin) rather than Lenis, so transforms, pinning, and scrub effects share a single coordinated scroller.
- Коли використовувати
- You need pinned panels and parallax effects that must stay perfectly synced with a smooth-scrolling page.
- Техніка
- GSAP ScrollSmoother + ScrollTrigger (paid Club GreenSock plugin)
Hero title hand-drawn SVG underline that draws itself via stroke-dashoffset
- Де знайти
- index.html:.tp-hero__title-shape svg path.line1, assets/scss/layout/_hero.scss:44-66
- Чому цікаво
- The squiggle underline below the headline animates its 2300px stroke-dasharray on entrance, giving the H1 a personalized hand-marker accent without any JS.
- Коли використовувати
- Brand pages where you want a playful organic accent under a hero headline that stays crisp at all sizes.
- Техніка
- SVG path stroke-dasharray + CSS @keyframes dash
SplitText line-and-rotation reveal on every .tp-title-anim heading
- Де знайти
- assets/js/main.js:1176-1196, index.html:.tp-hero__hero-title.tp-title-anim
- Чому цікаво
- Each heading is split into lines, given perspective: 300, then rotated in from rotationX: -60deg around 'top center -50' transform-origin — produces a falling-card reveal rarely seen outside agency sites.
- Коли використовувати
- Editorial heroes or section titles where the headline should feel kinetic without feeling like a tickertape.
- Техніка
- GSAP + SplitText + ScrollTrigger
ScrollTrigger-scrubbed footer that pinches its width as it enters view
- Де знайти
- assets/js/main.js:1048-1065, index.html:.tp-footer__pl-pr .footer-black-bg.tp-gsap-bg
- Чому цікаво
- Above 1400px the footer's dark background scaleX is scrubbed from 1 -> 0.95 with a 30px border-radius, so the dark band visually 'tucks in' as you reach the bottom — a subtle wow effect tied directly to scroll position.
- Коли використовувати
- Long content pages where the footer transition needs more drama than a static reveal.
- Техніка
- GSAP ScrollTrigger scrub + matchMedia
Rank leaderboard with vertically staggered cards and 7 floating shape decorations
- Де знайти
- index.html:.tp-rank__rank-card, assets/scss/layout/_rank.scss:53-96
- Чому цікаво
- The four ranked cards each negative-margin overlap and translateY by a different amount to create a podium silhouette, while seven absolutely-positioned circle PNGs orbit behind them for depth.
- Коли використовувати
- Stat showcases where a literal 'leaderboard' or 'tier list' framing helps visualize comparison.
- Техніка
- Pure CSS transforms + CSS positioning (no JS)
Five differently themed home pages sharing one design system
- Де знайти
- index.html, index-2.html, index-3.html, index-4.html, index-5.html
- Чому цікаво
- Same component vocabulary (header, hero pattern, swiper carousel, footer) is restyled for Data Analytics / Payment Gateway / CRM / Security / SaaS by swapping accent palettes and hero illustrations — a built-in pattern library.
- Коли використовувати
- You need a flexible foundation that can pivot between several SaaS verticals while keeping the underlying SCSS unchanged.
- Техніка
- SCSS partials + per-page accent overrides
Компоненти
Transparent sticky header with mega-menu submenus, search-popup trigger, login link, and a pill CTA that swaps colors on scroll.
Centered headline with SVG hand-drawn underline stroke, email-capture input, and a 3-up image collage that scales in on load.
Three icon-led feature cards arranged in a row with staggered fade-up entrance and circular icon swatches.
Asymmetric photo-and-shape collage on the left with bullet checkmark list and CTA on the right.
Five color-coded service tiles plus one dashboard-mockup CTA card occupying the sixth grid cell.
Edge-bleeding 3-up Swiper carousel with image-left / meta-right project cards and a draggable scrollbar.
Slick slider with a 7/5 split: customer quote on the left, oversized growth percentage and case-study link on the right.
Decorative ranking podium that staggers four card pillars vertically with floating circle shapes behind them.
Monthly / yearly Bootstrap-tab toggle with a sliding indicator, hand-drawn dashed pointer, and three feature-list pricing cards.
Footer-top newsletter row with rounded email input, embedded icon, and arrow submit button on a dark background.
Dark footer with logo column, link grids, contact list with magenta icons, social row, and language switcher copyright bar.
Two-dot pulsing preloader overlay that auto-hides after the page loads.
Full-screen search overlay triggered from the header magnifier with logo, dismiss button, and underlined input.
Right-side dark off-canvas drawer with mobile menu, Instagram thumbnails, address block, and social icons.