From 9bdcceee1e94c04bc810d675e750718851ef1de5 Mon Sep 17 00:00:00 2001 From: SANTHSIM22 Date: Fri, 15 Nov 2024 07:14:28 +0530 Subject: [PATCH 1/5] Refactor: Contact page,Speakers,CTA and Previous Edition page --- src/app/layout.tsx | 4 +- src/app/page.tsx | 27 +-- src/components/common/Container-Scroll.tsx | 2 +- src/components/common/Footer-1.tsx | 228 +++++++----------- src/components/common/cta-section-2.tsx | 53 ++-- src/components/common/gridsplash.tsx | 210 ++++++++++++++++ src/components/common/speakers.tsx | 14 +- .../ui/container-scroll-animation.tsx | 6 +- src/components/ui/progressBar.tsx | 62 ----- 9 files changed, 351 insertions(+), 255 deletions(-) create mode 100644 src/components/common/gridsplash.tsx delete mode 100644 src/components/ui/progressBar.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0e5ffb1..2242075 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,7 +5,6 @@ import "./globals.css"; import TEDxStarsCanvas from "@/components/ui/stars"; import Nav from "@/components/widget/header"; import Script from "next/script"; -import ScrollProgress from "@/components/ui/progressBar"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "TEDxSJEC", @@ -42,8 +41,7 @@ export default function RootLayout({ -
- +
); } -// ${loading ? 'hidden' : ''}`} + diff --git a/src/components/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx index f16f343..3753439 100644 --- a/src/components/common/Container-Scroll.tsx +++ b/src/components/common/Container-Scroll.tsx @@ -1,10 +1,10 @@ "use client"; import React from "react"; import { ContainerScroll } from "../ui/container-scroll-animation"; - export function PreviousEdition() { return (
+ diff --git a/src/components/common/Footer-1.tsx b/src/components/common/Footer-1.tsx index 6638c64..d11fbf8 100644 --- a/src/components/common/Footer-1.tsx +++ b/src/components/common/Footer-1.tsx @@ -1,145 +1,101 @@ -import Link from "next/link"; -// import Image from "next/image" -import { - Mail, - Phone, - MapPin, - Instagram, - Linkedin, - Calendar, - Guitar, - Users, - Mic2, -} from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { Card, CardContent } from "@/components/ui/card"; +'use client' +import Link from 'next/link' +import { Mail, Phone, MapPin, Instagram, Linkedin } from 'lucide-react' +import { motion } from 'framer-motion' -export default function Footer() { +export default function ContactPage() { return ( -
-
-
-
-

- Contact Us -

-
- - - -
-

Email Us

- - tedx@sjec.ac.in - -
- - - - - -
-

Call Us

-

Dr. Binu KG

- - +91-9739866947 - -
- - - - -
- -
-

Visit Us

-
- St Joseph Engineering College, -
- Vamanjoor, Mangalore - 575028 -
- Karnataka, India -
-
-
-
- - - - - - -
- - -
-
+
+

+ Contact TEDxSJEC +

+

Have questions or want to get involved? We'd love to hear from you!

+
+
+
-
-
- + +
+
+
+

CONNECT WITH TEDxSJEC

+
+
+ + + tedx@sjec.ac.in + + + +
+

Dr. Binu KG

+ +91-9739866947 +
+ + + +
+ St Joseph Engineering College,
+ Vamanjoor, Mangalore - 575028
+ Karnataka, India +
+ +
-
-
-
-
-

- © 2024 TEDxSJEC. All Rights Reserved. This independent TEDx event - is operated under license from TED. -

-
- + - Privacy Policy - - + + Instagram + + + - Terms of Service - + + + LinkedIn + +
-
- ); -} + +
+

© 2024 TEDxSJEC. This independent TEDx event is operated under license from TED.

