Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/mtocommunity/landing-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgitooCoDe
jorgitooCoDe committed Sep 23, 2024
2 parents b6e3a30 + 296b1a0 commit a290e2a
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 193 deletions.
54 changes: 54 additions & 0 deletions src/components/general/organism/custom_navbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { MTOTransparentBackground } from "../../../../assets";

import "./style.css";

type Props = {
children: React.ReactNode;
fixed: boolean;
full?: boolean;
};

function CustomNavBar({ children, fixed, full }: Props) {
const [toggle, setToggle] = useState(true);

const handleToggle = () => {
setToggle(!toggle);
};

return (
<>
<header
className={`flex justify-between items-center w-full h-14${
fixed ? " fixed" : null
} top-0 px-4 transition-colors z-50 ${
!toggle ? "bg-mto_gray" : "bg-transparent"
} lg:bg-transparent lg:w-[95%] lg:mx-auto lg:top-6`}
>
<a className="h-full flex items-centers" href="/">
<MTOTransparentBackground className="h-full lg:h-[150%] aspect-square" />
{full && (
<span className="font-main_sans flex items-center font-semibold">
Many To One
</span>
)}
</a>
<div className="text-white lg:hidden" onClick={handleToggle}>
<FontAwesomeIcon icon={faBars} />
</div>
<nav className="hidden lg:flex nav-desktop">{children}</nav>
</header>
<div
className={`nav-mobile fixed w-full top-14 bg-mto_gray text-mto_blue_light z-20 flex-col items-center justify-between py-4 text-xl lg:hidden ${
toggle ? "hidden" : "flex"
}`}
>
{children}
</div>
</>
);
}

export default CustomNavBar;
40 changes: 40 additions & 0 deletions src/components/general/organism/custom_navbar/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.nav-mobile {
animation: dropDown 0.2s ease-in-out;
height: 33dvh;
}

.nav-desktop {
@apply h-3/4 text-gray-300;
}

.nav-desktop a {
@apply px-5 h-full flex items-center transition-colors;
}

.nav-desktop a:hover {
@apply relative text-white drop-shadow-md shadow-white;
}

.nav-desktop a:hover::before {
content: "";
@apply h-[.2rem] w-[calc(100%-2.5rem)] bg-white absolute bottom-1 left-[1.25rem];
animation: sliceIn 0.2s ease-in-out;
}

@keyframes sliceIn {
0% {
width: 0;
}
100% {
width: calc(100%-2.5rem);
}
}

@keyframes dropDown {
0% {
height: 0;
}
100% {
height: 33dvh;
}
}
2 changes: 2 additions & 0 deletions src/layouts/event/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ type Props = {
const {title, description, path} = Astro.props
import "../../styles.css";
---

<!doctype html>
Expand Down
47 changes: 0 additions & 47 deletions src/layouts/event/style.css
View file

This file was deleted.

177 changes: 31 additions & 146 deletions src/pages/event/iot-seminario-robotica-basica.astro
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
---
import { landing_iot } from "../../assets";
import Button from "../../components/general/attoms/button";
import { ButtonType } from "../../components/general/attoms/button/types";
import CustomNavBar from "../../components/general/organism/custom_navbar";
import Layout from "../../layouts/event/index.astro";
import Description from "../../components/general/molecule/description";
Expand All @@ -10,153 +14,34 @@ const props ={
---

<Layout {...props}>
<div class="text-white">
<!-- Principal -->
<main id="home" class="min-h-screen">

</main>
<!-- Agenda -->
<section
class="agenda-container bg-gradient-to-t from-mto_red to-mto_gray"
>
<h1
class="text-center text-white text-5xl font-bold mb-12"
>
Agenda
</h1>

<!-- Día 1 -->
<div
class="day-section mb-8"
>
<div
class="flex items-center space-x-4 ml-4 max-w-xs"
>
<h2
class="text-white text-3xl font-semibold"
>
Día 1
</h2>
<hr
class="flex-grow border-t-2 border-white opacity-80 mr-3"
>
</div>

<p
class="text-white mb-6 mt-1 m-4 opacity-80"
>
Vie 27 de Setiembre
</p>
<Description
className="bg-gray-200"
>
<ul
class="list-disc list-inside"
>
<li>
IoT.
</li>
<li>
Ejercicios prácticos.
</li>
<li>
Arduino IDE.
</li>
<li>
Principios de programación en Arduino IDE.
</li>
</ul>
</Description>
</div>

<!-- Día 2 -->
<div
class="day-section mb-8"
>
<div
class="flex items-center space-x-4 ml-4 max-w-xs"
>
<h2
class="text-white text-3xl font-semibold"
>
Día 2
</h2>
<hr
class="flex-grow border-t-2 border-white opacity-80 mr-3"
>
</div>

<p
class="text-white mb-6 mt-3 m-4 opacity-80"
>
Vie 04 de Octubre
</p>
<Description
className="bg-gray-200"
>
<ul
class="list-disc list-inside"
>
<li>
Repaso del seminario 1.
</li>
<li>
Ejercicios prácticos.
</li>
<li>
Conexión y programación con Arduino de LEDs, Sensores, pulsadores y potenciómetros.
</li>
</ul>
</Description>
</div>

<!-- Día 3 -->
<div
class="day-section mb-8"
>
<div
class="flex items-center space-x-4 ml-4 max-w-xs"
>
<h2
class="text-white text-3xl font-semibold"
>
Día 1
</h2>
<hr
class="flex-grow border-t-2 border-white opacity-80 mr-3"
>
</div>

<p
class="text-white mb-6 mt-1 m-4 opacity-80"
>
Vie 27 de Setiembre
</p>
<Description
className="bg-gray-200"
>
<ul
class="list-disc list-inside"
>
<li>
IoT.
</li>
<li>
Ejercicios prácticos.
</li>
<li>
Arduino IDE.
</li>
<li>
Principios de programación en Arduino IDE.
</li>
</ul>
</Description>
</div>
</section>
<!-- Ponentes-->
<div id="ponentes" class="min-h-screen">
<div class="text-white">
<CustomNavBar fixed full client:load>
<a href="#agenda" >Agenda</a>
<a href="#ponentes">Ponentes</a>
</CustomNavBar>

<!-- Principal -->
<main id="home" class="min-h-screen relative flex items-center justify-center">
<img src={landing_iot} alt={landing_iot} class="absolute top-0 object-cover w-full h-full blur-[1px] -z-20 overflow-hidden">
<div class="absolute top-0 w-full h-full from-mto_blue to-mto_gray bg-gradient-to-b -z-10 opacity-80"></div>
<div class="flex flex-col gap-32 items-center">
<div class="w-3/4">
<h1 class="text-2xl font-bold text-center">Seminario de robótica básica</h1>
<p class="text-sm text-center">Sé parte de uno de los eventos a cargo del equipo de IoT, aquí aprenderás los fundamentos de Robótica, con arduino.</p>
</div>
<Button type={ButtonType.PRIMARY} className="w-2/3" link="https://docs.google.com/forms/d/e/1FAIpQLScF3UBmG771VxNH3hQJ4VnV2H9tPCmxCtOxu4VLqK4lsGxD2w/viewform?usp=sf_link">
Inscríbete
</Button>
</div>
</main>

<!-- Agenda -->
<div id="agenda" class="min-h-screen">
<p class="text-2xl">Agenda</p>
</div>
<!-- Ponentes-->
<div id="ponentes" class="min-h-screen">

</div>
</div>
</Layout>

0 comments on commit a290e2a

Please sign in to comment.