development/b79734e8-18f8-4898-846d-1dad068a3393
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitalijmulika
2026-01-06 15:53:28 +02:00
commit e4094766d8
308 changed files with 62565 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

512
src/app/globals.css Normal file
View File

@@ -0,0 +1,512 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #ffffff;;
--card: #fcfcfc;;
--foreground: #000a18e6;;
--primary-cta: #409fff;;
--secondary-cta: #ffffff;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-cormorant-garamond), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-cormorant-garamond), sans-serif;
}

1280
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

345
src/app/page.tsx Normal file
View File

@@ -0,0 +1,345 @@
"use client"
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, CheckCircle, CreditCard, Package, Sparkles, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="sharp"
contentWidth="smallMedium"
sizing="large"
background="dotGrid"
cardStyle="solid"
primaryButtonStyle="layered-depth"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{name: 'Home', id: 'home'},
{name: 'About', id: 'about'},
{name: 'Features', id: 'features'},
{name: 'Pricing', id: 'pricing'},
{name: 'Contact', id: 'contact'}
]}
button={{text: 'Get Started', href: 'contact'}}
brandName="Webild"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Experience Innovation Redefined"
description="Discover cutting-edge solutions designed to transform your digital presence and elevate your business to new heights."
tag="Featured Collection"
tagIcon={Sparkles}
buttons={[
{text: 'Explore Products', href: 'products'},
{text: 'Learn More', href: 'about'}
]}
mediaItems={[
{imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707497778-10ztjsiu.jpg', imageAlt: 'Premium product showcase'},
{imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707498598-kdej2xga.jpg', imageAlt: 'Technology innovation display'},
{imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707499414-0fcr5r7w.jpg', imageAlt: 'Professional business solution'},
{imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707500047-lp6iojye.jpg', imageAlt: 'Modern design excellence'},
{imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707500775-x24ucc6l.jpg', imageAlt: 'Innovative product range'}
]}
/>
</div>
<div id="about" data-section="about">
<MediaSplitAbout
title="Redefining Excellence Since Day One"
description="We are a global team of visionaries, designers, and engineers dedicated to creating transformative solutions. Our commitment to innovation and quality drives every decision we make, ensuring our customers receive the best technology and service available in the market."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707509802-bcv7fbkv.jpg"
imageAlt="Our talented diverse team collaborating"
imagePosition="right"
useInvertedBackground="noInvert"
buttons={[
{text: 'Our Story', href: 'about'},
{text: 'Get in Touch', href: 'contact'}
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwenty
title="Powerful Features Built for Performance"
description="Unlock the full potential of our platform with industry-leading features designed to streamline your workflow, enhance productivity, and deliver measurable results."
tag="Key Advantages"
tagIcon={CheckCircle}
textboxLayout="default"
useInvertedBackground="noInvert"
images={[
{id: 1, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707501774-83zcgdup.jpg', imageAlt: 'Feature demonstration one'},
{id: 2, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707502494-uh8pvlr9.jpg', imageAlt: 'Feature demonstration two'},
{id: 3, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707503261-qyybcdrz.jpg', imageAlt: 'Feature demonstration three'},
{id: 4, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707504093-i2nuh0w6.jpg', imageAlt: 'Feature demonstration four'}
]}
buttons={[
{text: 'Discover Features', href: 'features'}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Flexible Pricing for Every Business"
description="Choose the perfect plan tailored to your needs. Transparent pricing with no hidden fees."
tag="Pricing Plans"
tagIcon={CreditCard}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
plans={[
{
id: 'starter',
tag: 'Starter Plan',
price: '$99',
period: '/month',
description: 'Perfect for small businesses and startups just getting started',
button: {text: 'Choose Plan', href: 'contact'},
featuresTitle: "What's Included:",
features: ['Up to 5 projects', 'Core features access', 'Email support', 'Basic analytics', 'Monthly updates']
},
{
id: 'professional',
tag: 'Professional Plan',
tagIcon: Star,
price: '$299',
period: '/month',
description: 'Ideal for growing teams needing advanced capabilities',
button: {text: 'Choose Plan', href: 'contact'},
featuresTitle: "What's Included:",
features: ['Unlimited projects', 'All advanced features', 'Priority email & chat support', 'Advanced analytics & reports', 'API access', 'Team collaboration tools', 'Weekly updates']
},
{
id: 'enterprise',
tag: 'Enterprise Plan',
price: 'Custom',
period: '/quote',
description: 'For organizations requiring custom solutions and dedicated support',
button: {text: 'Request Demo', href: 'contact'},
featuresTitle: "What's Included:",
features: ['Custom integrations', 'Dedicated account manager', '24/7 premium support', 'Custom analytics & AI insights', 'Security & compliance certifications', 'White-label options', 'Real-time updates & priority features']
}
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardSeven
title="Featured Products"
description="Explore our curated selection of premium products designed to deliver exceptional value and performance."
tag="Our Collection"
tagIcon={Package}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
gridVariant="uniform-all-items-equal"
products={[
{
id: '1',
name: 'Pro Solution Suite',
price: '$1,299',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707505444-yu789aah.jpg',
imageAlt: 'Pro Solution Suite product'
},
{
id: '2',
name: 'Essential Toolkit',
price: '$799',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707506108-ey4rtrdz.jpg',
imageAlt: 'Essential Toolkit product'
},
{
id: '3',
name: 'Advanced Platform',
price: '$1,599',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707507067-q7h5qjy2.jpg',
imageAlt: 'Advanced Platform product'
},
{
id: '4',
name: 'Starter Package',
price: '$499',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707508026-rzl6fs94.jpg',
imageAlt: 'Starter Package product'
}
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Meet Our Exceptional Team"
tag="Leadership"
memberVariant="card"
useInvertedBackground="noInvert"
members={[
{
id: '1',
name: 'Alexandra Chen',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707516015-fkvr74wb.jpg',
imageAlt: 'Alexandra Chen, Founder & CEO'
},
{
id: '2',
name: 'Marcus Rodriguez',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707516587-6e5udn4d.jpg',
imageAlt: 'Marcus Rodriguez, Chief Technology Officer'
},
{
id: '3',
name: 'Emma Thompson',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707517310-bmormdcr.jpg',
imageAlt: 'Emma Thompson, Head of Design'
},
{
id: '4',
name: 'James Park',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707518288-rwqzte6l.jpg',
imageAlt: 'James Park, VP of Business Development'
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardNine
title="Trusted by Industry Leaders"
description="Discover what our satisfied customers have to say about their experience with our solutions."
tag="Customer Success"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground="noInvert"
testimonials={[
{
id: '1',
quote: 'This solution transformed our entire operation. The results exceeded our expectations in just the first month. Exceptional quality and support.',
name: 'Sarah Johnson',
role: 'CEO at TechVision Inc.',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707511590-ys5q268i.jpg',
imageAlt: 'Sarah Johnson headshot'
},
{
id: '2',
quote: 'Outstanding platform with incredible features. The team\'s dedication to customer success is unmatched. Highly recommended for any growing business.',
name: 'Michael Chen',
role: 'Product Manager at InnovateLab',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707512375-5uxmzsjq.jpg',
imageAlt: 'Michael Chen headshot'
},
{
id: '3',
quote: 'Professional, reliable, and packed with powerful features. This has become an essential tool for our daily operations. Best investment we made.',
name: 'Emily Rodriguez',
role: 'Operations Director at GrowthCo',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707513341-no1hcfqx.jpg',
imageAlt: 'Emily Rodriguez headshot'
},
{
id: '4',
quote: 'The implementation was seamless and the ROI was immediate. The platform\'s flexibility allows us to scale effortlessly as we grow our business.',
name: 'David Kim',
role: 'Founder at StartupXYZ',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707513887-mw7rlupn.jpg',
imageAlt: 'David Kim headshot'
},
{
id: '5',
quote: 'Excellent support team and intuitive interface. They truly understand our business needs and continue to innovate with features we actually use.',
name: 'Jessica Martinez',
role: 'Chief Operating Officer at Enterprise Solutions',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707514660-4p7l6a6w.jpg',
imageAlt: 'Jessica Martinez headshot'
},
{
id: '6',
quote: 'A game-changer for our industry. The quality is exceptional, and the pricing is fair. We\'ve recommended it to several partners already.',
name: 'Robert Williams',
role: 'Executive at Global Innovations',
imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707515360-zek3jvis.jpg',
imageAlt: 'Robert Williams headshot'
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEight
title="Proven Track Record of Excellence and Innovation"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707525130-4nqyq516.jpg"
imageAlt="Success metrics and achievements"
useInvertedBackground="noInvert"
metrics={[
{
id: '1',
value: '10K+',
title: 'Active Customers Worldwide'
},
{
id: '2',
value: '99.9%',
title: 'Uptime Guarantee'
},
{
id: '3',
value: '50M+',
title: 'Transactions Processed'
},
{
id: '4',
value: '150+',
title: 'Countries Served'
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Get in Touch with Our Team"
description="Have questions or ready to transform your business? Reach out to us today and let's start a conversation about your success."
useInvertedBackground="noInvert"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707510736-xns3qnwx.jpg"
imageAlt="Professional contact support"
mediaPosition="right"
buttonText="Send Message"
inputs={[
{name: 'fullName', type: 'text', placeholder: 'Full Name', required: true},
{name: 'email', type: 'email', placeholder: 'Email Address', required: true},
{name: 'company', type: 'text', placeholder: 'Company Name', required: false},
{name: 'phone', type: 'tel', placeholder: 'Phone Number', required: false}
]}
textarea={{
name: 'message',
placeholder: 'Tell us about your needs and how we can help...',
required: true
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Webild"
/>
</div>
</ThemeProvider>
);
}