Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hero #51

Merged
merged 4 commits into from
Oct 27, 2024
Merged

Hero #51

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,20 @@ 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 className="h-screen" id="about">
></div> */}
<div className="h-full mt-20 mb-52" id="about">
<About />
</div>

Expand Down
10 changes: 5 additions & 5 deletions src/components/common/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 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 }}
Expand All @@ -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 */}
Expand Down
3 changes: 0 additions & 3 deletions src/components/navbar/nav-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ const NavHeader: React.FC<NavHeaderProps> = ({ handleClick }) => {
</Link>
</div>
<div className="flex justify-between items-center ">
<li className="list-none overflow-hidden leading-[1] font-bold text-white reg">
<RegisterButton />
</li>
<button
id="menuToggle"
ref={menuToggle}
Expand Down
177 changes: 177 additions & 0 deletions src/components/widget/hero.tsx
Original file line number Diff line number Diff line change
@@ -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 lg:px-10 px-5 h-full bg-gradient-to-b from-blackTheme via-red-800 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 py-8 lg:py-0 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-5xl font-satoshi lg:mt-16 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&#39;s Worth Living
</motion.p>
</div>
</div>
<motion.div
className="container mx-auto px-4 py-2 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>
)
}
48 changes: 48 additions & 0 deletions src/components/widget/landing.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading