121 lines
5.2 KiB
TypeScript
121 lines
5.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
|
|
export default function ProcessPage() {
|
|
const navItems = [
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Work", href: "/work" },
|
|
{ label: "Services", href: "/services" },
|
|
{ label: "Process", href: "/process" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Email", href: "mailto:hello@afrozarchives.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Afrozarchives"
|
|
bottomLeftText="Motion Design Studio"
|
|
bottomRightText="hello@afrozarchives.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<ProductCardOne
|
|
title="Our Process Explained"
|
|
description="A transparent, collaborative approach that ensures your vision becomes reality"
|
|
tag="How We Work"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", name: "Kickoff", price: "Discuss your video goals and creative vision together", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Project kickoff meeting"},
|
|
{
|
|
id: "2", name: "Concept", price: "Plan a script and storyboard with your ideas", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Concept development phase"},
|
|
{
|
|
id: "3", name: "Creation", price: "Animate, revise, and deliver your finished video", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Animation creation phase"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process-details" data-section="process-details">
|
|
<FeatureCardTwentySeven
|
|
title="What Happens at Each Stage"
|
|
description="Detailed breakdown of our collaborative motion design process"
|
|
tag="Process Details"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Discovery & Strategy", description:
|
|
"We start with understanding your brand, goals, and target audience. This foundation guides all creative decisions.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Discovery phase"},
|
|
{
|
|
id: "2", title: "Scripting & Storyboarding", description:
|
|
"We craft compelling narratives and visual sequences that communicate your message with clarity and emotion.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Storyboarding process"},
|
|
{
|
|
id: "3", title: "Animation Production", description:
|
|
"Our team brings your story to life with fluid motion, sound design, and polish that showcases your brand.", imageSrc:
|
|
"http://img.b2bpic.net/free-vector/bloggers-screen-collection_23-2148539660.jpg", imageAlt: "Animation production"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis logoText="Afrozarchives" columns={footerColumns} />
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |