Initial commit

src/app/blog/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ReactLenis from "lenis/react";
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+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="text-stagger"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="mediumLarge"
+            sizing="mediumLarge"
+            background="aurora"
+            cardStyle="soft-shadow"
+            primaryButtonStyle="primary-glow"
+            secondaryButtonStyle="glass"
+            headingFontWeight="light"
+        >
+            <ReactLenis root>
+                <div className="min-h-screen bg-background">
+                    <NavbarStyleApple
+                        brandName="Next Year"
+                        navItems={[
+                            {"name":"Home","id":"/home"},
+                            {"name":"Home","id":"/"},
+                            {"name":"Services","id":"/services"},
+                            {"name":"Team","id":"/team"},
+                            {"name":"Insights","id":"/insights"},
+                            {"name":"Contact","id":"/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 perspectives, industry trends, and innovative solutions from our team"
+                            textboxLayout="default"
+                            useInvertedBackground="noInvert"
+                            animationType="slide-up"
+                            carouselMode="buttons"
+                            tag="Blog"
+                        />
+                    )}
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Team", id: "/team" },
+            { name: "Insights", id: "/insights" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Next Year"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Let's Connect"
+          description="Ready to start your wealth journey with Next Year? Schedule a consultation with our investment advisors to discuss your financial goals and explore how we can help."
+          inputs={[
+            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "companyName", type: "text", placeholder: "Company/Organization", required: false }
+          ]}
+          textarea={{
+            name: "message",
+            placeholder: "Tell us about your investment goals and how we can help...",
+            rows: 5,
+            required: true
+          }}
+          useInvertedBackground="noInvert"
+          imageSrc="https://img.b2bpic.net/free-photo/talk-financiers_1098-15804.jpg"
+          imageAlt="Professional meeting and consultation"
+          mediaPosition="right"
+          buttonText="Schedule Consultation"
+          onSubmit={{}}
+        />
+      </div>
+
+      <footer className="bg-foreground text-background py-12">
+        <div className="mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
+              <p className="text-background/80 mb-4">
+                Transforming wealth through intelligent investment strategies and expert guidance.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Navigation</h4>
+              <nav className="space-y-2">
+                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
+                  Home
+                </Link>
+                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
+                  Services
+                </Link>
+                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
+                  Team
+                </Link>
+                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
+                  Insights
+                </Link>
+                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
+                  Contact
+                </Link>
+              </nav>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Contact</h4>
+              <div className="text-background/80">
+                <p>Schedule a consultation to discuss your investment goals.</p>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
+            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </ThemeProvider>
+  );
+}

src/app/globals.css

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

