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.

Sign up for GitHub

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

Refactor: Contact page,Speakers,CTA and Previous Edition page #69

Closed
wants to merge 1 commit into from
+351 −255
Closed

Refactor: Contact page,Speakers,CTA and Previous Edition page #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 1 addition & 3 deletions src/app/layout.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading