feat(hero): integrate InkDataMorph animation into Hero Section
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { StaticLink } from '@/components/ui/static-link';
|
import { StaticLink } from '@/components/ui/static-link';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -8,6 +9,11 @@ import { COMPANY_INFO } from '@/lib/constants';
|
|||||||
import { ArrowRight } from 'lucide-react';
|
import { ArrowRight } from 'lucide-react';
|
||||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||||
|
|
||||||
|
const InkDataMorph = dynamic(
|
||||||
|
() => import('@/components/effects/ink-data-morph').then(mod => ({ default: mod.InkDataMorph })),
|
||||||
|
{ ssr: false }
|
||||||
|
);
|
||||||
|
|
||||||
export function HeroSectionV2() {
|
export function HeroSectionV2() {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
const sectionRef = useRef<HTMLElement>(null);
|
||||||
@@ -42,6 +48,7 @@ export function HeroSectionV2() {
|
|||||||
aria-labelledby="hero-heading"
|
aria-labelledby="hero-heading"
|
||||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
|
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
|
||||||
>
|
>
|
||||||
|
<InkDataMorph />
|
||||||
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
|
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
|
||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
Reference in New Issue
Block a user