Merge version_2 into main #2
@@ -2,32 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ProductCart from "@/components/ecommerce/cart/ProductCart";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function CartPage() {
|
||||
const [items, setItems] = useState([
|
||||
{ id: "1", name: "Premium Web Design Package", price: "$1,500", quantity: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
|
||||
{ id: "2", name: "SEO Strategy Audit", price: "$500", quantity: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
|
||||
]);
|
||||
|
||||
const handleRemove = (id: string) => setItems(items.filter(item => item.id !== id));
|
||||
const handleUpdate = (id: string, qty: number) => setItems(items.map(i => i.id === id ? { ...i, quantity: qty } : i));
|
||||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
<div className="pt-32 pb-20">
|
||||
<ProductCart
|
||||
isOpen={true}
|
||||
items={items}
|
||||
onClose={() => {}}
|
||||
onQuantityChange={handleUpdate}
|
||||
onRemove={handleRemove}
|
||||
total="$2,500"
|
||||
buttons={[{ text: "Proceed to Checkout", href: "/checkout" }]}
|
||||
/>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Cart Page</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,28 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import TextBox from "@/components/Textbox";
|
||||
|
||||
export default function CheckoutPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
<div className="pt-32 pb-20 px-8">
|
||||
<TextBox
|
||||
title="Checkout"
|
||||
description="Please enter your shipping address and select a shipping method to complete your order."
|
||||
textboxLayout="split"
|
||||
/>
|
||||
<div className="max-w-2xl mt-10 grid gap-6">
|
||||
<input className="w-full p-4 border rounded-full" placeholder="Full Name" />
|
||||
<input className="w-full p-4 border rounded-full" placeholder="Shipping Address" />
|
||||
<select className="w-full p-4 border rounded-full">
|
||||
<option>Standard Shipping - Free</option>
|
||||
<option>Express Shipping - $15.00</option>
|
||||
</select>
|
||||
<button className="px-8 py-4 bg-primary rounded-full text-white">Complete Purchase</button>
|
||||
</div>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Checkout Page</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "/#work" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
{ name: "Login", id: "/login" }
|
||||
]}
|
||||
/>
|
||||
<div className="min-h-screen flex items-center justify-center pt-20">
|
||||
<div className="w-full max-w-md p-8 bg-card rounded-2xl shadow-xl">
|
||||
<h1 className="text-3xl font-bold mb-6 text-center">Login</h1>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Email</label>
|
||||
<input type="email" className="w-full p-3 border rounded-lg" onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Password</label>
|
||||
<input type="password" className="w-full p-3 border rounded-lg" onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
<button className="w-full py-3 bg-primary-cta text-white rounded-lg font-bold">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
navItems={[{ name: "Home", id: "/" }]}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<h1>Login Content</h1>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -5,23 +5,11 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
|
||||
|
||||
export default function OrderHistoryPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Order Tracking", id: "/order-tracking" },
|
||||
{ name: "Order History", id: "/order-history" },
|
||||
{ name: "Wishlist", id: "/wishlist" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<main className="min-h-screen pt-32 px-6">
|
||||
<h1 className="text-4xl font-bold mb-8">Order History</h1>
|
||||
<p>View your past orders and status.</p>
|
||||
</main>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Order History</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -5,23 +5,11 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
|
||||
|
||||
export default function OrderTrackingPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Order Tracking", id: "/order-tracking" },
|
||||
{ name: "Order History", id: "/order-history" },
|
||||
{ name: "Wishlist", id: "/wishlist" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<main className="min-h-screen pt-32 px-6">
|
||||
<h1 className="text-4xl font-bold mb-8">Order Tracking</h1>
|
||||
<p>Enter your tracking number below to view your order status.</p>
|
||||
</main>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Order Tracking</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
120
src/app/page.tsx
120
src/app/page.tsx
@@ -6,15 +6,11 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Suspense } from "react";
|
||||
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
|
||||
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap } from "lucide-react";
|
||||
|
||||
function LoadingFallback() {
|
||||
return <div className="flex items-center justify-center min-h-screen text-lg">Loading your experience...</div>;
|
||||
@@ -30,74 +26,50 @@ export default function WebAgency2Page() {
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Products", id: "/products" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<main className="flex flex-col w-full overflow-hidden">
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="We Build Digital Experiences"
|
||||
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
|
||||
tag="Award-Winning Agency"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Start Project", href: "#contact" },
|
||||
{ text: "View Work", href: "#work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design - Daily Life app" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design - SaaS platform" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design - Luxuria travel" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design - Dental practice" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" },
|
||||
]}
|
||||
carouselItemClassName="!aspect-[4/5]"
|
||||
buttons={[{ text: "Start Project", href: "#contact" }, { text: "View Work", href: "#work" }]}
|
||||
leftCarouselItems={[{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design" }]}
|
||||
rightCarouselItems={[{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
title="Our Services"
|
||||
description="We offer a full suite of digital services to help your brand stand out online."
|
||||
description="We offer a full suite of digital services."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
buttons={[{ text: "All Services", href: "#services" }]}
|
||||
buttonAnimation="slide-up"
|
||||
features={[
|
||||
{ title: "SEO", description: "We optimize your website to rank higher on search engines and drive organic traffic.", bentoComponent: "marquee", centerIcon: Search, variant: "text", texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"] },
|
||||
{ title: "Web Development", description: "Custom-built websites that are fast, responsive, and designed to convert.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project - AgentFlow AI platform" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project - Architecture studio" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" },
|
||||
] },
|
||||
{ title: "Branding", description: "Build a memorable brand identity that resonates with your audience.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Brand project 1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Brand project 2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" },
|
||||
{ title: "SEO", description: "High ranking optimization.", bentoComponent: "marquee", centerIcon: Search },
|
||||
{ title: "Web Development", description: "Custom-built responsive sites.", bentoComponent: "media-stack", items: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project" },
|
||||
] },
|
||||
]}
|
||||
/>
|
||||
@@ -106,18 +78,14 @@ export default function WebAgency2Page() {
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentySix
|
||||
title="Our Work"
|
||||
description="A selection of projects we've crafted for clients across industries."
|
||||
description="A selection of projects we've crafted."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View All Work", href: "#work" }]}
|
||||
buttonAnimation="slide-up"
|
||||
cardClassName="!h-auto aspect-video"
|
||||
features={[
|
||||
{ title: "Umbra Skincare", description: "Luxury fragrance e-commerce", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Umbra Skincare website", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Luxuria Travel", description: "Bespoke luxury travel experiences", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Luxuria Travel website", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Dental Care", description: "Premier dental practice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Luxury Dental Care website", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Summit Roofing", description: "Professional roofing services", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", imageAlt: "Summit Roofing website", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Dubai Real Estate", description: "Luxury property listings", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp", imageAlt: "Dubai Real Estate website", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Project A", description: "Luxury fragrance", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", buttonIcon: ArrowUpRight },
|
||||
{ title: "Project B", description: "Bespoke travel", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", buttonIcon: ArrowUpRight },
|
||||
{ title: "Project C", description: "Dental care", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", buttonIcon: ArrowUpRight },
|
||||
{ title: "Project D", description: "Professional roofing", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", buttonIcon: ArrowUpRight },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -125,15 +93,14 @@ export default function WebAgency2Page() {
|
||||
<div id="about" data-section="about">
|
||||
<MetricCardOne
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Years of experience building digital products that drive real results."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Years of experience building products."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
metrics={[
|
||||
{ id: "projects", value: "100+", title: "Projects", items: ["Successfully delivered across all industries"] },
|
||||
{ id: "satisfaction", value: "99%", title: "Satisfaction", items: ["Client satisfaction rate and counting"] },
|
||||
{ id: "years", value: "8+", title: "Years", items: ["Of crafting exceptional digital experiences"] },
|
||||
{ id: "1", value: "100+", title: "Projects", description: "Successfully delivered.", icon: Monitor },
|
||||
{ id: "2", value: "99%", title: "Satisfaction", description: "Client retention rate.", icon: Shield },
|
||||
{ id: "3", value: "8+", title: "Years", description: "Of craft experience.", icon: Zap },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -141,26 +108,21 @@ export default function WebAgency2Page() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
title="Ready to Transform Your Digital Presence?"
|
||||
description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
|
||||
title="Ready to Transform?"
|
||||
description="Let's build something extraordinary together."
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
buttons={[
|
||||
{ text: "Start Your Project", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
<FooterBaseCard
|
||||
logoText="Webild"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
columns={[{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }]}
|
||||
/>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</Suspense>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay brandName="Webild" navItems={[{name: "Home", id: "/"}, {name: "Products", id: "/products"}]} />
|
||||
<div className="pt-24">
|
||||
<ProductDetailCard
|
||||
layout="page"
|
||||
name="Premium Headset"
|
||||
price="$199"
|
||||
description="Experience crystal clear sound with our premium noise-canceling headphones."
|
||||
images={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", alt: "Product" }]}
|
||||
buttons={[{ text: "Add to Cart" }]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBase logoText="Webild" />
|
||||
</ReactLenis>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Product Detail</div>
|
||||
<FooterBaseCard logoText="Webild" columns={[{ title: "Nav", items: [{ label: "Home", href: "/" }] }]} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
|
||||
export default function ProductListingPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
];
|
||||
|
||||
const products = [
|
||||
{ id: "1", name: "Premium Headset", price: "$199", variant: "Black", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
|
||||
{ id: "2", name: "Smart Watch", price: "$299", variant: "Silver", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
|
||||
{ id: "3", name: "Wireless Mouse", price: "$89", variant: "Matte", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
|
||||
];
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay brandName="Webild" navItems={navItems} />
|
||||
<div className="pt-24">
|
||||
<ProductCardFour
|
||||
title="Our Products"
|
||||
description="Explore our curated collection of high-performance digital tools."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={products}
|
||||
/>
|
||||
</div>
|
||||
<FooterBase logoText="Webild" />
|
||||
</ReactLenis>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay brandName="Webild" navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<ProductCardTwo
|
||||
title="Products"
|
||||
description="Our collection"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
products={[
|
||||
{ id: "1", brand: "A", name: "P1", price: "$10", rating: 5, reviewCount: "10", imageSrc: "/i1.jpg" },
|
||||
{ id: "2", brand: "B", name: "P2", price: "$20", rating: 4, reviewCount: "20", imageSrc: "/i2.jpg" },
|
||||
{ id: "3", brand: "C", name: "P3", price: "$30", rating: 5, reviewCount: "30", imageSrc: "/i3.jpg" }
|
||||
]}
|
||||
/>
|
||||
<FooterBaseCard logoText="Webild" columns={[{ title: "Nav", items: [{ label: "Home", href: "/" }] }]} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -5,23 +5,11 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
|
||||
|
||||
export default function WishlistPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Order Tracking", id: "/order-tracking" },
|
||||
{ name: "Order History", id: "/order-history" },
|
||||
{ name: "Wishlist", id: "/wishlist" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
<main className="min-h-screen pt-32 px-6">
|
||||
<h1 className="text-4xl font-bold mb-8">Wishlist</h1>
|
||||
<p>Manage your saved items.</p>
|
||||
</main>
|
||||
<ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }]} />
|
||||
</div>
|
||||
<div className="pt-32">Wishlist</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user