Skip to content

Commit

Permalink
feat: add form for collaborators in community page
Browse files Browse the repository at this point in the history
  • Loading branch information
@geroxima
geroxima committed Oct 3, 2024
1 parent 7d4d7c4 commit d9b7312
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 30 deletions.
3 changes: 1 addition & 2 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,8 @@ import { ViewTransitions } from "astro:transitions";
<meta name="generator" content={Astro.generator} />
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#56aded" />
<!-- <link href="/pagefind/pagefind-ui.css" rel="stylesheet"> -->
<!-- <script src="/pagefind/pagefind-ui.js" is:inline></script> -->
<meta name="google-site-verification" content="ORWWMsTqKvZ-9nbTFXatncB8OHPS32CSy6xI8_AWCdI" />
<script async src="https://tally.so/widgets/embed.js"></script>
<title>{title}</title>
<ViewTransitions />
</head>
Expand Down
98 changes: 70 additions & 28 deletions src/pages/comunidad/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,54 @@ import CommunityCards from "@components/CommunityCards.astro";
---

<Layout title="Acerca de nosotros">
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
<div
class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"
>
</div>
<section>
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
<div onselectstart="return false" id="confetti-button" class="cursor-pointer inline-flex items-center p-3 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full hover:bg-gray-200 " role="alert">
<Icon name="party" class="w-5 h-5 mr-2" />
<span class="text-sm font-medium text-gray-500">¡Lo has logrado!</span>
</div>
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl ">Bienvenidos a la comunidad de Ideal</h1>
<p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48">En Ideal creemos en el poder del trabajo en equipo y la colaboración para enriquecer la experiencia educativa y académica.</p>
<div>
<div
class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12"
>
<div
onselectstart="return false"
id="confetti-button"
class="cursor-pointer inline-flex items-center p-3 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full hover:bg-gray-200"
role="alert"
>
<Icon name="party" class="w-5 h-5 mr-2" />
<span class="text-sm font-medium text-gray-500">¡Lo has logrado!</span>
</div>
<h1
class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl"
>
Bienvenidos a la comunidad de Ideal
</h1>
<p
class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48"
>
En Ideal creemos en el poder del trabajo en equipo y la colaboración
para enriquecer la experiencia educativa y académica.
</p>
<div>
<div class="container px-4 md:px-6 mt-12">
<div class="grid gap-6 lg:grid-cols-3">
<CommunityCards iconName="group" title="Comunidad Colaborativa" description="Únete a una comunidad activa de estudiantes que comparten conocimientos y recursos." />
<CommunityCards
iconName="group"
title="Comunidad Colaborativa"
description="Únete a una comunidad activa de estudiantes que comparten conocimientos y recursos."
/>

<CommunityCards iconName="book" title="Recursos Académicos" description="Accede a una amplia biblioteca de materiales educativos, notas de clase y exámenes." />
<CommunityCards
iconName="book"
title="Recursos Académicos"
description="Accede a una amplia biblioteca de materiales educativos, notas de clase y exámenes."
/>

<CommunityCards iconName="smile" title="Experiencia Personalizada" description="Disfruta de una plataforma intuitiva y fácil de usar, diseñada para mejorar tu aprendizaje." />
<CommunityCards
iconName="smile"
title="Experiencia Personalizada"
description="Disfruta de una plataforma intuitiva y fácil de usar, diseñada para mejorar tu aprendizaje."
/>
</div>
</div>

Expand All @@ -31,25 +62,36 @@ import CommunityCards from "@components/CommunityCards.astro";
Próximamente más novedades y eventos en la comunidad de Ideal.
</h4>
</div>
</div>

</div>

</section>
</Layout>
<button
data-tally-open="31lVzL"
data-tally-layout="modal"
data-tally-width="500"
data-tally-emoji-text="👋"
data-tally-emoji-animation="wave"
data-tally-auto-close="500"
class="fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600"
>
Abrir Formulario
</button>
</div>
</section>

<script>
import confetti from 'canvas-confetti';
<script>
import confetti from "canvas-confetti";

// const pineapple = confetti.shapeFromText({ text: '🍍', scalar: 2 });
// const pineapple = confetti.shapeFromText({ text: '🍍', scalar: 2 });

const confettiButton = document.getElementById('confetti-button');
const confettiButton = document.getElementById("confetti-button");

confettiButton?.addEventListener('click', () => {
confetti({
shapes: ['circle'],
particleCount: 100,
spread: 100,
origin: { y: 0.6 }
confettiButton?.addEventListener("click", () => {
confetti({
shapes: ["circle"],
particleCount: 100,
spread: 100,
origin: { y: 0.6 },
});
});
});
</script>
</script>
</Layout>

0 comments on commit d9b7312

Please sign in to comment.