+
+ Privacy Policy + Terms of Service +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/common/cta-section-2.tsx b/src/components/common/cta-section-2.tsx index 6b7fd81..28ccadd 100644 --- a/src/components/common/cta-section-2.tsx +++ b/src/components/common/cta-section-2.tsx @@ -1,7 +1,7 @@ -import { Users, Mic2, Guitar, Calendar, MapPin } from "lucide-react"; +import { Mic2, Guitar, Calendar, MapPin } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; - +import { Gift } from 'lucide-react'; export default function FullScreenCTA() { return (
@@ -11,7 +11,7 @@ export default function FullScreenCTA() { {/* Inspiration Unleashed: Join Us at TEDx 2024 */} -
+

Join us for an extraordinary day of inspiration, innovation, and @@ -37,29 +37,30 @@ export default function FullScreenCTA() {

-
- - - -

300+

-

Attendees

- - - - - -

12

-

Speakers

- - - - - -

4

-

Performers

- - -
+
+ + + +

Goodies

+ + + + + + +

12

+

Speakers

+ + + + + + +

4

+

Performers

+ + +

What to Expect:

    diff --git a/src/components/common/gridsplash.tsx b/src/components/common/gridsplash.tsx new file mode 100644 index 0000000..aa0b5cf --- /dev/null +++ b/src/components/common/gridsplash.tsx @@ -0,0 +1,210 @@ +'use client'; +import React, { useEffect, useRef, useState } from 'react'; +import { AnimatePresence, motion, useInView } from 'framer-motion'; +import Image from 'next/image'; +import { X } from 'lucide-react'; +import { tedxsjecAssetsPrefix } from '@/lib/utils'; +const speakers = [ + { + id: 1, + name: "Karen Kshiti Suvarna", + profession: "Film Director", + description: + "Karen Kshiti Suvarna's debut short film, Hide & Seek, has made waves in the film industry, winning the Best Debut Director (Female) at the Dadasaheb Phalke Achievers Awards 2024. The film has also been showcased at the prestigious Cannes Film Festival. It has also earned accolades across 12 other international festivals and received 15 nominations.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image7.jpg`, + }, + { + id: 2, + name: "Suma R Nayak", + profession: "Advocate and Animal Welfare Activist", + description: + "Meet Mrs Suma R Nayak, an advocate by profession and animal & environment welfare activist by choice, who believes every creation of God has a right to live a life devoid of pain, suffering and live in dignity. She is the recipient of several awards for her services in the field of environment protection and animal welfare.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image1.jpg` + }, + { + id: 3, + name: "Badekkila Pradeep", + profession: "Actor | Voice Artist | Anchor", + description: + "Badekkila Pradeep is a versatile actor, model, writer, and distinguished voice artist from Karnataka. Beginning as a reporter in 2006, Pradeep found his passion in voice-over, transforming Kannada TV narration with his unique style. He's voiced popular shows like Bigg Boss Kannada, Bangalore metro announcements, and numerous campaigns across languages.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image2.jpg` + }, + { + id: 4, + name: "Namitha Marimuthu", + profession: "International Model, Actress", + description: + "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image3.jpg ` + }, + { + id: 5, + name: "Namitha Marimuthu", + profession: "International Model, Actress", + description: + "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image4.jpg ` + }, + { + id: 6, + name: "Namitha Marimuthu", + profession: "International Model, Actress", + description: + "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image5.jpg ` + }, + { + id: 7, + name: "Namitha Marimuthu", + profession: "International Model, Actress", + description: + "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment.", + img: `${tedxsjecAssetsPrefix}/previous_Edition_photo's/image6.jpg ` + }, +]; + +function UnsplashGrid() { + const [selected, setSelected] = useState(null); + + return ( + <> +
    +
    +
    + <> + {speakers.map((speaker, index) => ( + + ))} + +
    +
    +
    + + ); +} + +interface Speaker { + id: number; + img: string; + name: string; + profession: string; + description: string; +} + +interface ImageItemProps { + item: Speaker; + index: number | string; + setSelected: any; +} + +function ImageItem({ item, index, setSelected }: ImageItemProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + return ( + setSelected(item)} + > + + + ); +} + +interface ModalProps { + selected: Speaker | null; + setSelected: any; +} + +function Modal({ selected, setSelected }: ModalProps) { + const itemVariants = { + initial: { opacity: 0, y: 10 }, + animate: { + opacity: 1, + y: 0, + transition: { duration: 0.3, staggerChildren: 0.2 }, + }, + exit: { opacity: 0, y: 20 }, + }; + + useEffect(() => { + if (selected) { + document.body.classList.add('overflow-hidden'); + } else { + document.body.classList.remove('overflow-hidden'); + } + + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') setSelected(null); + }; + + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, [selected]); + + return ( + + {selected && ( + setSelected(null)} + className='fixed inset-0 bg-black/50 backdrop-blur-sm z-50 cursor-pointer overflow-y-scroll' + > + e.stopPropagation()} + layoutId={`card-${selected.id}`} + className='w-full max-w-[1000px] relative mx-auto my-24 cursor-default dark:bg-[#202020] bg-[#ebebeb]' + > + + + Speaker + + + + {selected.name} + + + {selected.description} + + + + + + )} + + ); +} + +export default UnsplashGrid; diff --git a/src/components/common/speakers.tsx b/src/components/common/speakers.tsx index d4dc18b..0412c03 100644 --- a/src/components/common/speakers.tsx +++ b/src/components/common/speakers.tsx @@ -1,6 +1,4 @@ "use client"; - -// import { useEffect, useState } from 'react' import { tedxsjecAssetsPrefix } from "@/lib/utils"; const speakers = [ @@ -10,7 +8,7 @@ const speakers = [ profession: "Film Director", description: "Karen Kshiti Suvarna's debut short film, Hide & Seek, has made waves in the film industry, winning the Best Debut Director (Female) at the Dadasaheb Phalke Achievers Awards 2024. The film has also been showcased at the prestigious Cannes Film Festival. It has also earned accolades across 12 other international festivals and received 15 nominations.", - img: `${tedxsjecAssetsPrefix}/speakers/Kshiti1.avif`, + img: `${tedxsjecAssetsPrefix}/speakers/image-6.avif`, }, { id: 2, @@ -18,7 +16,7 @@ const speakers = [ profession: "Advocate and Animal Welfare Activist", description: "Meet Mrs Suma R Nayak, an advocate by profession and animal & environment welfare activist by choice, who believes every creation of God has a right to live a life devoid of pain, suffering and live in dignity. She is the recipient of several awards for her services in the field of environment protection and animal welfare.", - img: `${tedxsjecAssetsPrefix}/speakers/cropped-Suma.avif`, + img: `${tedxsjecAssetsPrefix}/speakers/image-2.avif`, }, { id: 3, @@ -26,7 +24,7 @@ const speakers = [ profession: "Actor | Voice Artist | Anchor", description: "Badekkila Pradeep is a versatile actor, model, writer, and distinguished voice artist from Karnataka. Beginning as a reporter in 2006, Pradeep found his passion in voice-over, transforming Kannada TV narration with his unique style. He's voiced popular shows like Bigg Boss Kannada, Bangalore metro announcements, and numerous campaigns across languages.", - img: `${tedxsjecAssetsPrefix}/speakers/Pradeep 2.avif`, + img: `${tedxsjecAssetsPrefix}/speakers/image-3.avif`, }, { id: 4, @@ -34,7 +32,7 @@ const speakers = [ profession: "International Model, Actress", description: "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment.", - img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M1.avif`, + img: `${tedxsjecAssetsPrefix}/speakers/image-4.avif`, }, ]; @@ -53,7 +51,7 @@ export default function Component() { index % 2 === 0 ? "" : "md:flex-row-reverse" } items-stretch justify-between bg-black/40 rounded-2xl overflow-hidden shadow-xl border border-white border-opacity-20`} > - {/* Image */} +
    - {/* Content */} +

    {speaker.name} diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx index fe3e675..ab362a2 100644 --- a/src/components/ui/container-scroll-animation.tsx +++ b/src/components/ui/container-scroll-animation.tsx @@ -36,7 +36,7 @@ export const ContainerScroll = ({ return (
    -
    +
    {children}
    diff --git a/src/components/ui/progressBar.tsx b/src/components/ui/progressBar.tsx deleted file mode 100644 index dd419dc..0000000 --- a/src/components/ui/progressBar.tsx +++ /dev/null @@ -1,62 +0,0 @@ -"use client"; -import { useEffect } from "react"; -import React from "react"; - -const ScrollProgress: React.FC = () => { - useEffect(() => { - const scrollProgressBar = document.getElementById("scroll-progress-bar"); - - const handleScroll = () => { - const scrollTop = - window.pageYOffset || document.documentElement.scrollTop; - const scrollHeight = - document.documentElement.scrollHeight - window.innerHeight; - const scrollPercentage = scrollTop / scrollHeight; - - if (scrollProgressBar) { - scrollProgressBar.style.transform = `scaleX(${Math.min(Math.max(scrollPercentage, 0), 1)})`; - } - }; - - // Ensure `window` and `document` are available - if (typeof window !== "undefined" && typeof document !== "undefined") { - window.addEventListener("scroll", handleScroll); - } - - return () => { - if (typeof window !== "undefined") { - window.removeEventListener("scroll", handleScroll); - } - }; - }, []); - - return ( - <> - - -
    - - ); -}; - -export default ScrollProgress; From ddfeb12a56f772f2b5a3b71dedff7bc99ceaddab Mon Sep 17 00:00:00 2001 From: SANTHSIM22 Date: Fri, 15 Nov 2024 07:27:58 +0530 Subject: [PATCH 2/5] Fix : build errors --- src/app/page.tsx | 10 +- src/components/common/Container-Scroll.tsx | 1 - src/components/common/Footer-1.tsx | 89 +++-- src/components/common/cta-section-2.tsx | 51 +-- src/components/common/gridsplash.tsx | 98 +++--- src/components/common/speakers.tsx | 2 - src/components/widget/performers.tsx | 386 +++++++++++---------- 7 files changed, 347 insertions(+), 290 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 8bb4e7e..33d31dc 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -40,12 +40,13 @@ export default function Home() {
    -
    -

    2022 Edition

    +

    + 2022 Edition +

    - +

    @@ -57,10 +58,9 @@ export default function Home() {

    -
    +
    ); } - diff --git a/src/components/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx index 3753439..1a60434 100644 --- a/src/components/common/Container-Scroll.tsx +++ b/src/components/common/Container-Scroll.tsx @@ -4,7 +4,6 @@ import { ContainerScroll } from "../ui/container-scroll-animation"; export function PreviousEdition() { return (
    - diff --git a/src/components/common/Footer-1.tsx b/src/components/common/Footer-1.tsx index d11fbf8..2b6afc9 100644 --- a/src/components/common/Footer-1.tsx +++ b/src/components/common/Footer-1.tsx @@ -1,7 +1,7 @@ -'use client' -import Link from 'next/link' -import { Mail, Phone, MapPin, Instagram, Linkedin } from 'lucide-react' -import { motion } from 'framer-motion' +"use client"; +import Link from "next/link"; +import { Mail, Phone, MapPin, Instagram, Linkedin } from "lucide-react"; +import { motion } from "framer-motion"; export default function ContactPage() { return ( @@ -9,7 +9,9 @@ export default function ContactPage() {

    Contact TEDxSJEC

    -

    Have questions or want to get involved? We'd love to hear from you!

    +

    + Have questions or want to get involved? We'd love to hear from you! +