diff --git a/src/app/page.tsx b/src/app/page.tsx index 2470f00..01b6e75 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ -"use client"; +'use client'; -import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import React from 'react'; +import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi'; import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive'; @@ -12,242 +13,300 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import ContactText from '@/components/sections/contact/ContactText'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; -import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp } from 'lucide-react'; +import { Zap, Dumbbell, Apple, TrendingUp } from 'lucide-react'; -export default function LandingPage() { +const navItems = [ + { name: 'Home', id: '/' }, + { name: 'Features', id: 'onboarding' }, + { name: 'Pricing', id: 'nutrition' }, + { name: 'Team', id: 'team' }, + { name: 'Contact', id: 'contact' }, +]; + +const Page = () => { return (
@@ -285,99 +365,98 @@ export default function LandingPage() {
); -} +}; + +export default Page; diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx index 4742c29..3f80a7a 100644 --- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx @@ -6,10 +6,10 @@ import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation' const AutoCarousel: React.FC = ({ items, className = '' }) => { const animation = useCardAnimation(); - const itemRefs = React.useRef<(HTMLElement | null)[]>([]); + const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); return ( -
+
} className={`auto-carousel ${className}`}> {items.map((item, index) => (
{ if (el) itemRefs.current[index] = el; }} className="carousel-item"> {item.title} diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx index 450905c..d82d917 100644 --- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx @@ -6,10 +6,10 @@ import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation' const ButtonCarousel: React.FC = ({ items, className = '' }) => { const animation = useCardAnimation(); - const itemRefs = React.useRef<(HTMLElement | null)[]>([]); + const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); return ( -
+
} className={`button-carousel ${className}`}> {items.map((item, index) => (
{ if (el) itemRefs.current[index] = el; }} className="carousel-item"> {item.title} diff --git a/src/components/cardStack/layouts/grid/GridLayout.tsx b/src/components/cardStack/layouts/grid/GridLayout.tsx index 05ee359..7593299 100644 --- a/src/components/cardStack/layouts/grid/GridLayout.tsx +++ b/src/components/cardStack/layouts/grid/GridLayout.tsx @@ -6,12 +6,12 @@ import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation' const GridLayout: React.FC = ({ items, className = '' }) => { const animation = useCardAnimation(); - const itemRefs = React.useRef<(HTMLElement | null)[]>([]); + const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); return ( -
-
-
+
} className={`grid-layout ${className}`}> +
} className="grid-perspective"> +
} className="grid-container"> {items.map((item, index) => (
{ if (el) itemRefs.current[index] = el; }} className="grid-item"> {item.title}