Merge version_2 into main #7
@@ -1,39 +1,41 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '/about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Testimonials', id: '/testimonials' }
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
borderRadius="pill"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
background="circleGradient"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Our Company"
|
||||
description={[
|
||||
"We are a dedicated team passionate about innovation and excellence. Our mission is to create impactful solutions that drive success for our clients.", "Founded with a vision to revolutionize the industry, we continually strive to exceed expectations and deliver exceptional results."
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="about-hero" data-section="about-hero" className="py-12 md:py-20 lg:py-24">
|
||||
<HeroOverlay
|
||||
title="About Us"
|
||||
description="Learn more about our mission, values, and the team behind our success."
|
||||
textPosition="center"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
imageSrc="https://images.unsplash.com/photo-1552588102-167814c407d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
imageAlt="About us background image"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
50
src/app/case-studies/page.tsx
Normal file
50
src/app/case-studies/page.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
|
||||
export default function CaseStudiesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Case Studies", id: "/case-studies" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="case-study" data-section="case-study" className="py-12 md:py-20 lg:py-24">
|
||||
<MetricSplitMediaAbout
|
||||
tag="Case Study Highlight"
|
||||
tagIcon={Sparkles}
|
||||
title="Revolutionizing E-commerce for a Leading Retailer"
|
||||
description="We partnered with a major retail client to completely overhaul their online shopping experience, focusing on performance, user engagement, and conversion optimization. Our solution integrated advanced AI-driven recommendations and a streamlined checkout process, leading to significant business growth."
|
||||
metrics={[
|
||||
{ value: '30%', title: 'Increase in Conversion Rate' },
|
||||
{ value: '25%', title: 'Reduction in Bounce Rate' }
|
||||
]}
|
||||
imageSrc="https://placehold.co/800x600/png?text=Case+Study+Image"
|
||||
imageAlt="E-commerce platform interface showing product listings and shopping cart"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ContactForm from '@/components/form/ContactForm';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '/about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Testimonials', id: '/testimonials' }
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Case Studies", id: "/case-studies" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
background="aurora"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
<div id="contact" data-section="contact" className="min-h-[calc(100vh-60px)] flex items-center justify-center p-4">
|
||||
<ContactForm
|
||||
title="Send Us a Message"
|
||||
description="Fill out the details below and we'll get back to you as soon as possible."
|
||||
tag="Contact Us"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Submit Message"
|
||||
centered={true}
|
||||
onSubmit={(email) => console.log('Contact form submitted with email:', email)}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="contact" data-section="contact" className="py-12 md:py-20 lg:py-24">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="We're here to help! Send us a message and we'll get back to you as soon as possible."
|
||||
inputs={[
|
||||
{ name: 'name', type: 'text', placeholder: 'Your Name', required: true },
|
||||
{ name: 'email', type: 'email', placeholder: 'Your Email', required: true }
|
||||
]}
|
||||
textarea={{ name: 'message', placeholder: 'Your Message', rows: 5, required: true }}
|
||||
imageSrc="/placeholders/placeholder-16-9.svg"
|
||||
imageAlt="Contact Us"
|
||||
mediaPosition="right"
|
||||
buttonText="Send Message"
|
||||
onSubmit={(data) => console.log('Contact form submitted:', data)}
|
||||
useInvertedBackground={false}
|
||||
className="w-full max-w-lg"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
146
src/app/page.tsx
146
src/app/page.tsx
@@ -1,119 +1,61 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import SparklesGradientBackground from '@/components/background/SparklesGradientBackground';
|
||||
|
||||
import { Lightbulb, Gem, ShieldCheck, Twitter, Linkedin } from 'lucide-react';
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Services', id: '#features' },
|
||||
{ name: 'Contact', id: '#contact' }
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Case Studies", id: "/case-studies" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
secondaryButtonStyle="solid"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Aethelred"
|
||||
button={{ text: 'Get Started', href: '#contact' }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
<SparklesGradientBackground />
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroLogo
|
||||
logoText="Aethelred"
|
||||
description="Crafting timeless digital experiences with unparalleled elegance and precision."
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="home" data-section="home" className="py-12 md:py-20 lg:py-24">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: 'glowing-orb' }}
|
||||
tag="Welcome"
|
||||
tagIcon={Sparkles}
|
||||
title="Crafting Digital Experiences"
|
||||
description="We specialize in building cutting-edge web applications and delightful user interfaces."
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: '/placeholder1.jpg', imageAlt: 'Web design concept' },
|
||||
{ imageSrc: '/placeholder2.jpg', imageAlt: 'Mobile app UI' },
|
||||
{ imageSrc: '/placeholder3.jpg', imageAlt: 'Data visualization dashboard' },
|
||||
{ imageSrc: '/placeholder4.jpg', imageAlt: 'Cloud infrastructure' }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: '/placeholder5.jpg', imageAlt: 'Responsive website' },
|
||||
{ imageSrc: '/placeholder6.jpg', imageAlt: 'Creative agency workspace' },
|
||||
{ imageSrc: '/placeholder7.jpg', imageAlt: 'Digital marketing strategy' },
|
||||
{ imageSrc: '/placeholder8.jpg', imageAlt: 'E-commerce solutions' }
|
||||
]}
|
||||
buttons={[
|
||||
{ text: 'Explore Services', href: '#features' },
|
||||
{ text: 'Get a Quote', href: '#contact' },
|
||||
]}
|
||||
imageSrc="https://assets.dev.webild.io/webild/images/bg_landing_hero.jpg"
|
||||
imageAlt="Luxury brand background"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Our Philosophy"
|
||||
description="At Aethelred, we believe in the fusion of sophisticated design and cutting-edge technology to deliver bespoke digital solutions. Our commitment to excellence ensures every project reflects a legacy of quality and innovation."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{ title: 'Exquisite Design', description: 'Crafting visually stunning and intuitive interfaces.', icon: Gem },
|
||||
{ title: 'Technical Mastery', description: 'Leveraging advanced technology for robust solutions.', icon: ShieldCheck },
|
||||
{ title: 'Client-Centric Approach', description: 'Dedicated partnership from concept to deployment.', icon: Lightbulb },
|
||||
]}
|
||||
imageSrc="https://assets.dev.webild.io/webild/images/about_split.jpg"
|
||||
imageAlt="About Aethelred"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
title="Unmatched Services"
|
||||
description="Discover the range of premium services designed to elevate your brand's digital presence."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: '01',
|
||||
title: 'Bespoke Web Development',
|
||||
description: 'Tailored web solutions built with precision and scalability.',
|
||||
imageSrc: 'https://assets.dev.webild.io/webild/images/card_dev.jpg',
|
||||
imageAlt: 'Custom web development',
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
title: 'Strategic Brand Identity',
|
||||
description: 'Developing a distinct and memorable brand voice and visual.',
|
||||
imageSrc: 'https://assets.dev.webild.io/webild/images/card_branding.jpg',
|
||||
imageAlt: 'Brand strategy',
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
title: 'Immersive UX/UI Design',
|
||||
description: 'Creating intuitive and engaging user experiences.',
|
||||
imageSrc: 'https://assets.dev.webild.io/webild/images/card_uxui.jpg',
|
||||
imageAlt: 'UX/UI Design',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<FooterCard
|
||||
logoText="Aethelred"
|
||||
copyrightText="© 2025 Aethelred. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: 'https://twitter.com/aethelred', ariaLabel: 'Twitter' },
|
||||
{ icon: Linkedin, href: 'https://linkedin.com/company/aethelred', ariaLabel: 'LinkedIn' },
|
||||
{ text: 'View Services', href: '/services' },
|
||||
{ text: 'Our Work', href: '/portfolio' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,94 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import TextBox from "@/components/Textbox";
|
||||
|
||||
export const metadata = {
|
||||
title: "Our Portfolio & Gallery", description: "Explore our latest projects and high-quality image galleries."};
|
||||
|
||||
const projectData = [
|
||||
{ id: "1", category: "Web Design", name: "E-commerce Redesign", price: "2023", rating: 5, reviewCount: "Client A", imageSrc: "/placeholder-project-1.jpg", imageAlt: "E-commerce Redesign" },
|
||||
{ id: "2", category: "Branding", name: "Corporate Identity", price: "2022", rating: 4, reviewCount: "Client B", imageSrc: "/placeholder-project-2.jpg", imageAlt: "Corporate Identity" },
|
||||
{ id: "3", category: "Development", name: "SaaS Platform", price: "2024", rating: 5, reviewCount: "Client C", imageSrc: "/placeholder-project-3.jpg", imageAlt: "SaaS Platform" },
|
||||
{ id: "4", category: "Mobile Apps", name: "Fitness Tracker App", price: "2023", rating: 4, reviewCount: "Client D", imageSrc: "/placeholder-project-4.jpg", imageAlt: "Fitness Tracker App" },
|
||||
{ id: "5", category: "Web Design", name: "Portfolio Website", price: "2024", rating: 5, reviewCount: "Client E", imageSrc: "/placeholder-project-5.jpg", imageAlt: "Portfolio Website" },
|
||||
{ id: "6", category: "Branding", name: "Startup Logo Kit", price: "2023", rating: 4, reviewCount: "Client F", imageSrc: "/placeholder-project-6.jpg", imageAlt: "Startup Logo Kit" },
|
||||
{ id: "7", category: "Development", name: "AI Chatbot Integration", price: "2024", rating: 5, reviewCount: "Client G", imageSrc: "/placeholder-project-7.jpg", imageAlt: "AI Chatbot Integration" },
|
||||
{ id: "8", category: "Mobile Apps", name: "Recipe Finder App", price: "2022", rating: 4, reviewCount: "Client H", imageSrc: "/placeholder-project-8.jpg", imageAlt: "Recipe Finder App" }
|
||||
];
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
|
||||
export default function PortfolioPage() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [categoryFilter, setCategoryFilter] = useState('All');
|
||||
|
||||
const categories = ['All', 'Web Design', 'Branding', 'Development', 'Mobile Apps'];
|
||||
|
||||
const filteredProjects = projectData.filter(project => {
|
||||
const matchesSearch = project.name.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesCategory = categoryFilter === 'All' || project.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
|
||||
const navItems = [{ name: 'Home', id: '/' }, { name: 'Portfolio', id: '/portfolio' }];
|
||||
const navButton = { text: 'Get Started', href: '#contact' };
|
||||
|
||||
const footerColumns = [
|
||||
{ items: [{ label: 'Home', href: '/' }, { label: 'Portfolio', href: '/portfolio' }] },
|
||||
{ items: [{ label: 'Privacy Policy', href: '#privacy' }] } // Using section link as no legal page exists
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
borderRadius="pill"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
background="circleGradient"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={navButton}
|
||||
brandName="Webild"
|
||||
/>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<TextBox
|
||||
title="Our Creative Portfolio"
|
||||
description="Explore a diverse collection of our design and development projects. Filter by category to find inspiration for your next endeavor."
|
||||
textboxLayout="default"
|
||||
center={true}
|
||||
className="py-16 md:py-24"
|
||||
/>
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
products={filteredProjects}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search projects..."
|
||||
filters={[{
|
||||
label: 'Category',
|
||||
options: categories,
|
||||
selected: categoryFilter,
|
||||
onChange: setCategoryFilter,
|
||||
}]}
|
||||
emptyMessage="No projects found matching your criteria."
|
||||
className="pb-24"
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="portfolio-hero" data-section="portfolio-hero" className="py-12 md:py-20 lg:py-24">
|
||||
<HeroOverlay
|
||||
title="Our Portfolio"
|
||||
description="Explore our latest projects and see how we bring ideas to life."
|
||||
textPosition="center"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
imageAlt="Portfolio background image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoEmphasis
|
||||
logoText="Webild"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,161 +1,43 @@
|
||||
"use client";
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import TextAnimation from '@/components/text/TextAnimation';
|
||||
import { LayoutDashboard, Rocket, Palette } from 'lucide-react';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navbarNavItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '/services' }
|
||||
];
|
||||
const footerColumns = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '#' },
|
||||
{ label: 'Pricing', href: '/pricing' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '/about' },
|
||||
{ label: 'Contact', href: '/contact' }
|
||||
]
|
||||
}
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
borderRadius="pill"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
background="circleGradient"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navbarNavItems}
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
brandName="Webild"
|
||||
/>
|
||||
<div id="services-hero" data-section="services-hero">
|
||||
<div className="relative isolate flex h-svh flex-col items-center justify-center p-8 text-center">
|
||||
<TextAnimation
|
||||
className="flex flex-col items-center justify-center space-y-4"
|
||||
titleClassName="text-5xl font-bold"
|
||||
descriptionClassName="mt-4 text-lg text-foreground/70"
|
||||
description="Explore our comprehensive offerings designed to meet your unique business needs."
|
||||
>
|
||||
Our Services
|
||||
</TextAnimation>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="detailed-offerings" data-section="detailed-offerings">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
title="What We Offer"
|
||||
description="From concept to launch, we provide end-to-end solutions."
|
||||
tag="Offerings"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 'web-dev',
|
||||
title: 'Web Development',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Building responsive, high-performance websites tailored to your business goals.',
|
||||
tags: ['Frontend', 'Backend', 'CMS'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1549692520-acc6669e2fde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'Web development code on screen'
|
||||
},
|
||||
{
|
||||
id: 'mobile-dev',
|
||||
title: 'Mobile App Development',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Crafting intuitive and engaging mobile applications for iOS and Android platforms.',
|
||||
tags: ['iOS', 'Android', 'Cross-Platform'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1590492211244-77a827419846?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'Mobile app development UI screens'
|
||||
},
|
||||
{
|
||||
id: 'ui-ux-design',
|
||||
title: 'UI/UX Design',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Creating stunning and user-friendly interfaces that enhance user experience.',
|
||||
tags: ['Wireframing', 'Prototyping', 'User Research'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1531297484643-982d6174164b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'UI/UX design mockups'
|
||||
}
|
||||
]}
|
||||
<div id="services-hero" data-section="services-hero" className="py-12 md:py-20 lg:py-24">
|
||||
<HeroOverlay
|
||||
title="Our Services"
|
||||
description="We offer a comprehensive suite of digital services to help your business thrive."
|
||||
textPosition="center"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
imageSrc="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
imageAlt="Services background image"
|
||||
/>
|
||||
</div>
|
||||
<div id="service-plans" data-section="service-plans">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
title="Our Service Plans"
|
||||
description="Find the perfect package for your project needs, from startups to enterprises."
|
||||
tag="Pricing"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: 'basic',
|
||||
badge: 'Starter',
|
||||
badgeIcon: Rocket,
|
||||
price: '$999',
|
||||
subtitle: 'Ideal for small projects & MVPs',
|
||||
buttons: [{ text: 'Get Started', href: '/contact' }],
|
||||
features: [
|
||||
'Basic Web Development',
|
||||
'Responsive Design',
|
||||
'1 Month Support',
|
||||
'SEO Fundamentals'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'standard',
|
||||
badge: 'Popular',
|
||||
badgeIcon: LayoutDashboard,
|
||||
price: '$2499',
|
||||
subtitle: 'Perfect for growing businesses',
|
||||
buttons: [{ text: 'Choose Plan', href: '/contact' }],
|
||||
features: [
|
||||
'Custom Web Development',
|
||||
'Mobile App Integration',
|
||||
'3 Months Support',
|
||||
'Advanced SEO',
|
||||
'Analytics Setup'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'premium',
|
||||
badge: 'Enterprise',
|
||||
badgeIcon: Palette,
|
||||
price: '$4999+',
|
||||
subtitle: 'For large-scale, custom solutions',
|
||||
buttons: [{ text: 'Contact Sales', href: '/contact' }],
|
||||
features: [
|
||||
'Enterprise-grade Solutions',
|
||||
'Dedicated Team',
|
||||
'6 Months Priority Support',
|
||||
'Full Stack Development',
|
||||
'Custom Integrations',
|
||||
'Advanced Security'
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseReveal columns={footerColumns} copyrightText="© 2025 Webild" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #000000;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #ffdf7d;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #CEE7FF;
|
||||
--accent: #b8860b;
|
||||
--background-accent: #8b6914;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user