Skip to content

Commit

Permalink
Merge pull request #10 from TEDxNTUA/giannis3
Browse files Browse the repository at this point in the history 
remove image slider, add tickets button to main page
  • Loading branch information
@GiannisTsagkaropoulos
GiannisTsagkaropoulos committed May 14, 2024
2 parents 7cbcdf7 + bcabd24 commit 45546c9
Show file tree
Hide file tree
Showing 11 changed files with 414 additions and 82 deletions.
Binary file added public/performers/perf/aggelina.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 17 additions & 11 deletions src/app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Scene = dynamic(() => import("@/components/Torus/Scene"), {

export default function Home() {
// const [isLoading, setIsLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isLoading, setIsLoading] = useState(true);
// UNCOMMENT FOR PRELOADRE

useEffect(() => {
Expand Down Expand Up @@ -50,11 +50,10 @@ export default function Home() {
backgroundSize: "cover",
}}
>
{/* <AnimatePresence mode="wait">
<AnimatePresence mode="wait">
{isLoading && <Preloader />}
</AnimatePresence> */}
</AnimatePresence>
<div className="1st-scroll desktop z-20 relative max-w-[2040px] h-[calc(100vh-65px)] max-h-[900px] hidden lg:grid lg:grid-cols-2 mx-auto w-full ">

<div
style={{
backgroundImage: `url('./design/grid.png')`,
Expand All @@ -76,10 +75,17 @@ export default function Home() {
<Scene />
</div>


<div className="1st-scroll mobile-tablet lg:hidden z-20 relative flex flex-col">
<div className="h-[calc(100vh-65px)]">
<div className="1st-scroll mobile-tablet lg:hidden z-20 relative">
<div className="h-[calc(100vh-65px)] flex flex-col justify-center py-20">
<Scene />
<a
className="hover:cursor-pointer p-8 py-4 bg-our-blue hover:bg-blue-500 rounded-lg w-[50%] text-[16px] text-white font-light text-center mx-auto"
href="https://2023tedxntua.us21.list-manage.com/subscribe?u=8fb93651f7aa4956e92c4f188&id=1473802836"
target="_blank"
rel="noopener noreferrer"
>
<p>Get your Tickets</p>
</a>
</div>
<div
style={{
Expand All @@ -91,7 +97,7 @@ export default function Home() {
<div className="flex relative justify-center items-center xl:w-[600px] mt-10 ml-4">
<div
data-scroll
data-scroll-speed={0.5}
data-scroll-speed={0.1}
className="flex flex-col gap-2 text-lg m-auto text-white tracking-wider w-3/5"
>
<p>What is ephemeral may not be the object itself,</p>
Expand All @@ -101,7 +107,7 @@ export default function Home() {
</div>
</div>

<div className="2nd-scroll desktop hidden lg:grid grid-cols-2 z-20 relative max-w-[2040px] max-h-[900px] mx-auto w-full">
<div className="2nd-scroll desktop hidden lg:grid grid-cols-2 z-20 relative max-w-[2040px] max-h-[900px] mx-auto w-full mb-[100px]">
<div
style={{
backgroundImage: `url('./design/grid.png')`,
Expand Down Expand Up @@ -168,12 +174,12 @@ export default function Home() {
</div>
</div>

<div className="3xl:hidden">
{/* <div className="3xl:hidden">
<ImageSlider />
</div>
<div className="hidden 3xl:block z-10">
<ImageGrid />
</div>
</div> */}
{/* <Contact /> */}
<div className="hidden lg:block">
<Kakogiannis />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ImageGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useScroll, useTransform, motion } from "framer-motion";

const slider1 = [
{
color: "#e3e5e7",
color: "our-purple-100",
src: "talk1.jpeg",
},
{
Expand Down
108 changes: 63 additions & 45 deletions src/components/ImageSlider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,38 @@ import { useScroll, useTransform, motion } from "framer-motion";
const slider1 = [
{
color: "#e3e5e7",
src: "talk1.jpeg",
src: "./speakers/nasiafilippidi.jpg",
},
{
color: "#d6d7dc",
src: "talk2.jpeg",
color: "#21242b",
src: "./speakers/iasonspyromilios.jpg",
},
{
color: "#e3e3e3",
src: "talk3.jpeg",
color: "#e5e0e1",
src: "./speakers/georgioslyrakos.jpg",
},
{
color: "#21242b",
src: "talk1.jpeg",
color: "#d4e3ec",
src: "./speakers/konstantinoskotios.jpg",
},
];

const slider2 = [
{
color: "#d4e3ec",
src: "talk3.jpeg",
color: "#d7d4cf",
src: "./performers/perf/aggelina.jpg",
},
{
color: "#e5e0e1",
src: "talk1.jpeg",
color: "#e3e3e3",
src: "./speakers/georgepanagiotakopoulos.jpg",
},
{
color: "#d7d4cf",
src: "talk2.jpeg",
src: "./performers/perf/majovoli.jpg",
},
{
color: "#e1dad6",
src: "talk1.jpeg",
color: "#e3e3e3",
src: "./speakers/fotis-floros.jpg",
},
];

Expand All @@ -47,69 +47,87 @@ export default function ImageSlider() {
});

const x1 = useTransform(scrollYProgress, [0, 1], [0, 150]);
const x2 = useTransform(scrollYProgress, [0, 1], [0, -150]);
const x2 = useTransform(scrollYProgress, [0, 1], [150, 0]);
const height = useTransform(scrollYProgress, [0, 0.9], [50, 0]);

return (
<div
ref={container}
// className={styles.slidingImages}
className="flex flex-col gap-[3vw] relative pt-[100px] bg-purple-100 z-10 max-width-[100%] overflow-x-hidden"
className="flex flex-col gap-[3vw] relative py-[50px] md:pt-[100px] bg-purple-100 z-10 max-width-[100%] overflow-x-hidden"
>
<motion.div
style={{ x: x1 }}
// className={styles.slider}
// className="flex relative gap-[3vw] w-[120vw] max-w-[2300px] left-[-10vw]"
className="flex relative gap-[3vw] w-[120vw] max-w-[2300px] left-[-30vw] md:left-[-10vw]"
className="flex relative gap-[3vw] w-[120vw] max-w-[2300px] left-[-90px] md:left-[-95px] lg:left-[-50px] xl:left-[0px]"
// className="flex relative gap-[3vw] w-[120vw] max-w-[2300px] bg-red-500 h-[100px] md:h-[200px] lg:h-[250px] xl:h-[300px] left-[100px]"
>
{slider1.map((project, index) => {
return (
// <div
// key={index}
// // className={styles.project}
// className="h-[100px] w-[150px] flex items-center justify-center"
// // style={{ backgroundColor: project.color }}
// >
<div
key={index}
// className={styles.project}
className="w-[25%] h-[150px] md:h-[20vw] flex items-center justify-center"
style={{ backgroundColor: project.color }}
className="relative w-[100px] h-[100px] md:w-[180px] md:h-[180px] lg:w-[230px] lg:h-[230px] xl:w-[300px] xl:h-[300px] 2xl:w-[350px] 2xl:h-[350px]"
>
{/* <div className={styles.imageContainer} */}
<div className="relative w-[80%] h-[80%]">
<img
className="object-cover absolute inset-0 w-full h-full"
alt={"image"}
src={`./talks/${project.src}`}
width={30}
height={30}
/>
</div>
<img
className="object-cover h-fit w-fit absolute inset-0"
alt={"image"}
src={`${project.src}`}
width={30}
height={30}
/>
//{" "}
</div>
// </div>
);
})}
</motion.div>
<motion.div
style={{ x: x2 }}
className="flex relative gap-[3vw] w-[120vw] max-w-[2300px] left-[10vw] md:left-[-10vw]"
// className="flex relative gap-[3vw] w-[110vw] max-w-[2300px]"
// >
className="flex relative gap-[3vw] w-[100vw] max-w-[2300px] bg-red-500"
>
{slider2.map((project, index) => {
return (
// <div
// key={index}
// className="w-[25%] h-[150px] md:h-[20vw] flex items-center justify-center"
// style={{ backgroundColor: project.color }}
// >
// <div key={index} className="relative w-[80%] h-[80%]">
// <img
// className="object-cover absolute inset-0 w-full h-full"
// alt={"image"}
// src={`${project.src}`}
// width={30}
// height={30}
// />
// </div>
// </div>
<div
key={index}
className="w-[25%] h-[150px] md:h-[20vw] flex items-center justify-center"
style={{ backgroundColor: project.color }}
className="relative w-[100px] h-[100px] md:w-[200px] md:h-[200px] lg:w-[250px] lg:h-[250px] xl:w-[300px] xl:h-[300px]"
>
<div key={index} className="relative w-[80%] h-[80%]">
<img
className="object-cover absolute inset-0 w-full h-full"
alt={"image"}
src={`./talks/${project.src}`}
width={30}
height={30}
/>
</div>
<img
className="object-cover h-fit w-fit absolute inset-0"
alt={"image"}
src={`${project.src}`}
width={30}
height={30}
/>
//{" "}
</div>
);
})}
</motion.div>
<motion.div style={{ height }} className="relative mt-[100px]">
<div className="h-[1550%] w-[120%] left-[-10%] bg-purple-100 z-[1] absolute rounded-b-[50%] shadow-md"></div>
<motion.div style={{ height }} className="hidden md:relative mt-[100px]">
<div className="md:h-[1550%] w-[120%] left-[-10%] bg-purple-100 z-[1] absolute rounded-b-[50%] shadow-md"></div>
</motion.div>
{/* border-radius: 0 0 50% 50%
box-shadow: 0px 60px 50px rgba(0, 0, 0, 0.748); */}
Expand Down
36 changes: 21 additions & 15 deletions src/components/Kakogiannis/Kakogiannis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,28 @@ export default function Kakogiannis() {
});
const x = useTransform(scrollYProgress, [0, 1], [-100, 0]);
const y = useTransform(scrollYProgress, [0, 1], [-500, 0]);
const z = useTransform(scrollYProgress, [0, 1], [-150, 0]);
const z = useTransform(scrollYProgress, [0, 1], [-50, 0]);
// const rotate = useTransform(scrollYProgress, [0, 1], [120, 90]);

const paragraph1 =
"Το θέμα που ετοιμάζει η φετινή ομάδα του TEDxNTUA είναι το EPHEMERAL. Το TEDxNTUA 2024, πραγματεύεται το αναπόφευκτο τέλος των πάντων και την κινητήρια δύναμη που πηγάζει από την σκιά αυτού του τέλους. Η παροδικότητα αποτελεί την αιτία, λόγω της οποίας όλα εξυψώνονται σε ένα βάθρο. Η παροδική φύση των πραγμάτων δίνει έναυσμα στην συνεχή διατήρηση και εξέλιξη. Ενώ ξέρουμε ότι όλα αλλάζουν και οτιδήποτε -γύρω μας ή και μέσα μας- είναι παροδικό.";

return (
<motion.div
style={{
y,
}}
<div
// style={{
// y,
// }}
ref={container}
className="h-[700px] 3xl:h-[900px] max-w-[2040px] mx-auto"
className="h-[800px] 3xl:h-[900px] max-w-[2040px] mx-auto"
>
<div
style={{

backgroundImage: `url('./design/puprle-rec-bold.png')`,
backgroundSize: "cover", // Optional: adjust as needed
}}
className="h-[700px] 3xl:h-[900px] 3xl:mt-[300px] mx-auto flex flex-col md:flex-row relative justify-around items-center px-10"
className="h-[700px] 3xl:h-[900px] 3xl:mt-[300px] w-full mx-auto flex flex-col md:flex-row relative justify-between items-center"
>
<div className="kakogiannis relative w-[600px] 3xl:w-[1000px]">
<div className="kakogiannis relative left-6 w-[600px] 3xl:w-[1000px]">
<img
src="./design/kakogiannis3.png"
alt="kakogiannis-institute-with-grid"
Expand All @@ -55,7 +54,7 @@ export default function Kakogiannis() {
</motion.h2>
</div>

<div className="paragraph flex flex-row-reverse my-auto">
<div className="paragraph flex flex-row-reverse my-auto mx-auto">
<div className="w-[500px] text-white leading-tight break-words text-md justify-center flex flex-col items-center gap-8">
<div className="3xl:hidden">
<Paragraph paragraph={paragraph1} />
Expand All @@ -66,15 +65,22 @@ export default function Kakogiannis() {
style={{ x }}
className="left-[calc(100% - 500px)] mx-auto w-[180px] h-[180px] text-white rounded-[50%] flex bg-our-blue hover:bg-blue-500 items-center justify-center cursor-pointer"
>
{/* <Rounded className="w-[180px] h-[180px] text-white rounded-[50%] flex bg-our-blue items-center justify-center cursor-pointer"> */}
<p className="m-0 text-[16px] font-light z-[2] relative">
Get your Tickets
</p>
<a
className="hover:cursor-pointer"
href="https://2023tedxntua.us21.list-manage.com/subscribe?u=8fb93651f7aa4956e92c4f188&id=1473802836"
target="_blank"
rel="noopener noreferrer"
>
{/* <Rounded className="w-[180px] h-[180px] text-white rounded-[50%] flex bg-our-blue items-center justify-center cursor-pointer"> */}
<p className="m-0 text-[16px] font-light z-[2] relative">
Get your Tickets
</p>
</a>
{/* </Rounded> */}
</motion.div>
</div>
</div>
</div>
</motion.div>
</div>
);
}
28 changes: 19 additions & 9 deletions src/components/Kakogiannis/KakogiannisSmall.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@ export default function KakogiannisSmall() {
"Το θέμα που ετοιμάζει η φετινή ομάδα του TEDxNTUA είναι το EPHEMERAL. Το TEDxNTUA 2024, πραγματεύεται το αναπόφευκτο τέλος των πάντων και την κινητήρια δύναμη που πηγάζει από την σκιά αυτού του τέλους. Η παροδικότητα αποτελεί την αιτία, λόγω της οποίας όλα εξυψώνονται σε ένα βάθρο. Η παροδική φύση των πραγμάτων δίνει έναυσμα στην συνεχή διατήρηση και εξέλιξη. Ενώ ξέρουμε ότι όλα αλλάζουν και οτιδήποτε -γύρω μας ή και μέσα μας- είναι παροδικό.";

return (
<motion.div
style={{
y,
}}
ref={container}
className="h-[500px] md:h-[800px] 3xl:h-[900px] max-w-[2040px] mx-auto"
>
// <motion.div
// style={{
// y,
// }}
// ref={container}
// className="h-[500px] md:h-[800px] 3xl:h-[900px] max-w-[2040px] mx-auto"
// >
<div className="max-w-[2040px] mx-auto ">
<div
ref={container}
style={{
backgroundImage: `url('./design/puprle-rec-bold.png')`,
backgroundSize: "cover", // Optional: adjust as needed
Expand Down Expand Up @@ -66,13 +68,21 @@ export default function KakogiannisSmall() {
style={{ x }}
className="m-0 text-[16px] font-light z-[2] text-center p-8 py-4 bg-our-blue hover:bg-blue-500 rounded-lg"
>
Get your Tickets
<a
className="hover:cursor-pointer"
href="https://2023tedxntua.us21.list-manage.com/subscribe?u=8fb93651f7aa4956e92c4f188&id=1473802836"
target="_blank"
rel="noopener noreferrer"
>
Get your Tickets
</a>
</motion.p>
{/* </Rounded> */}
{/* </motion.div> */}
</div>
</div>
</div>
</motion.div>
{/* </motion.div> */}
</div>
);
}
Loading

0 comments on commit 45546c9

Please sign in to comment.