From 51d1f4ed777e71240039a41554915b375daf2285 Mon Sep 17 00:00:00 2001
From: SANTHSIM22 <santhsimviriledsouza123456@gmail.com>
Date: Sun, 27 Oct 2024 13:14:59 +0530
Subject: [PATCH] feat: hero-page

---
 src/app/page.tsx                  |  10 +-
 src/components/common/About.tsx   |  10 +-
 src/components/widget/hero.tsx    | 177 ++++++++++++++++++++++++++++++
 src/components/widget/landing.tsx |  48 ++++++++
 4 files changed, 237 insertions(+), 8 deletions(-)
 create mode 100644 src/components/widget/hero.tsx
 create mode 100644 src/components/widget/landing.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 90c8fe9..bbb268d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,15 +8,19 @@ import About from "@/components/common/About";
 import Team from "@/components/common/Team-Section";
 import { CtaSection } from "@/components/common/cta-section";
 import Performers from "@/components/widget/performers";
+import HeroHighlight from "@/components/widget/hero";
+import Landing_page from "@/components/widget/landing";
 
 export default function Home() {
     return (
-        <>
+        <>   
+            {/* <Landing_page/> */}
             <div className="z-20 relative bg-blackTheme overflow-x-clip">
-                <div
+               <HeroHighlight/>
+                {/* <div
                     className="flex flex-col items-center justify-center h-screen w-full p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
                     id="hero"
-                ></div>
+                ></div> */}
                 <div className="h-screen" id="about">
                     <About />
                 </div>
diff --git a/src/components/common/About.tsx b/src/components/common/About.tsx
index 926a25d..e9d63be 100644
--- a/src/components/common/About.tsx
+++ b/src/components/common/About.tsx
@@ -2,16 +2,16 @@ import { motion } from "framer-motion";
 
 const AboutSection: React.FC = () => {
   return (
-    <section className="relative flex items-center justify-center min-h-screen bg-black text-white">
+    <section className="relative flex items-center justify-center min-h-screen bg-blackTheme text-white">
       {/* Background decorative layers */}
       <div className="absolute inset-0">
-        <motion.div
+        {/* <motion.div
           className="absolute w-full h-full bg-gradient-to-br from-redTheme via-blackTheme to-blackTheme opacity-70"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 1 }}
-        />
-        <motion.div
+        /> */}
+        {/* <motion.div
           className="absolute -top-20 -left-20 w-64 h-64 animate-pulse md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
@@ -22,7 +22,7 @@ const AboutSection: React.FC = () => {
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ duration: 1.5, ease: "easeOut", delay: 0.3 }}
-        />
+        /> */}
       </div>
 
       {/* About content */}
diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx
new file mode 100644
index 0000000..34b60af
--- /dev/null
+++ b/src/components/widget/hero.tsx
@@ -0,0 +1,177 @@
+'use client'
+
+import { tedxsjecAssetsPrefix } from "@/lib/utils"
+import { useState, useEffect, useRef } from "react"
+import Image from "next/image"
+import { Button } from "@/components/ui/button"
+import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion"
+import { ArrowRight, Calendar, MapPin } from "lucide-react"
+
+type TimeLeft = {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+}
+
+const StaticShadow = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.div 
+      className="relative w-72 h-72 md:w-[500px] md:h-[500px]"
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.8, ease: "easeOut" }}
+      style={{
+        filter: 'drop-shadow(0 0 15px rgba(255, 255, 255, 0.4))'
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+const FlipCard = ({ value, label }: { value: number; label: string }) => {
+  return (
+    <motion.div 
+      className="flex flex-col items-center justify-center bg-gradient-to-b from-red-900 to-red-950 rounded-lg shadow-lg p-2 w-full aspect-square overflow-hidden border border-red-500/30"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="relative w-full h-2/3 bg-black/30 rounded-md flex items-center justify-center">
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            key={value}
+            initial={{ y: '100%', opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: '-100%', opacity: 0 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+            className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white"
+          >
+            {value.toString().padStart(2, '0')}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+      <span className="text-xs sm:text-sm md:text-base capitalize text-white mt-2 font-semibold">{label}</span>
+    </motion.div>
+  )
+}
+
+export default function HeroHighlight() {
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+  const svgRef = useRef<SVGSVGElement>(null)
+  const targetDate = new Date('2024-12-14')
+
+  const { scrollYProgress } = useScroll()
+  const pathLength = useTransform(scrollYProgress, [0, 0.8], [0, 1])
+
+  useEffect(() => {
+    setIsLoaded(true)
+
+    const intervalId = setInterval(() => {
+      const now = new Date()
+      const difference = targetDate.getTime() - now.getTime()
+
+      if (difference > 0) {
+        setTimeLeft({
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60)
+        })
+      } else {
+        clearInterval(intervalId)
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+      }
+    }, 1000)
+
+    return () => clearInterval(intervalId)
+  }, [targetDate])
+
+  const timeUnits: (keyof TimeLeft)[] = ['days', 'hours', 'minutes', 'seconds']
+
+  return (
+    <section className="w-full min-h-screen bg-gradient-to-b from-blackTheme via-red-900 to-blackTheme text-white overflow-hidden relative">
+      <svg
+        ref={svgRef}
+        className="absolute top-0 left-0 w-full h-full pointer-events-none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.path
+          d="M0,120 C150,180 300,0 500,100 C700,200 800,0 1000,80 C1200,160 1400,0 1600,100 C1800,200 2000,0 2200,80 L2200,600 L0,600 Z"
+          fill="none"
+          stroke="rgba(255,255,255,0.2)"
+          strokeWidth="2"
+          style={{
+            pathLength: pathLength,
+            strokeDasharray: 1,
+            strokeDashoffset: 1,
+          }}
+        />
+      </svg>
+
+      <div className="container mx-auto px-4 py-8 flex flex-col-reverse lg:flex-row items-center justify-between relative z-10">
+        <motion.div 
+          className="lg:w-1/2 space-y-8 hero-2"
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <h1 className="text-[28px] py-1 md:text-6xl font-satoshi lg:mt-10 font-extrabold bg-clip-text text-white">
+            Ideas Worth Spreading
+          </h1>
+          <p className="text-xl md:text-2xl font-satoshi text-white max-w-2xl leading-relaxed">
+            Join us for an inspiring TEDx event featuring thought-provoking talks, innovative ideas, and transformative experiences.
+          </p>
+          <div className="space-y-4 sm:space-y-0 sm:space-x-4 flex flex-col sm:flex-row">
+            <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white py-2 transition-all duration-300 transform hover:scale-105">
+              Register Now <ArrowRight className="ml-2" />
+            </Button>
+          </div>
+          <div className="text-sm text-white space-y-2">
+            <div className="flex items-center">
+              <Calendar className="mr-2" size={16} />
+              <p>Date: September 15, 2023</p>
+            </div>
+            <div className="flex items-center">
+              <MapPin className="mr-2" size={16} />
+              <p>Venue: Grand Convention Center</p>
+            </div>
+          </div>
+        </motion.div>
+        <div className="lg:w-[50%] lg:mt-0 flex flex-col mb-10 items-center lg:items-end">
+          <StaticShadow>
+            <Image
+              src={`${tedxsjecAssetsPrefix}/logo/ActualLogo.PNG`}
+              height={500}
+              width={500}
+              alt="TEDx Event Logo"
+            />
+          </StaticShadow>
+          <motion.p 
+            className="text-xl md:text-3xl font-semibold mt-4 lg:mr-2 text-white"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
+          >
+            Life - Explore What's Worth Living
+          </motion.p>
+        </div>
+      </div>
+      <motion.div 
+        className="container mx-auto px-4 py-6 relative z-10"
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, delay: 0.8, ease: "easeOut" }}
+      >
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 font-satoshi text-white">Event Starts In</h2>
+        <div className="grid grid-cols-4 font-satoshi gap-2 sm:gap-4 md:gap-6 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto">
+          {timeUnits.map((unit) => (
+            <FlipCard key={unit} value={timeLeft[unit]} label={unit} />
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/widget/landing.tsx b/src/components/widget/landing.tsx
new file mode 100644
index 0000000..42a4e4e
--- /dev/null
+++ b/src/components/widget/landing.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Image from 'next/image';
+import { tedxsjecAssetsPrefix } from '@/lib/utils';
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap';
+const Landing_page = () => {
+    
+  useGSAP(() => {
+    const t2 = gsap.timeline({
+      onComplete: () => {
+        // Hide the menu or set pointer-events to none after the animation completes
+        gsap.set(".menu-g", { zIndex: -1, pointerEvents: "none" });
+      }
+    });
+       t2.to(".menu-logo1",{opacity:0,x:"100%",duration:0.3},"<")
+    .to(".menu-g span", {
+      duration: 0.5,
+      x: "100%",
+      stagger: 0.1,
+      ease: "Expo.easeInOut",
+    },"<");
+  }, []);
+  return (
+    <>
+      <div className="menu-g h-[100vh] w-[100vw] z-[999] absolute left-0 top-0 flex flex-col justify-center items-center">
+        <span className="bg-white block w-full h-[34%] z-[1]"></span>
+        <span className="bg-white block w-full h-[34%] z-[1]"></span>
+        <span className="bg-white block w-full h-[34%] z-[1]"></span>
+
+        {/* The logo to animate with the menu */}
+        <div className='absolute top-0 left-0 right-0 bottom-0 z-[2] flex justify-center items-center'>
+          <div className="menu-logo1">
+            <Image
+              src={`${tedxsjecAssetsPrefix}/logo/blackLogo.webp`}
+              height={500}
+              width={500}
+              alt="logo"
+              priority={true}
+            />
+          </div>
+        </div>
+      </div>
+   
+    </>
+  );
+};
+
+export default Landing_page;