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

Jump to bottom

Rdcampos7890/formated home page #3

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Rdcampos7890/formated home page #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8deaa13
formated competitions and overview
Rdcampos7890 Feb 3, 2024
a170f39
formated home-page, which is navbar and footer
Rdcampos7890 Feb 3, 2024
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
9 changes: 9 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.0.1",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7"
},
Expand Down
117 changes: 84 additions & 33 deletions src/components/home-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,86 +17,103 @@ import Schedule from "./sections/Schedule";
import Competitions from "./sections/Competitions";
import Speakers from "./sections/Speakers";
import Sponsors from "./sections/Sponsors";
import { FaHome, FaMedal, FaLinkedin, FaInstagramSquare, FaFacebook } from "react-icons/fa";
import { FaSquareXTwitter } from "react-icons/fa6";
import { MdOutlineSchedule } from "react-icons/md";
import { BsQuestionSquare } from "react-icons/bs";
import { SiGithubsponsors } from "react-icons/si";
import { FcPodiumWithSpeaker } from "react-icons/fc";

export function HomePage() {
return (
<div className="flex flex-col min-h-screen bg-[#f7f1fe] dark:bg-[#411972]">
<div
id="home"
className="flex flex-col min-h-screen bg-[#f7f1fe] dark:bg-[#411972]"
>
<header className="flex items-center justify-between px-4 py-2 border-b border-[#9e3ffd]">
<Link className="flex items-center gap-2" href="#">
<Link className="flex items-center gap-2" href="#home">
<MountainIcon className="h-6 w-6 text-[#9e3ffd]" />
<span className="text-lg font-semibold text-[#411972] dark:text-[#debdff]">
<span className="hidden sm:flex text-lg font-semibold text-[#411972] dark:text-[#debdff]">
Tech SumMIT 2024
</span>
</Link>
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
>
Home
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuList className="grid grid-cols-3 sm:flex sm:flex-row sm:items-centered sm:justi-center">
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#home"
>
Schedule
<i className="flex sm:hidden">
<FaHome />
</i>
<div className="hidden sm:flex">Home</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#schedule"
>
Competitions
<i className="flex sm:hidden">
<MdOutlineSchedule />
</i>
<div className="hidden sm:flex">Schedule</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#competitions"
>
Speakers
<i className="flex sm:hidden">
<FaMedal />
</i>
<div className="hidden sm:flex">Competitons</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#speakers"
>
Sponsors
<i className="flex sm:hidden">
<FcPodiumWithSpeaker />
</i>
<div className="hidden sm:flex">Speakers</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#sponsors"
>
FAQ
<i className="flex sm:hidden">
<SiGithubsponsors />
</i>
<div className="hidden sm:flex">Sponsors</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link
className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-[#f7f1fe] px-4 py-2 text-sm font-medium transition-colors hover:bg-[#debdff] hover:text-[#411972] focus:bg-[#debdff] focus:text-[#411972] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#debdff]/50 data-[state=open]:bg-[#debdff]/50 dark:bg-[#411972] dark:hover:bg-[#9e3ffd] dark:hover:text-[#f7f1fe] dark:focus:bg-[#9e3ffd] dark:focus:text-[#f7f1fe] dark:data-[active]:bg-[#9e3ffd]/50 dark:data-[state=open]:bg-[#9e3ffd]/50"
href="#"
href="#faq"
>
Register
<i className="flex sm:hidden">
<BsQuestionSquare />
</i>
<div className="hidden sm:flex">FAQ</div>
</Link>
</NavigationMenuLink>
</NavigationMenuItem>
Expand All @@ -110,14 +127,48 @@ export function HomePage() {
</Button>
</header>
<main className="flex-1">
<Hero />
<Overview />
<Schedule />
<Competitions />
<Speakers />
<Sponsors />
<Faq />
<div id="hero">
<Hero />
</div>
<div id="overview">
<Overview />
</div>
<div id="schedule">
<Schedule />
</div>
<div id="competitions">
<Competitions />
</div>
<div id="speakers">
<Speakers />
</div>
<div id="sponsors">
<Sponsors />
</div>
<div id="faq">
<Faq />
</div>
</main>
<footer className="flex items-center justify-center py-4 border-t border-[#9e3ffd]">
<div className="flex items-center gap-6 px-5">
<Link href="">
<FaLinkedin size={35} />
</Link>
<Link href="">
<FaInstagramSquare size={35} />
</Link>
<Link href="">
<FaFacebook size={35} />
</Link>
<Link href="">
<FaSquareXTwitter size={35} />
</Link>
</div>
<p className="text-[#411972] dark:text-[#f7f1fe] inset-y-0 right-0 px-5">
&copy; {new Date().getFullYear()} Tech SumMIT 2024. All rights
reserved.
</p>
</footer>
</div>
);
}
Expand Down
73 changes: 60 additions & 13 deletions src/components/sections/Competitions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,69 @@ import React from "react";
const Competitions = () => {
return (
<section className="w-full py-12 md:py-24 lg:py-32 bg-[#f7f1fe] dark:bg-[#411972]">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<div className="space-y-2">
<div className="inline-block rounded-lg bg-[#debdff] px-3 py-1 text-sm text-[#411972] dark:bg-[#9e3ffd] dark:text-[#f7f1fe]">
Competitions
</div>
<h2 className="text-3xl font-bold tracking-tighter text-[#411972] dark:text-[#debdff] sm:text-4xl">
Learn about the exciting competitions at the Tech SumMIT 2024.
<div className="container flex-col mx-auto px-4 space-y-20 text-center">
<h2 className="text-3xl lg:text-4xl font-bold text-[#411972] dark:text-[#f7f1fe]">
Competitions
</h2>
<div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
<div className="w-full lg:w-1/2">
<h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
Comp 1 Name
</h2>
<p className="max-w-[600px] text-[#411972] md:text-xl dark:text-[#debdff]">
The Tech SumMIT 2024 will host a variety of competitions designed
to challenge and inspire participants. From coding challenges to
innovation contests, there&apos;s a competition for everyone. Stay
tuned for more details.
<p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
venenatis, metus sit amet tincidunt volutpat, justo libero
fermentum odio, ac scelerisque odio metus et nisl.
</p>
</div>
<div className="w-full lg:w-1/2 mt-8 lg:mt-0">
<img
src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
alt="Comp 1 Img"
className="w-full h-auto rounded-lg"
/>
</div>
</div>
<div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
<div className="w-full lg:w-1/2">
<h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
Comp 2 Name
</h2>
<p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
venenatis, metus sit amet tincidunt volutpat, justo libero
fermentum odio, ac scelerisque odio metus et nisl.
</p>
</div>
<div className="w-full lg:w-1/2 mt-8 lg:mt-0">
<img
src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
alt="Comp 2 Img"
className="w-full h-auto rounded-lg"
/>
</div>
</div>
<div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
<div className="w-full lg:w-1/2">
<h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
Comp 3 Name
</h2>
<p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
venenatis, metus sit amet tincidunt volutpat, justo libero
fermentum odio, ac scelerisque odio metus et nisl.
</p>
</div>
<div className="w-full lg:w-1/2 mt-8 lg:mt-0">
<img
src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
alt="Comp 3 Img"
className="w-full h-auto rounded-lg"
/>
</div>
</div>
</div>
</section>
Expand Down
33 changes: 17 additions & 16 deletions src/components/sections/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,24 @@ import React from "react";
const Overview = () => {
return (
<section className="w-full py-12 md:py-24 lg:py-32 bg-[#f7f1fe] dark:bg-[#411972]">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<div className="space-y-2">
<div className="inline-block rounded-lg bg-[#debdff] px-3 py-1 text-sm text-[#411972] dark:bg-[#9e3ffd] dark:text-[#f7f1fe]">
Event Overview
</div>
<h2 className="text-3xl font-bold tracking-tighter text-[#411972] dark:text-[#debdff] sm:text-4xl">
Learn about the Tech SumMIT 2024, its goals, and what makes it
unique.
<div className="container mx-auto px-4">
<div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
<div className="w-full lg:w-1/2 mt-8 lg:mt-0">
<img
src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
alt="About Us Img"
className="w-full h-auto rounded-lg"
/>
</div>
<div className="w-full lg:w-1/2">
<h2 className="text-3xl lg:text-4xl font-bold text-[#411972] dark:text-[#f7f1fe]">
About Us
</h2>
<p className="max-w-[600px] text-[#411972] md:text-xl dark:text-[#debdff]">
The Tech SumMIT 2024 is a premier event for technology
enthusiasts, professionals, and students. It&apos;s a platform to
learn about the latest trends in technology, network with industry
leaders, and participate in exciting competitions. The event will
feature keynote speeches, panel discussions, workshops, and much
more.
<p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
venenatis, metus sit amet tincidunt volutpat, justo libero
fermentum odio, ac scelerisque odio metus et nisl.
</p>
</div>
</div>
Expand Down