Skip to content

Commit

Permalink
Refactor: Contact page,Speakers,CTA and Previous Edition page
Browse files Browse the repository at this point in the history
  • Loading branch information
SANTHSIM22 committed Nov 15, 2024
1 parent 0a2345f commit 9bdccee
Show file tree
Hide file tree
Showing 9 changed files with 351 additions and 255 deletions.
4 changes: 1 addition & 3 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -42,8 +41,7 @@ export default function RootLayout({
<link rel="manifest" href="/site.webmanifest" />
</head>
<body className={(inter.className = "overflow-x-hidden")}>
<div className="fixed top-0 w-full h-24 z-50 overflow-x-hidden backdrop-blur-md head-5 bg-black/5" />
<ScrollProgress />
<div className="fixed top-0 w-full h-[100px] z-50 overflow-x-hidden backdrop-blur-md head-5 bg-black/5" />
<Nav />
<TEDxStarsCanvas />
<Providers>{children} </Providers>
Expand Down
27 changes: 11 additions & 16 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
"use client";

import React, { useState, useEffect } from "react";
// import ParallaxFooter from "@/components/common/Footer";
import Speakers from "@/components/common/speakers";
import { PreviousEdition } from "@/components/common/Container-Scroll";
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 Footer from "@/components/common/Footer-1";
import CTA from "@/components/common/cta-section-2";
// import Inkcursor from "@/components/common/ink";
import CanvasCursor from "@/components/common/ink";
// import Landing_page from "@/components/widget/landing";// Import the loading screen component

import UnsplashGrid from "@/components/common/gridsplash";
export default function Home() {
const [loading, setLoading] = useState(true);

useEffect(() => {
// Set a timeout to hide the loading screen after the content is ready
const timer = setTimeout(() => setLoading(false)); // Adjust as needed
const timer = setTimeout(() => setLoading(false));
return () => clearTimeout(timer);
}, []);

return (
<>
{/* Ink Cursor overlay for the entire page */}
{/* <CanvasCursor /> */}

{/* Loading Screen */}
{/* <Landing_page /> */}

{/* Main Page Content */}
<div className="z-20 relative pt-20 overflow-x-clip 1">
<HeroHighlight />
<div className="h-full mt-20 mb-20" id="about">
Expand All @@ -49,10 +36,16 @@ export default function Home() {
>
The Performers
</h1>

<Performers />
</div>
<div className=" ">

<PreviousEdition />
<div>
<h1 className="md:text-8xl mb-10 text-4xl text-center font-black px-10">2022 Edition</h1>
</div>
<UnsplashGrid/>
</div>
<div id="team" className="bg-transparent h-fit mt-14">
<h1 className="md:text-8xl text-4xl text-center font-black text-redTheme px-10">
Expand All @@ -63,9 +56,11 @@ export default function Home() {
</div>
<CTA />
</div>
<div id="contact">
<Footer />
</div>
</div>
</>
);
}
// ${loading ? 'hidden' : ''}`}

2 changes: 1 addition & 1 deletion src/components/common/Container-Scroll.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";
import React from "react";
import { ContainerScroll } from "../ui/container-scroll-animation";

export function PreviousEdition() {
return (
<div className="flex flex-col overflow-hidden">

<ContainerScroll
titleComponent={
<>
Expand Down
228 changes: 92 additions & 136 deletions src/components/common/Footer-1.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<footer className="text-white w-full min-h-screen flex flex-col justify-between bg-gradient-to-b from-transparent to-black/30">
<div className="flex-grow flex flex-col lg:flex-row">
<div className="lg:w-1/2 lg:px-12 px-5 flex flex-col justify-center items-center lg:items-start space-y-8 py-12">
<div className="w-full max-w-lg space-y-8">
<h2 className="text-3xl md:text-4xl font-bold text-center lg:text-left">
Contact Us
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="bg-black/30 border-none hover:bg-black/40 transition-colors">
<CardContent className="p-6 flex items-start space-x-4">
<Mail className="h-6 w-6 text-red-500 mt-1 flex-shrink-0" />
<div>
<h3 className="font-semibold text-lg mb-2">Email Us</h3>
<a
href="mailto:[email protected]"
className="hover:text-red-500 transition-colors break-all text-sm"
>
[email protected]
</a>
</div>
</CardContent>
</Card>
<Card className="bg-black/30 border-none hover:bg-black/40 transition-colors">
<CardContent className="p-6 flex items-start space-x-4">
<Phone className="h-6 w-6 text-red-500 mt-1 flex-shrink-0" />
<div>
<h3 className="font-semibold text-lg mb-2">Call Us</h3>
<p className="text-sm mb-1">Dr. Binu KG</p>
<a
href="tel:+91-9739866947"
className="hover:text-red-500 transition-colors text-sm"
>
+91-9739866947
</a>
</div>
</CardContent>
</Card>
<Card className="bg-black/30 border-none hover:bg-black/40 transition-colors md:col-span-2">
<CardContent className="p-6 flex flex-col md:flex-row md:items-start md:justify-between">
<div className="flex items-start space-x-4 mb-4 md:mb-0">
<MapPin className="h-6 w-6 text-red-500 mt-1 flex-shrink-0" />
<div>
<h3 className="font-semibold text-lg mb-2">Visit Us</h3>
<address className="not-italic text-sm">
St Joseph Engineering College,
<br />
Vamanjoor, Mangalore - 575028
<br />
Karnataka, India
</address>
</div>
</div>
<div className="flex justify-center md:justify-end space-x-4 mt-4 md:mt-0">
<Link
href="https://instagram.com/tedxsjec"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="icon"
className="rounded-full bg-red-600 hover:bg-red-700 border-none"
>
<span className="sr-only">Instagram</span>
<Instagram className="h-5 w-5" aria-hidden="true" />
</Button>
</Link>
<Link
href="https://www.linkedin.com/company/tedxsjec"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant="outline"
size="icon"
className="rounded-full bg-red-600 hover:bg-red-700 border-none"
>
<span className="sr-only">LinkedIn</span>
<Linkedin className="h-5 w-5" aria-hidden="true" />
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</div>
<div className="h-[700px] flex flex-col text-white p-8">
<h1 className="text-4xl md:text-5xl font-bold text-center mb-3">
Contact TEDxSJEC
</h1>
<p className='text-center text-2xl text-gray-400 mb-5'>Have questions or want to get involved? We'd love to hear from you!</p>
<div className="flex-grow grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div className="flex items-center justify-center bg-black/40 rounded-lg shadow-md overflow-hidden">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="St Joseph Engineering College Map"
className="rounded-md"
></iframe>
</div>
<div className="lg:w-1/2 lg:px-8 px-3 flex items-center justify-center py-12">
<div className="w-full h-[400px] md:h-[500px] lg:h-[600px] rounded-lg overflow-hidden shadow-lg">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="St Joseph Engineering College Map"
></iframe>

<div className="p-6 bg-black/30 rounded-lg shadow-md flex flex-col justify-between">
<div>
<div className="flex justify-between items-center mb-8">
<h2 className="text-2xl font-bold">CONNECT WITH TEDxSJEC</h2>
</div>
<div className="space-y-4 text-sm mb-6">
<motion.div
className="flex items-center space-x-3"
whileHover={{ x: 10 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<Mail className="h-5 w-5 text-red-600" />
<a href="mailto:[email protected]" className="hover:text-red-600 transition-colors">[email protected]</a>
</motion.div>
<motion.div
className="flex items-center space-x-3"
whileHover={{ x: 10 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<Phone className="h-5 w-5 text-red-600" />
<div>
<p className="font-semibold">Dr. Binu KG</p>
<a href="tel:+91-9739866947" className="hover:text-red-600 transition-colors">+91-9739866947</a>
</div>
</motion.div>
<motion.div
className="flex items-start space-x-3"
whileHover={{ x: 10 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<MapPin className="h-5 w-5 text-red-600 mt-1" />
<address className="not-italic">
St Joseph Engineering College,<br />
Vamanjoor, Mangalore - 575028<br />
Karnataka, India
</address>
</motion.div>
</div>
</div>
</div>
</div>
<div className="w-full p-4 md:p-6 bg-black/20">
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
<p className="text-xs md:text-sm text-gray-400 text-center md:text-left">
© 2024 TEDxSJEC. All Rights Reserved. This independent TEDx event
is operated under license from TED.
</p>
<div className="flex space-x-4">
<Link
href="/privacy-policy"
className="text-xs md:text-sm text-gray-400 hover:text-white transition-colors"
<div className="flex flex-col space-y-4">
<motion.div
className="flex items-center space-x-3"
whileHover={{ x: 10 }}
transition={{ type: 'spring', stiffness: 300 }}
>
Privacy Policy
</Link>
<Link
href="/terms-of-service"
className="text-xs md:text-sm text-gray-400 hover:text-white transition-colors"
<Instagram className="h-6 w-6 text-red-600" />
<Link href="https://instagram.com/tedxsjec" target="_blank" rel="noopener noreferrer" className="hover:text-red-600 transition-colors">
Instagram
</Link>
</motion.div>
<motion.div
className="flex items-center space-x-3"
whileHover={{ x: 10 }}
transition={{ type: 'spring', stiffness: 300 }}
>
Terms of Service
</Link>
<Linkedin className="h-6 w-6 text-red-600" />
<Link href="https://www.linkedin.com/company/tedxsjec" target="_blank" rel="noopener noreferrer" className="hover:text-red-600 transition-colors">
LinkedIn
</Link>
</motion.div>
</div>
</div>
</div>
</footer>
);
}

<div className="text-center text-sm text-gray-400">
<p>© 2024 TEDxSJEC. This independent TEDx event is operated under license from TED.</p>
<div className="mt-2">
<Link href="/privacy-policy" className="mr-4 hover:text-red-600 transition-colors">Privacy Policy</Link>
<Link href="/terms-of-service" className="hover:text-red-600 transition-colors">Terms of Service</Link>
</div>
</div>
</div>
)
}
Loading

0 comments on commit 9bdccee

Please sign in to comment.