bender/5d0dcc36-df5c-41ee-b686-d2da211b6a77
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
DK
2026-03-03 11:21:44 +00:00
commit 14ded30ce4
631 changed files with 83871 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,147 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import TextAbout from "@/components/sections/about/TextAbout";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { MessageSquare } from "lucide-react";
const AboutPage = () => {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Security", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "GitHub", href: "https://github.com" },
{ label: "Facebook", href: "https://facebook.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
</div>
{/* About Us Section */}
<div id="about" data-section="about">
<TextAbout
tag="Our Story"
title="Founded on the belief that technology should empower transformation. At Kraftcode, we combine deep technical expertise with strategic business thinking to deliver solutions that matter. Our team of passionate developers, designers, and strategists work collaboratively to turn your vision into reality."
useInvertedBackground={false}
ariaLabel="About us section"
/>
</div>
{/* Mission & Values Section */}
<div id="mission" data-section="mission">
<TextAbout
tag="Mission & Vision"
title="We believe in creating digital solutions that drive real business impact. Our mission is to empower businesses through innovative technology, expert guidance, and unwavering commitment to quality. We envision a future where technology enables every organization to reach its full potential."
useInvertedBackground={true}
ariaLabel="Mission and vision section"
/>
</div>
{/* Team Testimonials */}
<div id="team" data-section="team">
<TestimonialCardTwo
title="Meet Our Leadership"
description="Our experienced team brings decades of combined expertise in web development, mobile apps, and digital transformation across diverse industries."
tag="Our Team"
tagIcon={MessageSquare}
tagAnimation="blur-reveal"
testimonials={[
{
id: "1",
name: "Rajesh Kumar",
role: "Founder & CEO",
testimonial:
"With over 15 years in tech, I'm committed to building solutions that truly transform businesses. Innovation and integrity are at our core.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-exec-1772536829249-92484298.png",
imageAlt: "Rajesh Kumar",
},
{
id: "2",
name: "Priya Sharma",
role: "Lead Developer",
testimonial:
"Our development philosophy centers on clean code, scalability, and user experience. We build solutions that stand the test of time.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-mana-1772536828421-9ae258e6.png",
imageAlt: "Priya Sharma",
},
{
id: "3",
name: "Arun Patel",
role: "Design Lead",
testimonial:
"Great design bridges the gap between business needs and user expectations. We create interfaces that are both beautiful and functional.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-an-entrepreneur-1772536829312-461ee1ff.png",
imageAlt: "Arun Patel",
},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="blur-reveal"
ariaLabel="Team section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
ariaLabel="Footer section"
/>
</div>
</ThemeProvider>
);
};
export default AboutPage;

152
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,152 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Send } from "lucide-react";
const ContactPage = () => {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Security", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "GitHub", href: "https://github.com" },
{ label: "Facebook", href: "https://facebook.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactSplit
tag="Get In Touch"
tagIcon={Send}
tagAnimation="slide-up"
title="Ready to Transform Your Business?"
description="Let's bring your vision to life with cutting-edge web and mobile solutions tailored to your goals. Partner with us to unlock your digital potential."
background={{ variant: "noise" }}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/modern-tech-company-office-environment-s-1772536829959-06972360.png"
imageAlt="Contact us - modern office environment"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Enter your email"
buttonText="Reach Out Now"
termsText="We respect your privacy. Unsubscribe at any time."
ariaLabel="Contact section"
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Find answers to common questions about our services, process, and how we can help transform your business."
faqs={[
{
id: "1",
title: "What services does Kraftcode offer?",
content:
"We provide comprehensive digital solutions including website development, iOS and Android app development, custom development, performance optimization, and security implementation. Our services are tailored to meet your unique business requirements.",
},
{
id: "2",
title: "How long does a typical project take?",
content:
"Project timelines vary based on complexity and scope. Most web projects take 2-4 months, while mobile apps typically require 3-6 months. We provide detailed timelines and milestones during the planning phase.",
},
{
id: "3",
title: "What is your development process?",
content:
"We follow a structured approach: Discovery & Planning → Design & Prototyping → Development → Testing → Deployment → Support. We maintain regular communication and provide progress updates throughout the project.",
},
{
id: "4",
title: "Do you offer post-launch support?",
content:
"Yes, we provide comprehensive post-launch support including maintenance, updates, bug fixes, and performance monitoring. We offer various support packages tailored to your needs.",
},
{
id: "5",
title: "How do you ensure quality and security?",
content:
"Quality is built into our process through rigorous testing, code reviews, and quality assurance protocols. Security is implemented from the ground up, with compliance to industry standards and best practices.",
},
{
id: "6",
title: "Can you work with our existing team?",
content:
"Absolutely. We're experienced in collaborating with in-house teams, agencies, and external partners. We can integrate seamlessly into your existing workflow and development processes.",
},
]}
faqsAnimation="blur-reveal"
textPosition="left"
useInvertedBackground={true}
animationType="smooth"
showCard={true}
ariaLabel="FAQ section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
ariaLabel="Footer section"
/>
</div>
</ThemeProvider>
);
};
export default ContactPage;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,355 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Zap, Lightbulb, Globe, Smartphone, Code, Award, MessageSquare, CheckCircle } from "lucide-react";
const HomePage = () => {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Security", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "GitHub", href: "https://github.com" },
{ label: "Facebook", href: "https://facebook.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Discover Your Path to Success"
description="Seize the Opportunity: Start Your Transformation Today. In today's dynamic digital world, staying ahead means embracing innovation and powerful solutions. We help elevate your business to new heights through expert website development, Android app development, and iOS app development."
tag="Digital Innovation"
tagIcon={Zap}
tagAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/a-modern-tech-company-hero-image-showing-1772536832346-3e105fc1.png"
imageAlt="Digital transformation and innovation"
mediaAnimation="slide-up"
testimonials={[
{
name: "Sarah Johnson",
handle: "CEO, TechCorp",
testimonial:
"Working with Kraftcode transformed our digital presence. Their strategic insights and meticulous approach delivered results beyond expectations.",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-exec-1772536829249-92484298.png",
imageAlt: "Sarah Johnson",
},
{
name: "Michael Chen",
handle: "CTO, InnovateLab",
testimonial:
"Exceptional team that understands technology and business. They delivered a cutting-edge platform that exceeded all our requirements.",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-mana-1772536828421-9ae258e6.png",
imageAlt: "Michael Chen",
},
{
name: "Emily Rodriguez",
handle: "Founder, GrowthCo",
testimonial:
"Kraftcode's expertise in web and mobile development is unmatched. They built solutions that directly contributed to our business growth.",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-an-entrepreneur-1772536829312-461ee1ff.png",
imageAlt: "Emily Rodriguez",
},
]}
testimonialRotationInterval={5000}
buttons={[
{ text: "Get Started Today", href: "/contact" },
{ text: "See Our Services", href: "/services" },
]}
buttonAnimation="slide-up"
background={{ variant: "noise" }}
useInvertedBackground={false}
ariaLabel="Hero section"
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<TextAbout
tag="About Kraftcode"
tagIcon={Zap}
tagAnimation="blur-reveal"
title="Unlocking Transformational Potential Through Expert Digital Solutions. We craft innovative, high-performance websites and mobile applications that drive real results."
buttons={[{ text: "Learn More About Us", href: "/about" }]}
buttonAnimation="blur-reveal"
useInvertedBackground={true}
ariaLabel="About section"
/>
</div>
{/* Services Section */}
<div id="services" data-section="services">
<FeatureHoverPattern
title="Expertise in Digital Solutions"
description="Strategic, creative, and tech-driven solutions tailored for your success. We combine strategic thinking with creative design and advanced development to ensure every solution is both functional and impactful."
tag="Our Services"
tagIcon={Lightbulb}
tagAnimation="slide-up"
features={[
{
icon: Globe,
title: "Website Development",
description:
"Custom sites boost your online presence. We create responsive, scalable websites that engage users and drive conversions.",
button: { text: "Explore Web Services", href: "/services" },
},
{
icon: Smartphone,
title: "Mobile App Development",
description:
"Mobile solutions tailored to your vision. iOS and Android apps built with cutting-edge technology and user-centric design.",
button: { text: "Explore App Services", href: "/services" },
},
{
icon: Code,
title: "Custom Development",
description:
"Bespoke solutions tailored to your unique business requirements. We build scalable, secure, and innovative digital products.",
button: { text: "Explore Custom Solutions", href: "/services" },
},
{
icon: Zap,
title: "Performance Optimization",
description:
"Lightning-fast applications and websites. We optimize every aspect to ensure exceptional speed and user experience.",
button: { text: "Learn About Optimization", href: "/services" },
},
{
icon: Code,
title: "Security & Compliance",
description:
"Enterprise-grade security and compliance. We build solutions that protect your data and meet industry standards.",
button: { text: "Explore Security", href: "/services" },
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="blur-reveal"
ariaLabel="Services section"
/>
</div>
{/* Metrics Section */}
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Our Impact by the Numbers"
description="Building trust through proven results. Discover how we've delivered value for our clients."
tag="Key Achievements"
tagIcon={Award}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "300+",
title: "Happy Customers",
description: "Trusted by businesses worldwide",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/happy-customers-and-client-satisfaction--1772536829516-9e8b25ec.png",
imageAlt: "Happy customers",
},
{
id: "2",
value: "500+",
title: "Successful Projects",
description: "Delivered across web and mobile",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/successful-project-delivery-visualizatio-1772536830356-9ed4b093.png",
imageAlt: "Successful projects",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Metrics section"
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Listen In Their Own Words"
description="Real feedback from satisfied clients who experienced transformation with our solutions."
tag="Testimonials"
tagIcon={MessageSquare}
tagAnimation="blur-reveal"
testimonials={[
{
id: "1",
name: "Sarah Johnson",
role: "CEO, TechCorp",
testimonial:
"Working with Kraftcode was a transformational experience for our company. Their strategic insights and meticulous planning delivered results beyond our expectations.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-exec-1772536829249-92484298.png",
imageAlt: "Sarah Johnson",
},
{
id: "2",
name: "Michael Chen",
role: "CTO, InnovateLab",
testimonial:
"Exceptional team that understands both technology and business needs. They delivered a cutting-edge platform that exceeded all our requirements.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-mana-1772536828421-9ae258e6.png",
imageAlt: "Michael Chen",
},
{
id: "3",
name: "Emily Rodriguez",
role: "Founder, GrowthCo",
testimonial:
"Kraftcode's expertise in web and mobile development is unmatched. They built solutions that directly contributed to our business growth.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-an-entrepreneur-1772536829312-461ee1ff.png",
imageAlt: "Emily Rodriguez",
},
{
id: "4",
name: "David Kim",
role: "Product Manager, StartupXYZ",
testimonial:
"Professional, reliable, and innovative. Kraftcode delivered our project on time and within budget while maintaining exceptional code quality.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-owne-1772536829505-ee335f31.png",
imageAlt: "David Kim",
},
{
id: "5",
name: "Jessica Martinez",
role: "Director, Innovation Labs",
testimonial:
"Outstanding service from start to finish. The team's attention to detail and commitment to excellence was evident in every aspect of our project.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-project-manag-1772536831572-9fdcfe07.png",
imageAlt: "Jessica Martinez",
},
{
id: "6",
name: "Robert Thompson",
role: "CEO, Digital Solutions Co",
testimonial:
"A trusted partner for digital transformation. Kraftcode's solutions have significantly improved our operational efficiency and customer satisfaction.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-stra-1772536828602-df1b16dd.png",
imageAlt: "Robert Thompson",
},
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="blur-reveal"
ariaLabel="Testimonials section"
/>
</div>
{/* Social Proof Section */}
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted by Leading Companies"
description="We take immense pride in our track record of serving as a trusted consulting partner to influential companies across various industries."
tag="Trusted Partners"
tagIcon={CheckCircle}
tagAnimation="blur-reveal"
names={[
"Microsoft",
"Google",
"Amazon",
"Apple",
"IBM",
"Netflix",
"Oracle",
"Salesforce",
]}
logos={[
"http://img.b2bpic.net/free-vector/geometric-abstract-echos-web-design-agency-logo_1421494-124.jpg",
"http://img.b2bpic.net/free-vector/technology-logo_1071-152.jpg",
"http://img.b2bpic.net/free-vector/shiny-cyber-monday-background_23-2147718014.jpg",
"http://img.b2bpic.net/free-vector/gradient-weight-loss-logo-template_23-2150815714.jpg",
"http://img.b2bpic.net/free-vector/gradient-data-logo-template_23-2149202348.jpg",
"http://img.b2bpic.net/free-vector/gradient-n-logo-template_23-2149377854.jpg",
"http://img.b2bpic.net/free-vector/logotype_23-2148145168.jpg",
"http://img.b2bpic.net/free-vector/technology-logo-template-with-abstract-shapes_23-2148240848.jpg",
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
ariaLabel="Social proof section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
ariaLabel="Footer section"
/>
</div>
</ThemeProvider>
);
};
export default HomePage;

129
src/app/portfolio/page.tsx Normal file
View File

@@ -0,0 +1,129 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Briefcase } from "lucide-react";
const PortfolioPage = () => {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Security", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "GitHub", href: "https://github.com" },
{ label: "Facebook", href: "https://facebook.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
</div>
{/* Portfolio Case Studies */}
<div id="portfolio" data-section="portfolio">
<ProductCardOne
title="Turning Vision Into Reality"
description="Showcase of our successful projects across diverse industries. Each case study represents our commitment to delivering innovative solutions and measurable business impact."
tag="Case Studies"
tagIcon={Briefcase}
tagAnimation="slide-up"
products={[
{
id: "1",
name: "Financial Tech Platform",
price: "Finance",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/financial-tech-solution-showcase-showing-1772536829700-08f53efb.png",
imageAlt: "Finance platform",
},
{
id: "2",
name: "HR Management System",
price: "Human Resources",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/human-resources-platform-illustration-sh-1772536829975-a0919a4e.png",
imageAlt: "HR system",
},
{
id: "3",
name: "Legal Services Platform",
price: "Legal Tech",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/legal-services-platform-showing-law-firm-1772536830626-e5e66c56.png",
imageAlt: "Legal platform",
},
{
id: "4",
name: "Startup Solution Suite",
price: "Startup",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/startup-solution-platform-showing-modern-1772536829727-82b44a37.png",
imageAlt: "Startup solution",
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Portfolio section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
ariaLabel="Footer section"
/>
</div>
</ThemeProvider>
);
};
export default PortfolioPage;

156
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Globe, Smartphone, Code, Zap, Shield, Lightbulb } from "lucide-react";
const ServicesPage = () => {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Pricing", href: "#" },
{ label: "Security", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect",
items: [
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "GitHub", href: "https://github.com" },
{ label: "Facebook", href: "https://facebook.com" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
</div>
{/* Services - Detailed Feature Section */}
<div id="services-detailed" data-section="services-detailed">
<FeatureHoverPattern
title="Our Complete Service Offering"
description="Comprehensive digital solutions tailored to transform your business. From web development to mobile apps and custom solutions, we deliver excellence across every project."
tag="Service Details"
tagIcon={Lightbulb}
tagAnimation="slide-up"
features={[
{
icon: Globe,
title: "Website Development",
description:
"Custom responsive websites designed for conversion. We create user-friendly, scalable platforms that establish your digital presence and engage your audience effectively.",
button: { text: "Learn More", href: "/services" },
},
{
icon: Smartphone,
title: "Mobile App Development",
description:
"Native and cross-platform applications for iOS and Android. We build intuitive, high-performance mobile solutions that solve real problems and drive user engagement.",
button: { text: "Learn More", href: "/services" },
},
{
icon: Code,
title: "Custom Development Solutions",
description:
"Bespoke software tailored to your unique business needs. From backend systems to complex integrations, we architect scalable solutions that grow with your business.",
button: { text: "Learn More", href: "/services" },
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
buttonAnimation="blur-reveal"
ariaLabel="Detailed services section"
/>
</div>
{/* Additional Services - Performance & Security */}
<div id="services-advanced" data-section="services-advanced">
<FeatureHoverPattern
title="Advanced Solutions & Support"
description="Beyond development, we provide ongoing optimization and enterprise-grade support to ensure your digital solutions remain competitive and secure."
tag="Advanced Services"
tagIcon={Shield}
tagAnimation="slide-up"
features={[
{
icon: Zap,
title: "Performance Optimization",
description:
"Lightning-fast applications and websites optimized for speed. We analyze, optimize, and enhance every aspect to deliver exceptional user experience and SEO benefits.",
button: { text: "Learn More", href: "/services" },
},
{
icon: Shield,
title: "Security & Compliance",
description:
"Enterprise-grade security implementation and compliance management. We protect your data with industry-standard practices and meet regulatory requirements.",
button: { text: "Learn More", href: "/services" },
},
{
icon: Code,
title: "Maintenance & Support",
description:
"Ongoing technical support and maintenance services. We ensure your applications remain stable, updated, and optimized with dedicated support teams.",
button: { text: "Learn More", href: "/services" },
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="blur-reveal"
ariaLabel="Advanced services section"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
ariaLabel="Footer section"
/>
</div>
</ThemeProvider>
);
};
export default ServicesPage;

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
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-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-public-sans), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--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-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--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);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@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;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.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-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
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%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #ffffff;;
--card: #f9f9f9;;
--foreground: #120a00e6;;
--primary-cta: #FF7B05;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #FF7B05;; */
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #120a00e6;;
--primary-cta: #FF7B05;;
--primary-cta-text: #ffffff;;
--secondary-cta: #f9f9f9;;
--secondary-cta-text: #120a00e6;;
--accent: #e2e2e2;;
--background-accent: #FF7B05;;
/* 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-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - 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-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - 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;
}
}