Skip to content

Commit

Permalink
Added more stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresnowak
andresnowak committed Dec 17, 2024
1 parent 8ebcc75 commit 7c6087c
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 48 deletions.
14 changes: 8 additions & 6 deletions app/data_charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -382,12 +382,14 @@ function BubbleChartComponent() {
}, []);

return (
<canvas
id="bubble-chart"
ref={chartRef}
width={800}
height={800}
></canvas>
<div className="w-full max-w-2xl">
<canvas
id="bubble-chart"
ref={chartRef}
width={800}
height={800}
></canvas>
</div>
);
};

Expand Down
33 changes: 24 additions & 9 deletions app/nav.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
import Image from "next/image";

const NavBar = () => {
const [scrolled, setScrolled] = useState(false);
Expand All @@ -13,7 +14,9 @@ const NavBar = () => {
return () => window.removeEventListener("scroll", handleScroll);
}, []);

return (
const [showDatasets, setShowDatasets] = useState(false);

return (
<nav
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled
Expand All @@ -33,22 +36,34 @@ const NavBar = () => {
<div className="hidden md:flex space-x-6">
<a
href="https://github.com/epfl-ada/ada-2024-project-robodatapioneers2024"
className="hover:text-blue-600 transition-colors"
className="hover:text-blue-600 transition-colors font-semibold"
>
Github
</a>
<a
href="#"
className="hover:text-blue-600 transition-colors"
className="hover:text-blue-600 transition-colors font-semibold"
>
About the team
</a>
<a
href="#"
className="hover:text-blue-600 transition-colors"
>
The datasets used
</a>
<div className="relative">
<button
onClick={() => setShowDatasets(!showDatasets)}
className="hover:text-blue-600 transition-colors font-semibold"
>
The datasets used
</button>
{showDatasets && (
<div className="absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
<a
href="https://github.com/epfl-dlab/YouNiverse"
className="block px-4 py-2 text-gray-800 hover:bg-gray-100"
>
Youniverse
</a>
</div>
)}
</div>
</div>
</div>
<button className="md:hidden">
Expand Down
160 changes: 127 additions & 33 deletions app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function LandingPage() {

const particles = [];
const numParticles = 60;
const icons = ['⚽', '🏀', '🎾', '⚾', '🏈']; // Sports icons
const icons = ["⚽", "🏀", "🎾", "⚾", "🏈", "🏓"]; // Sports icons

// Initialize particles with sports icons
for (let i = 0; i < numParticles; i++) {
Expand Down Expand Up @@ -84,7 +84,7 @@ function LandingPage() {
id="animated-bg"
className="absolute inset-0 w-full h-full"
></canvas>
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 flex items-center justify-center px-20">
<h1 className="text-5xl font-bold text-black text-center">
Game-changer: How do the major sports events influence
YouTube engagement?
Expand All @@ -94,38 +94,132 @@ function LandingPage() {
);
}

export default function Home() {
function Footer() {
const teamMembers = [
{ name: "Team Member 1", role: "Data Analyst" },
{ name: "Team Member 2", role: "Developer" },
{ name: "Team Member 3", role: "Researcher" },
{ name: "Team Member 4", role: "Data Scientist" }
];

return (
<>
<NavBar />
<LandingPage />
<main className="min-h-screen flex flex-col items-center">
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h1 className="text-3xl font-bold mb-2">Create Next App</h1>
<p className="text-lg">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam autem quibusdam, delectus in corrupti, ab impedit magni iure eveniet aliquid soluta neque quisquam ducimus dolores ex suscipit pariatur. Voluptatibus, exercitationem?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis repellat iure tenetur similique nemo soluta velit voluptate. Tempore esse adipisci quia repellat amet eaque numquam deleniti asperiores dolore? Voluptates, possimus?
Suscipit fuga laudantium beatae vel esse non, consectetur dolores praesentium eos tempora? Perferendis eius accusantium tenetur sit error natus, corporis voluptas, beatae sed ipsa repudiandae qui nobis autem voluptatum quod?
Soluta sequi deleniti et a, expedita nesciunt quos ad, facere laudantium nisi numquam perferendis? Veritatis eum harum saepe quae itaque maxime quia, assumenda vero commodi iste dolores corporis dolorum sequi.
Placeat numquam nostrum sit, ipsam id delectus voluptatum inventore quas nemo ex. Dolor, ea dolore voluptate soluta nobis rerum nostrum nesciunt iusto magnam maxime id aperiam ipsum velit cum? Eaque!
Alias, magnam sunt vitae facilis consectetur aut, et, quae odio eveniet accusantium deleniti exercitationem laudantium iste tempore? Sapiente incidunt impedit vel debitis ab in tenetur beatae dolorem, nulla laborum ipsum.
Nihil quisquam odio quia veniam nemo voluptatibus animi! Sit labore eius voluptatem hic fugit eum itaque tempora, veniam ipsam at saepe numquam quis error perferendis eos, repellat ex harum excepturi.
Quae natus maxime ex eligendi odit molestias explicabo voluptatibus atque! Quis officiis quam, exercitationem blanditiis, dicta alias voluptates accusamus voluptatibus, fugit iste dolorem! Numquam excepturi quia maxime illo ea minus?
Tempora eveniet similique non perferendis repudiandae neque commodi aspernatur est totam nobis dolor, delectus incidunt repellendus tenetur facilis et quam, dicta corrupti quas iusto vitae quisquam illum saepe! Molestiae, reiciendis.
Possimus quas voluptates, tempora iusto ab perspiciatis atque amet explicabo enim laborum! Alias accusamus, veniam voluptatum sed inventore cupiditate? Reiciendis temporibus veniam autem, quo illum possimus magni blanditiis et fugiat.
Quae, voluptates fugit? Excepturi, quos. Accusamus numquam excepturi magnam libero porro eaque quas commodi, dolore facere ipsum aliquid saepe quibusdam. Ipsa deleniti, aperiam assumenda veniam iste cum sapiente voluptatem veritatis.
</p>
<footer className="bg-blue-500 text-white py-12 mt-8">
<div className="container mx-auto px-4">
<div className="mb-8">
<h2 className="text-2xl font-bold mb-4 text-center">Our Team</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{teamMembers.map((member, index) => (
<div key={index} className="text-center">
<h3 className="font-semibold">{member.name}</h3>
<p className="text-blue-100">{member.role}</p>
</div>
))}
</div>
</div>
<div className="text-center border-t border-blue-400 pt-4">
<p>© 2024 Sports Analytics Project. All rights reserved.</p>
</div>
</div>
<ChartComponent
loading={<LoadingSpinner />}
/>
<RacingChartComponent
loading={<LoadingSpinner />}
/>
<BubbleChartComponent
loading={<LoadingSpinner />}
/>
</main>
</>
</footer>
);
}

export default function Home() {
return (
<>
<NavBar />
<LandingPage />
<main className="min-h-screen flex flex-col items-center">
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h1 className="text-3xl font-bold mb-2">Create Next App</h1>
<p className="text-lg">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Ipsam autem quibusdam, delectus in corrupti, ab
impedit magni iure eveniet aliquid soluta neque quisquam
ducimus dolores ex suscipit pariatur. Voluptatibus,
exercitationem? Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Perspiciatis repellat iure tenetur
similique nemo soluta velit voluptate. Tempore esse
adipisci quia repellat amet eaque numquam deleniti
asperiores dolore? Voluptates, possimus? Suscipit fuga
laudantium beatae vel esse non, consectetur dolores
praesentium eos tempora? Perferendis eius accusantium
tenetur sit error natus, corporis voluptas, beatae sed
ipsa repudiandae qui nobis autem voluptatum quod? Soluta
sequi deleniti et a, expedita nesciunt quos ad, facere
laudantium nisi numquam perferendis? Veritatis eum harum
saepe quae itaque maxime quia, assumenda vero commodi
iste dolores corporis dolorum sequi. Placeat numquam
nostrum sit, ipsam id delectus voluptatum inventore quas
nemo ex. Dolor, ea dolore voluptate soluta nobis rerum
nostrum nesciunt iusto magnam maxime id aperiam ipsum
velit cum? Eaque! Alias, magnam sunt vitae facilis
consectetur aut, et, quae odio eveniet accusantium
deleniti exercitationem laudantium iste tempore?
Sapiente incidunt impedit vel debitis ab in tenetur
beatae dolorem, nulla laborum ipsum. Nihil quisquam odio
quia veniam nemo voluptatibus animi! Sit labore eius
voluptatem hic fugit eum itaque tempora, veniam ipsam at
saepe numquam quis error perferendis eos, repellat ex
harum excepturi. Quae natus maxime ex eligendi odit
molestias explicabo voluptatibus atque! Quis officiis
quam, exercitationem blanditiis, dicta alias voluptates
accusamus voluptatibus, fugit iste dolorem! Numquam
excepturi quia maxime illo ea minus? Tempora eveniet
similique non perferendis repudiandae neque commodi
aspernatur est totam nobis dolor, delectus incidunt
repellendus tenetur facilis et quam, dicta corrupti quas
iusto vitae quisquam illum saepe! Molestiae, reiciendis.
Possimus quas voluptates, tempora iusto ab perspiciatis
atque amet explicabo enim laborum! Alias accusamus,
veniam voluptatum sed inventore cupiditate? Reiciendis
temporibus veniam autem, quo illum possimus magni
blanditiis et fugiat. Quae, voluptates fugit? Excepturi,
quos. Accusamus numquam excepturi magnam libero porro
eaque quas commodi, dolore facere ipsum aliquid saepe
quibusdam. Ipsa deleniti, aperiam assumenda veniam iste
cum sapiente voluptatem veritatis.
</p>
</div>
<ChartComponent loading={<LoadingSpinner />} />
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h2 className="text-2xl font-bold mb-2">Create Next App</h2>
<p className="text-lg">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Ipsam autem quibusdam, delectus in corrupti, ab
impedit magni iure eveniet aliquid soluta neque quisquam
ducimus dolores ex suscipit pariatur. Voluptatibus,
exercitationem? Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Perspiciatis repellat iure tenetur
similique nemo soluta velit voluptate. Tempore esse
adipisci quia repellat amet eaque numquam deleniti
asperiores dolore? Voluptates, possimus? Suscipit fuga
laudantium beatae vel esse non, consectetur dolores
praesentium eos tempora? Perferendis eius accusantium
tenetur sit error natus, corporis voluptas, beatae sed
ipsa repudiandae qui nobis autem voluptatum quod? Soluta
sequi deleniti et a, expedita nesciunt quos ad, facere
laudantium nisi numquam perferendis? Veritatis eum harum
saepe quae itaque maxime quia, assumenda vero commodi
iste dolores corporis dolorum sequi.
</p>
</div>
<RacingChartComponent loading={<LoadingSpinner />} />
<div className="flex flex-col space-y-2 p-4 max-w-4xl">
<h2 className="text-2xl font-bold mb-2">Create Next App</h2>
<p className="text-lg">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Ipsam autem quibusdam, delectus in corrupti, ab
impedit magni iure eveniet aliquid soluta neque quisquam
ducimus dolores ex suscipit pariatur. Voluptatibus,
exercitationem? Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Perspiciatis repellat iure tenetur
similique nemo soluta velit voluptate.
</p>
</div>
<BubbleChartComponent loading={<LoadingSpinner />} />
</main>
<Footer />
</>
);
}
Binary file added public/youniverse_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7c6087c

Please sign in to comment.