src/app/insights/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+
+export default function InsightsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Team", id: "/team" },
+            { name: "Insights", id: "/insights" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Next Year"
+        />
+      </div>
+
+      <div id="insights-hero" data-section="insights-hero">
+        <HeroLogoBillboardSplit
+          logoText="INSIGHTS"
+          description="Market analysis, investment strategies, and financial insights to guide your wealth journey."
+          buttons={[
+            { text: "Read Our Blog", href: "#blog" },
+            { text: "Back to Home", href: "/" }
+          ]}
+          layoutOrder="default"
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/investment-economy-finance-business-trade-concept_53876-125582.jpg"
+          imageAlt="Market insights and analysis"
+          frameStyle="card"
+        />
+      </div>
+
+      <div id="blog" data-section="blog">
+        <BlogCardThree
+          title="Latest Articles"
+          description="Expert perspectives on market trends, investment strategies, and wealth management"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          animationType="slide-up"
+          blogs={[
+            {
+              id: "1",
+              category: "Investment Strategy",
+              title: "The Power of Diversification in Today's Markets",
+              excerpt: "Understanding how strategic asset allocation protects wealth during market volatility and uncertainty.",
+              imageSrc: "https://img.b2bpic.net/free-photo/co-workers-comparing-graphics_1098-1849.jpg",
+              imageAlt: "Diversification strategy article",
+              authorName: "James Richardson",
+              date: "Jan 15, 2025"
+            },
+            {
+              id: "2",
+              category: "Wealth Management",
+              title: "Tax-Efficient Investing: Maximize Your Returns",
+              excerpt: "Practical strategies to minimize tax impact and enhance net returns on your investment portfolio.",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",
+              imageAlt: "Tax-efficient investing guide",
+              authorName: "Sarah Mitchell",
+              date: "Jan 10, 2025"
+            },
+            {
+              id: "3",
+              category: "Market Trends",
+              title: "2025 Market Outlook: Navigating Economic Headwinds",
+              excerpt: "Our comprehensive analysis of global economic trends and market opportunities for the year ahead.",
+              imageSrc: "https://img.b2bpic.net/free-photo/coin-wooden-table-blurred-nature_1150-17703.jpg",
+              imageAlt: "Market trends analysis",
+              authorName: "David Park",
+              date: "Jan 5, 2025"
+            }
+          ]}
+        />
+      </div>
+
+      <footer className="bg-foreground text-background py-12">
+        <div className="mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
+              <p className="text-background/80 mb-4">
+                Transforming wealth through intelligent investment strategies and expert guidance.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Navigation</h4>
+              <nav className="space-y-2">
+                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
+                  Home
+                </Link>
+                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
+                  Services
+                </Link>
+                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
+                  Team
+                </Link>
+                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
+                  Insights
+                </Link>
+                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
+                  Contact
+                </Link>
+              </nav>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Contact</h4>
+              <div className="text-background/80">
+                <p>Schedule a consultation to discuss your investment goals.</p>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
+            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,287 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import FaqBase from '@/components/sections/faq/FaqBase';
+
+export default function HomePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Team", id: "/team" },
+            { name: "Insights", id: "/insights" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Next Year"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboardSplit
+          logoText="NEXT YEAR"
+          description="Transforming wealth through intelligent investment strategies, expert guidance, and long-term growth planning for discerning investors worldwide."
+          buttons={[
+            { text: "Schedule Consultation", href: "/contact" },
+            { text: "Explore Services", href: "/services" }
+          ]}
+          layoutOrder="default"
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/business-team-planning-marketing-strategy_53876-102032.jpg"
+          imageAlt="Investment and financial growth illustration"
+          frameStyle="browser"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MediaSplitTabsAbout
+          title="Why Choose Next Year"
+          description="We combine decades of market expertise with innovative investment strategies to deliver exceptional results."
+          tabs={[
+            {
+              id: "expertise",
+              label: "Deep Expertise",
+              description: "Our team brings over 150 years of combined experience across global markets, investment vehicles, and economic cycles. We've navigated bull markets, recessions, and unprecedented volatility to protect and grow our clients' wealth."
+            },
+            {
+              id: "personalized",
+              label: "Personalized Strategy",
+              description: "Every client is unique. We create tailored investment strategies aligned with your goals, risk tolerance, and timeline. No cookie-cutter portfolios—just personalized wealth management designed specifically for you."
+            },
+            {
+              id: "transparency",
+              label: "Complete Transparency",
+              description: "You'll always know exactly what we're doing with your investments. Regular reporting, clear communication, and honest advice form the foundation of our client relationships."
+            }
+          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
+          imageAlt="Professional team in office environment"
+          imagePosition="right"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardEleven
+          title="Our Track Record"
+          description="Proven results through market cycles and investment strategies"
+          metrics={[
+            {
+              id: "1",
+              value: "$8.7B",
+              title: "Assets Under Management",
+              description: "Growing portfolios for 2,400+ satisfied clients worldwide",
+              imageSrc: "https://img.b2bpic.net/free-photo/financial-status-budget-credit-debt-planning-concept_53876-13894.jpg",
+              imageAlt: "Assets under management illustration"
+            },
+            {
+              id: "2",
+              value: "14.2%",
+              title: "Average Annual Returns",
+              description: "Outperforming market benchmarks consistently over 10 years",
+              imageSrc: "https://img.b2bpic.net/free-photo/graph-growth-development-improvement-profit-success-concept_53876-133598.jpg",
+              imageAlt: "Investment returns performance chart"
+            },
+            {
+              id: "3",
+              value: "2,400+",
+              title: "Active Clients",
+              description: "High-net-worth individuals and institutional investors",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesspeople-discussing-meeting_1098-641.jpg",
+              imageAlt: "Client satisfaction and growth"
+            },
+            {
+              id: "4",
+              value: "25+",
+              title: "Years in Business",
+              description: "A quarter-century of trusted wealth management expertise",
+              imageSrc: "https://img.b2bpic.net/free-photo/piggy-bank-with-wooden-growth-blocks-arrow_23-2148780597.jpg",
+              imageAlt: "Business growth and success"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardEight
+          title="Our Investment Services"
+          description="Comprehensive wealth management solutions tailored to your financial goals"
+          tag="Services"
+          features={[
+            {
+              id: "1",
+              title: "Portfolio Management",
+              description: "Strategic asset allocation and ongoing portfolio optimization across diversified investments",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg",
+              imageAlt: "Portfolio management and analysis"
+            },
+            {
+              id: "2",
+              title: "Financial Advisory",
+              description: "Expert guidance on investment strategy, risk management, and long-term wealth planning",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",
+              imageAlt: "Financial advisory and consultation"
+            },
+            {
+              id: "3",
+              title: "Wealth Preservation",
+              description: "Tax-efficient strategies and estate planning to protect and preserve generational wealth",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-pointing-increase-sales_1098-1851.jpg",
+              imageAlt: "Wealth preservation strategies"
+            },
+            {
+              id: "4",
+              title: "Retirement Planning",
+              description: "Comprehensive retirement strategies ensuring financial security and income sustainability",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",
+              imageAlt: "Retirement planning consultation"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Next Year transformed our investment strategy and has consistently delivered exceptional returns. Their personalized approach and transparent communication give us complete confidence in our financial future."
+          rating={5}
+          author="Michael Chen, CEO at TechVentures Inc."
+          avatars={[
+            {
+              src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",
+              alt: "Client testimonial avatar 1"
+            },
+            {
+              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
+              alt: "Client testimonial avatar 2"
+            },
+            {
+              src: "https://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg",
+              alt: "Client testimonial avatar 3"
+            },
+            {
+              src: "https://img.b2bpic.net/free-photo/portrait-outdoors-business-man-smiles_23-2148763856.jpg",
+              alt: "Client testimonial avatar 4"
+            },
+            {
+              src: "https://img.b2bpic.net/free-photo/portrait-confident-businessman_1098-21013.jpg",
+              alt: "Client testimonial avatar 5"
+            },
+            {
+              src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",
+              alt: "Client testimonial avatar 6"
+            }
+          ]}
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our investment services and approach"
+          tag="Help"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          faqs={[
+            {
+              id: "1",
+              title: "What is the minimum investment amount?",
+              content: "Our typical minimum investment is $500,000, though we consider qualified investors with lower minimums on a case-by-case basis. We're committed to working with clients at various asset levels."
+            },
+            {
+              id: "2",
+              title: "How do you charge for your services?",
+              content: "We operate on an assets-under-management (AUM) fee model, with tiered rates that decrease as your portfolio grows. Most clients pay between 0.5% and 1.5% annually, depending on portfolio size and service level."
+            },
+            {
+              id: "3",
+              title: "How often will I hear from my advisor?",
+              content: "You'll receive comprehensive quarterly performance reports. We also conduct annual strategy reviews and are available for consultation whenever market conditions or life changes warrant discussion."
+            },
+            {
+              id: "4",
+              title: "Can you manage multiple types of investments?",
+              content: "Yes, we manage equities, fixed income, alternative investments, real estate, and commodities. Our diversified approach helps optimize risk-adjusted returns across your entire portfolio."
+            },
+            {
+              id: "5",
+              title: "What happens if the market declines?",
+              content: "We design portfolios with downside protection in mind. Our strategies include hedging techniques, diversification, and defensive positioning to help minimize losses during market downturns."
+            },
+            {
+              id: "6",
+              title: "How long have you been managing investments?",
+              content: "Next Year was founded in 1999 and has successfully navigated multiple market cycles, including the 2008 financial crisis and COVID-19 pandemic. Our 25+ years of experience informs our prudent investment philosophy."
+            }
+          ]}
+        />
+      </div>
+
+      <footer className="bg-foreground text-background py-12">
+        <div className="mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
+              <p className="text-background/80 mb-4">
+                Transforming wealth through intelligent investment strategies and expert guidance.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Navigation</h4>
+              <nav className="space-y-2">
+                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
+                  Home
+                </Link>
+                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
+                  Services
+                </Link>
+                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
+                  Team
+                </Link>
+                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
+                  Insights
+                </Link>
+                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
+                  Contact
+                </Link>
+              </nav>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Contact</h4>
+              <div className="text-background/80">
+                <p>Schedule a consultation to discuss your investment goals.</p>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
+            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,196 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Team", id: "/team" },
+            { name: "Insights", id: "/insights" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Next Year"
+        />
+      </div>
+
+      <div id="services-hero" data-section="services-hero">
+        <HeroLogoBillboardSplit
+          logoText="OUR SERVICES"
+          description="Comprehensive investment solutions designed to grow and protect your wealth through every market cycle."
+          buttons={[
+            { text: "Schedule Consultation", href: "/contact" },
+            { text: "Back to Home", href: "/" }
+          ]}
+          layoutOrder="default"
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg"
+          imageAlt="Investment services overview"
+          frameStyle="card"
+        />
+      </div>
+
+      <div id="services-detailed" data-section="services-detailed">
+        <FeatureCardEight
+          title="Comprehensive Wealth Management Solutions"
+          description="Each service is designed with your unique financial goals and circumstances in mind"
+          features={[
+            {
+              id: "1",
+              title: "Personalized Portfolio Management",
+              description: "Custom-built investment portfolios aligned with your risk tolerance, time horizon, and financial objectives, with continuous monitoring and rebalancing.",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-employees-looking-business-document_1098-1850.jpg",
+              imageAlt: "Portfolio management services"
+            },
+            {
+              id: "2",
+              title: "Wealth Advisory & Planning",
+              description: "Strategic guidance on overall wealth management, including investment strategy, tax efficiency, and multi-generational planning.",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",
+              imageAlt: "Wealth advisory services"
+            },
+            {
+              id: "3",
+              title: "Retirement Income Planning",
+              description: "Comprehensive retirement strategies ensuring adequate income, tax optimization, and sustainable drawdown rates throughout retirement.",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-pointing-increase-sales_1098-1851.jpg",
+              imageAlt: "Retirement planning services"
+            },
+            {
+              id: "4",
+              title: "Estate & Succession Planning",
+              description: "Multi-jurisdictional estate planning, trust structuring, and succession strategies to preserve wealth for future generations efficiently.",
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswomen-doing-interview_1098-663.jpg",
+              imageAlt: "Estate planning services"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="services-pricing" data-section="services-pricing">
+        <PricingCardFive
+          title="Service Packages"
+          description="Flexible pricing structures tailored to your portfolio size and service requirements"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+          plans={[
+            {
+              id: "essential",
+              tag: "Essential Package",
+              price: "1.25%",
+              period: "/year",
+              description: "Complete portfolio management for assets up to $2 million with quarterly reviews and ongoing advisory support.",
+              button: { text: "Learn More", href: "/contact" },
+              featuresTitle: "Included Features:",
+              features: [
+                "Portfolio management & monitoring",
+                "Quarterly performance reports",
+                "Annual strategy review",
+                "Tax loss harvesting",
+                "Investment rebalancing"
+              ]
+            },
+            {
+              id: "premier",
+              tag: "Premier Package",
+              price: "0.85%",
+              period: "/year",
+              description: "Enhanced wealth management for $2-5 million portfolios with premium advisory services and wealth planning.",
+              button: { text: "Learn More", href: "/contact" },
+              featuresTitle: "Included Features:",
+              features: [
+                "All Essential features",
+                "Comprehensive wealth planning",
+                "Semi-annual strategy reviews",
+                "Tax optimization strategies",
+                "Estate planning consultation",
+                "Dedicated relationship manager"
+              ]
+            },
+            {
+              id: "elite",
+              tag: "Elite Package",
+              price: "0.55%",
+              period: "/year",
+              description: "Premier wealth management for portfolios exceeding $5 million with personalized service and multi-generational planning.",
+              button: { text: "Learn More", href: "/contact" },
+              featuresTitle: "Included Features:",
+              features: [
+                "All Premier features",
+                "Multi-generational planning",
+                "Alternative investment access",
+                "Private investment opportunities",
+                "Quarterly advisor meetings",
+                "24/7 priority access",
+                "Customized reporting"
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <footer className="bg-foreground text-background py-12">
+        <div className="mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
+              <p className="text-background/80 mb-4">
+                Transforming wealth through intelligent investment strategies and expert guidance.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Navigation</h4>
+              <nav className="space-y-2">
+                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
+                  Home
+                </Link>
+                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
+                  Services
+                </Link>
+                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
+                  Team
+                </Link>
+                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
+                  Insights
+                </Link>
+                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
+                  Contact
+                </Link>
+              </nav>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Contact</h4>
+              <div className="text-background/80">
+                <p>Schedule a consultation to discuss your investment goals.</p>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
+            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </ThemeProvider>
+  );
+}

src/app/team/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import TeamCardSix from '@/components/sections/team/TeamCardSix';
+
+export default function TeamPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Team", id: "/team" },
+            { name: "Insights", id: "/insights" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Next Year"
+        />
+      </div>
+
+      <div id="team-hero" data-section="team-hero">
+        <HeroLogoBillboardSplit
+          logoText="EXPERT TEAM"
+          description="Meet the seasoned investment professionals dedicated to your financial success and wealth growth."
+          buttons={[
+            { text: "Schedule Consultation", href: "/contact" },
+            { text: "Back to Home", href: "/" }
+          ]}
+          layoutOrder="default"
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
+          imageAlt="Next Year team"
+          frameStyle="card"
+        />
+      </div>
+
+      <div id="team-members" data-section="team-members">
+        <TeamCardSix
+          title="Leadership Team"
+          description="Experienced investment professionals with proven track records across global markets"
+          members={[
+            {
+              id: "1",
+              name: "James Richardson",
+              role: "Chief Investment Officer",
+              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-work_1098-286.jpg",
+              imageAlt: "James Richardson, CIO"
+            },
+            {
+              id: "2",
+              name: "Sarah Mitchell",
+              role: "Head of Wealth Management",
+              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg",
+              imageAlt: "Sarah Mitchell, Wealth Management"
+            },
+            {
+              id: "3",
+              name: "David Park",
+              role: "Senior Portfolio Manager",
+              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3796.jpg",
+              imageAlt: "David Park, Portfolio Manager"
+            },
+            {
+              id: "4",
+              name: "Jennifer Torres",
+              role: "Financial Advisor",
+              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
+              imageAlt: "Jennifer Torres, Financial Advisor"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          tag="Experts"
+        />
+      </div>
+
+      <footer className="bg-foreground text-background py-12">
+        <div className="mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="md:col-span-2">
+              <h3 className="text-xl font-semibold mb-4">Next Year</h3>
+              <p className="text-background/80 mb-4">
+                Transforming wealth through intelligent investment strategies and expert guidance.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Navigation</h4>
+              <nav className="space-y-2">
+                <Link href="/" className="block text-background/80 hover:text-background transition-colors">
+                  Home
+                </Link>
+                <Link href="/services" className="block text-background/80 hover:text-background transition-colors">
+                  Services
+                </Link>
+                <Link href="/team" className="block text-background/80 hover:text-background transition-colors">
+                  Team
+                </Link>
+                <Link href="/insights" className="block text-background/80 hover:text-background transition-colors">
+                  Insights
+                </Link>
+                <Link href="/contact" className="block text-background/80 hover:text-background transition-colors">
+                  Contact
+                </Link>
+              </nav>
+            </div>
+            <div>
+              <h4 className="font-semibold mb-4">Contact</h4>
+              <div className="text-background/80">
+                <p>Schedule a consultation to discuss your investment goals.</p>
+              </div>
+            </div>
+          </div>
+          <div className="border-t border-background/20 mt-8 pt-8 text-center text-background/60">
+            <p>&copy; 2025 Next Year Investment Agency. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </ThemeProvider>
+  );
+}