Add src/app/work/page.tsx
This commit is contained in:
127
src/app/work/page.tsx
Normal file
127
src/app/work/page.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
export default function WorkPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", href: "/work" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "About", href: "/#about" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
]}
|
||||
button={{ text: "Get Started", href: "/#contact" }}
|
||||
/>
|
||||
<HeroSplit
|
||||
title="Our Portfolio & Case Studies"
|
||||
description="Explore a selection of our award-winning projects that demonstrate our commitment to design excellence and measurable results."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp"
|
||||
imageAlt="Portfolio showcase image"
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Our Services", href: "/services" },
|
||||
{ text: "Contact Us", href: "#contact-form" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="featured-projects" data-section="featured-projects">
|
||||
<ProductCardFour
|
||||
title="Featured Projects"
|
||||
description="Dive into our recent work and see how we've helped businesses like yours succeed online."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "umbra-skincare", name: "Umbra Skincare", price: "E-commerce", variant: "Web Design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Umbra Skincare website"},
|
||||
{
|
||||
id: "luxuria-travel", name: "Luxuria Travel", price: "Luxury Booking", variant: "UI/UX Design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Luxuria Travel website"},
|
||||
{
|
||||
id: "dental-care", name: "Dental Care", price: "Health Portal", variant: "Web Development", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Luxury Dental Care website"},
|
||||
{
|
||||
id: "summit-roofing", name: "Summit Roofing", price: "Local Business", variant: "Web Design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", imageAlt: "Summit Roofing website"},
|
||||
{
|
||||
id: "dubai-real-estate", name: "Dubai Real Estate", price: "Property Listing", variant: "UI/UX & Branding", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp", imageAlt: "Dubai Real Estate website"},
|
||||
{
|
||||
id: "agentflow-ai", name: "AgentFlow AI", price: "SaaS Platform", variant: "Full-Stack Dev", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "AgentFlow AI platform screenshot"},
|
||||
{
|
||||
id: "architecture-studio", name: "Architecture Studio", price: "Digital Presence", variant: "Custom Website", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Architecture studio website"},
|
||||
{
|
||||
id: "lumine-skincare", name: "Luminé Skincare", price: "Beauty Brand", variant: "E-commerce Design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Luminé skincare website"}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplitForm
|
||||
title="Have a Project in Mind?"
|
||||
description="We're excited to hear about your ideas. Let's create something remarkable together and bring your vision to life."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp"
|
||||
imageAlt="Team member working on a project"
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "projectDetails", placeholder: "Tell us about your project and goals", rows: 5, required: true }}
|
||||
buttonText="Get in Touch"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
logoText="Webild"
|
||||
copyrightText="© 2026 | Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/#about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Work", href: "/work" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Web Development", href: "/services" },
|
||||
{ label: "SEO", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Dribbble", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user