development/61e02507-b94d-4cdf-8477-80a087753535
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-01-22 22:17:51 +02:00
commit 46a1a2b144
301 changed files with 58419 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,153 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Users } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Work", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started",
href: "/contact"
}}
/>
</div>
<div id="about-story" data-section="about-story">
<MetricSplitMediaAbout
tag="Our Story"
tagIcon={Zap}
title="Pioneering Digital Excellence Since 2018"
description="Webild Studio was born from a shared vision to bridge the gap between stunning design and powerful functionality. What started as a small team of passionate creatives has evolved into a full-service digital agency that partners with ambitious brands to create transformative digital experiences. Our commitment to innovation, attention to detail, and client success has made us a trusted partner for companies ranging from innovative startups to established enterprises."
metrics={[
{ value: "6+", title: "Years of Innovation" },
{ value: "50+", title: "Team Members Worldwide" }
]}
imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
imageAlt="Webild Studio team collaboration"
useInvertedBackground="noInvert"
/>
</div>
<div id="team-detailed" data-section="team-detailed">
<TeamCardFive
title="Leadership Team"
description="Meet the visionaries and experts driving our creative excellence and strategic innovation"
tag="Our Leaders"
tagIcon={Users}
team={[
{
id: "1",
name: "Sarah Mitchell",
role: "Creative Director & Co-Founder",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg",
imageAlt: "Sarah Mitchell, Creative Director"
},
{
id: "2",
name: "David Chen",
role: "Technical Director & Co-Founder",
imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",
imageAlt: "David Chen, Technical Director"
},
{
id: "3",
name: "Emma Rodriguez",
role: "Strategy & Operations Lead",
imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
imageAlt: "Emma Rodriguez, Strategy Lead"
},
{
id: "4",
name: "James Turner",
role: "Head of Client Experience",
imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg",
imageAlt: "James Turner, Head of Client Experience"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="values" data-section="values">
<MetricSplitMediaAbout
tag="Our Values"
tagIcon={Zap}
title="Excellence Through Collaboration"
description="At Webild Studio, we believe that extraordinary work emerges from the intersection of creativity, technology, and human connection. Our values guide every project, every interaction, and every decision we make. We're committed to transparency, continuous learning, and delivering work that not only meets expectations but sets new standards for digital excellence."
metrics={[
{ value: "100%", title: "Client Retention Rate" },
{ value: "24/7", title: "Support Availability" }
]}
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Values and culture at Webild Studio"
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services",
items: [
{ label: "Brand Design", href: "/services" },
{ label: "Web Development", href: "/services" },
{ label: "Mobile Apps", href: "/services" },
{ label: "Digital Marketing", href: "/services" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Careers", href: "/contact" }
]
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

163
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,163 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Work", id: "portfolio" },
{ name: "Services", id: "services" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Get Started", href: "contact" }}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardOne
blogs={posts}
title="Latest Insights"
description="Discover expert insights, industry trends, and innovative solutions from our team of digital specialists"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
/>
)}
<FooterMedia
imageSrc="asset://footer-background"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services", items: [
{ label: "Brand Design", href: "#services" },
{ label: "Web Development", href: "#services" },
{ label: "Mobile Apps", href: "#services" },
{ label: "Digital Marketing", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#team" },
{ label: "Portfolio", href: "#portfolio" },
{ label: "Careers", href: "#careers" }
]
},
{
title: "Connect", items: [
{ label: "Contact", href: "#contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

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

@@ -0,0 +1,153 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { HelpCircle, MessageCircle, Zap } from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Work", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started",
href: "/contact"
}}
/>
</div>
<div id="contact-info" data-section="contact-info">
<MetricSplitMediaAbout
tag="Get in Touch"
tagIcon={MessageCircle}
title="Let's Create Something Amazing Together"
description="Ready to transform your digital presence? We'd love to hear about your project and explore how we can help bring your vision to life. Whether you need a complete brand overhaul, a new website, or strategic digital guidance, our team is here to deliver exceptional results."
metrics={[
{ value: "24h", title: "Response Time" },
{ value: "100%", title: "Project Success Rate" }
]}
imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
imageAlt: "Webild Studio team ready to help"
useInvertedBackground="noInvert"
/>
</div>
<div id="contact-faq" data-section="contact-faq">
<FaqSplitMedia
title="Common Questions"
description="Get quick answers to frequently asked questions about our process, pricing, and project approach"
tag="FAQ"
tagIcon={HelpCircle}
faqs={[
{
id: "1",
title: "How do you handle project pricing?",
content: "We provide transparent, fixed-price proposals based on project scope and requirements. After our initial consultation, you'll receive a detailed proposal outlining deliverables, timeline, and investment. No hidden fees, no surprises."
},
{
id: "2",
title: "What's your typical project timeline?",
content: "Timeline varies by project complexity. Brand identity projects typically take 4-6 weeks, websites range from 6-12 weeks, and custom applications can take 12-24 weeks. We'll provide a detailed timeline during our discovery phase."
},
{
id: "3",
title: "Do you work with clients remotely?",
content: "Absolutely! We work with clients worldwide and have perfected our remote collaboration process. We use modern project management tools, regular video calls, and clear communication protocols to ensure seamless collaboration regardless of location."
},
{
id: "4",
title: "What information should I prepare for our first call?",
content: "Come prepared to discuss your goals, target audience, budget range, and timeline. If you have existing brand materials, competitive references, or inspiration examples, those are helpful too. We'll guide you through the rest during our discovery process."
},
{
id: "5",
title: "Do you offer ongoing support after project completion?",
content: "Yes, we provide comprehensive post-launch support including maintenance, updates, performance monitoring, and strategic guidance. We offer various support packages to ensure your digital presence continues to evolve and perform optimally."
}
]}
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Contact support illustration"
mediaPosition="right"
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
/>
</div>
<div id="next-steps" data-section="next-steps">
<MetricSplitMediaAbout
tag="Next Steps"
tagIcon={Zap}
title="Ready to Get Started?"
description="The best projects start with great conversations. Reach out to schedule a complimentary consultation where we'll discuss your goals, explore possibilities, and determine how we can best support your success. We're excited to learn about your vision and share how our expertise can help make it a reality."
metrics={[
{ value: "Free", title: "Initial Consultation" },
{ value: "30min", title: "Discovery Call" }
]}
imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg"
imageAlt="Project planning and consultation"
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services",
items: [
{ label: "Brand Design", href: "/services" },
{ label: "Web Development", href: "/services" },
{ label: "Mobile Apps", href: "/services" },
{ label: "Digital Marketing", href: "/services" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Careers", href: "/contact" }
]
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f7f6f7;;
--card: #ffffff;;
--foreground: #250c0d;;
--primary-cta: #b82b40;;
--secondary-cta: #ffffff;;
--accent: #b90941;;
--background-accent: #e8a8b6;; */
--background: #f7f6f7;;
--card: #ffffff;;
--foreground: #250c0d;;
--primary-cta: #b82b40;;
--secondary-cta: #ffffff;;
--accent: #b90941;;
--background-accent: #e8a8b6;;
/* 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;
}
}
@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-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);
}
@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-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-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 20s 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;
}
}
}
* {
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-prata), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-prata), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,260 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, Palette, Code, Layout, Smartphone, TrendingUp, Lightbulb, Users, HelpCircle } from "lucide-react";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Work", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started",
href: "/contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Premium Web Experiences"
description="We craft exceptional digital solutions that captivate audiences and drive results. Combining design excellence with cutting-edge technology to transform your brand vision into reality."
tag="Creative Agency"
tagIcon={Sparkles}
background={{ variant: "canvas-reveal" }}
imageSrc="https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg"
imageAlt="Premium web design dashboard showcase"
buttons={[
{ text: "Explore Our Work", href: "/portfolio" },
{ text: "Schedule Consultation", href: "/contact" }
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="About Us"
tagIcon={Zap}
title="Elevating Brands Through Strategic Design"
description="Since 2018, Webild Studio has partnered with forward-thinking brands to create digital experiences that inspire and convert. Our multidisciplinary team of designers, developers, and strategists obsess over details, innovate relentlessly, and deliver work that exceeds expectations."
metrics={[
{ value: "250+", title: "Projects Delivered" },
{ value: "95%", title: "Client Satisfaction Rate" }
]}
imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
imageAlt="Webild Studio creative team collaborating"
useInvertedBackground="invertDefault"
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
title="Our Services"
description="Comprehensive digital solutions designed to elevate your brand and achieve your business objectives"
tag="What We Do"
tagIcon={Zap}
features={[
{
icon: Palette,
title: "Brand Identity",
description: "Complete brand strategies and visual identities that tell your story and resonate with your audience"
},
{
icon: Code,
title: "Web Development",
description: "High-performance, responsive websites built with modern frameworks and best practices"
},
{
icon: Layout,
title: "UI/UX Design",
description: "Intuitive interfaces and delightful user experiences that drive engagement and conversions"
},
{
icon: Smartphone,
title: "Mobile Apps",
description: "Native and cross-platform applications that deliver exceptional performance and user satisfaction"
},
{
icon: TrendingUp,
title: "Digital Marketing",
description: "Strategic campaigns that amplify your reach and connect you with your target audience"
},
{
icon: Lightbulb,
title: "Strategy & Consulting",
description: "Expert guidance to transform your vision into actionable strategies and results"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Meet Our Team"
description="Talented creatives and strategists passionate about crafting exceptional digital experiences"
tag="The Squad"
tagIcon={Users}
team={[
{
id: "1",
name: "Sarah Mitchell",
role: "Creative Director",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg",
imageAlt: "Sarah Mitchell, Creative Director"
},
{
id: "2",
name: "David Chen",
role: "Lead Developer",
imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",
imageAlt: "David Chen, Lead Developer"
},
{
id: "3",
name: "Emma Rodriguez",
role: "Strategy Lead",
imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
imageAlt: "Emma Rodriguez, Strategy Lead"
},
{
id: "4",
name: "James Turner",
role: "Design Director",
imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg",
imageAlt: "James Turner, Design Director"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="Webild Studio transformed our digital presence completely. Their strategic approach combined with exceptional design execution delivered results that exceeded our expectations. The team's professionalism and creativity throughout the process was outstanding."
rating={5}
author="Michael Torres, CEO at TechVision"
avatars={[
{ src: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg", alt: "Client 1" },
{ src: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg", alt: "Client 2" },
{ src: "https://img.b2bpic.net/free-photo/portrait-man-laughing_23-2148859448.jpg", alt: "Client 3" },
{ src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Client 4" },
{ src: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg", alt: "Client 5" },
{ src: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg", alt: "Client 6" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Get answers to common questions about our services, process, and engagement models"
tag="Support"
tagIcon={HelpCircle}
faqs={[
{
id: "1",
title: "What is your typical project timeline?",
content: "Project timelines vary based on scope and complexity. Small projects typically run 4-8 weeks, while larger initiatives range from 12-24 weeks. We provide detailed timelines during the discovery phase after understanding your specific requirements."
},
{
id: "2",
title: "Do you offer ongoing support and maintenance?",
content: "Yes, we provide comprehensive post-launch support and maintenance services. This includes bug fixes, performance optimization, content updates, and feature enhancements to keep your digital products running smoothly."
},
{
id: "3",
title: "What's included in your discovery process?",
content: "Our discovery process includes stakeholder interviews, market research, competitor analysis, user research, technical assessment, and strategy development. This ensures we have a complete understanding of your goals and challenges before we begin design and development."
},
{
id: "4",
title: "Can you work with our existing technology stack?",
content: "Absolutely. We're experienced with a wide range of technologies and frameworks. Our team can integrate seamlessly with your existing infrastructure and team, or recommend solutions that best fit your long-term goals."
},
{
id: "5",
title: "How do you approach design iterations and feedback?",
content: "We believe in collaborative design. We present initial concepts, gather feedback, iterate based on your input, and refine until we achieve perfection. Regular check-ins ensure alignment throughout the process."
}
]}
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="FAQ support illustration"
mediaPosition="left"
textboxLayout="default"
useInvertedBackground="invertDefault"
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services",
items: [
{ label: "Brand Design", href: "/services" },
{ label: "Web Development", href: "/services" },
{ label: "Mobile Apps", href: "/services" },
{ label: "Digital Marketing", href: "/services" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Careers", href: "/contact" }
]
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,186 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award } from "lucide-react";
export default function PortfolioPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Work", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started",
href: "/contact"
}}
/>
</div>
<div id="featured-projects" data-section="featured-projects">
<ProductCardTwo
title="Featured Case Studies"
description="Explore our most impactful projects showcasing innovative design solutions and measurable business results across various industries"
tag="Portfolio Highlights"
tagIcon={Award}
products={[
{
id: "1",
brand: "TechVision",
name: "Complete SaaS Platform Redesign",
price: "8-week engagement",
rating: 5,
reviewCount: "Featured",
imageSrc: "https://img.b2bpic.net/free-photo/grand-parent-learning-use-digital-divice_23-2149214556.jpg",
imageAlt: "TechVision SaaS platform interface redesign showcase"
},
{
id: "2",
brand: "Aurora Digital",
name: "Mobile-First Experience Design",
price: "12-week project",
rating: 5,
reviewCount: "Award Winner",
imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-working-desk_23-2149930959.jpg",
imageAlt: "Aurora Digital mobile application UI design"
},
{
id: "3",
brand: "Luxe Brands Co",
name: "End-to-End Brand Identity",
price: "6-week project",
rating: 5,
reviewCount: "Featured",
imageSrc: "https://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg",
imageAlt: "Luxe Brands comprehensive branding solution"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
/>
</div>
<div id="client-success" data-section="client-success">
<TestimonialCardFifteen
testimonial="Working with Webild Studio has been transformative for our business. They didn't just redesign our platform - they reimagined our entire user experience. The results speak for themselves: 40% increase in user engagement and 60% boost in conversions within the first month of launch."
rating={5}
author="Lisa Chen, VP of Product at TechVision"
avatars={[
{ src: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg", alt: "Client testimonial avatar" },
{ src: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg", alt: "Client testimonial avatar" },
{ src: "https://img.b2bpic.net/free-photo/portrait-man-laughing_23-2148859448.jpg", alt: "Client testimonial avatar" },
{ src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Client testimonial avatar" },
{ src: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg", alt: "Client testimonial avatar" },
{ src: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg", alt: "Client testimonial avatar" }
]}
useInvertedBackground="invertDefault"
/>
</div>
<div id="more-work" data-section="more-work">
<ProductCardTwo
title="Additional Showcase"
description="More examples of our creative excellence and technical innovation across different project scales and industries"
tag="Recent Work"
tagIcon={Award}
products={[
{
id: "4",
brand: "StartupLaunch",
name: "MVP Development & Launch",
price: "10-week sprint",
rating: 5,
reviewCount: "Live",
imageSrc: "https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg",
imageAlt: "StartupLaunch MVP platform development"
},
{
id: "5",
brand: "RetailMax",
name: "E-commerce Platform Redesign",
price: "14-week project",
rating: 5,
reviewCount: "Launched",
imageSrc: "https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg",
imageAlt: "RetailMax e-commerce platform redesign"
},
{
id: "6",
brand: "HealthTech Solutions",
name: "Healthcare Dashboard System",
price: "16-week build",
rating: 5,
reviewCount: "Active",
imageSrc: "https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg",
imageAlt: "HealthTech healthcare dashboard interface"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services",
items: [
{ label: "Brand Design", href: "/services" },
{ label: "Web Development", href: "/services" },
{ label: "Mobile Apps", href: "/services" },
{ label: "Digital Marketing", href: "/services" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Careers", href: "/contact" }
]
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,155 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Palette, Code, Layout, Smartphone, TrendingUp, Lightbulb, Target, Settings } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Webild Studio"
navItems={[
{ name: "Work", id: "/portfolio" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Get Started",
href: "/contact"
}}
/>
</div>
<div id="services-overview" data-section="services-overview">
<FeatureHoverPattern
title="Complete Digital Solutions"
description="From strategy to execution, we provide end-to-end digital services that transform your brand and drive measurable results"
tag="Our Services"
tagIcon={Target}
features={[
{
icon: Palette,
title: "Brand Identity & Design",
description: "Comprehensive brand strategy, visual identity design, and brand guidelines that create lasting impressions and build customer loyalty"
},
{
icon: Code,
title: "Custom Web Development",
description: "Modern, scalable websites and web applications built with cutting-edge technologies and optimized for performance and SEO"
},
{
icon: Layout,
title: "UI/UX Design",
description: "User-centered design approach creating intuitive interfaces that enhance user engagement and drive conversions"
},
{
icon: Smartphone,
title: "Mobile Applications",
description: "Native iOS and Android apps, progressive web apps, and cross-platform solutions that deliver seamless mobile experiences"
},
{
icon: TrendingUp,
title: "Digital Marketing & Strategy",
description: "Data-driven marketing campaigns, SEO optimization, content strategy, and social media management to grow your online presence"
},
{
icon: Settings,
title: "Technical Consulting",
description: "Architecture planning, technology stack selection, performance optimization, and ongoing technical guidance for your digital initiatives"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
<div id="approach" data-section="approach">
<MetricSplitMediaAbout
tag="Our Approach"
tagIcon={Lightbulb}
title="Strategic Process, Exceptional Results"
description="Our proven methodology combines strategic thinking, creative excellence, and technical expertise. We begin with deep discovery to understand your goals, audience, and challenges. Then we craft tailored solutions that align with your business objectives while exceeding user expectations. Every project benefits from our collaborative approach, ensuring transparency and alignment throughout the entire process."
metrics={[
{ value: "4-Phase", title: "Structured Process" },
{ value: "98%", title: "On-Time Delivery" }
]}
imageSrc="https://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg"
imageAlt="Strategic design and development process"
useInvertedBackground="invertDefault"
/>
</div>
<div id="expertise" data-section="expertise">
<MetricSplitMediaAbout
tag="Technical Expertise"
tagIcon={Code}
title="Cutting-Edge Technologies & Best Practices"
description="We stay at the forefront of technology, utilizing the latest frameworks, tools, and methodologies to deliver solutions that are not only visually stunning but also technically robust. Our expertise spans modern JavaScript frameworks, cloud infrastructure, API development, performance optimization, and emerging technologies like AI integration and progressive web apps."
metrics={[
{ value: "20+", title: "Technologies Mastered" },
{ value: "99.9%", title: "Uptime Guarantee" }
]}
imageSrc="https://img.b2bpic.net/free-photo/side-view-man-working-desk_23-2149930959.jpg"
imageAlt="Technical development and coding expertise"
useInvertedBackground="noInvert"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
imageAlt="Creative footer background"
logoText="Webild Studio"
copyrightText="© 2025 Webild Studio. All rights reserved."
columns={[
{
title: "Services",
items: [
{ label: "Brand Design", href: "/services" },
{ label: "Web Development", href: "/services" },
{ label: "Mobile Apps", href: "/services" },
{ label: "Digital Marketing", href: "/services" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Our Team", href: "/about" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Careers", href: "/contact" }
]
},
{
title: "Connect",
items: [
{ label: "Contact", href: "/contact" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Instagram", href: "https://instagram.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}