Skip to content

GitLab

Merged
Created by André Sacilotto Santos@andre.santosOwner0 of 3 tasks completed0/3 tasks

Componente ajuste de experiências

Mudanças

Como testar

`import { Carousel } from "@/components/carousel/carousel"; import { CardsInfoOnHover } from "@/components/cards/cardInfoOnHover"; import { createFileRoute, Link } from "@tanstack/react-router"; import { Button, DefaultButton } from "@/components/buttons/defaultButton"; import { InfoExperiencias } from "@/components/ui/info-experiencias-home"; import { Typography } from "@/components/typography/typography"; import ExperienceCard from "@/components/cards/experienceTuningCard"

export const Route = createFileRoute("/(index)/")({ component: RouteComponent, });

function RouteComponent() { return (

PRÓ-MATA Centro de Pesquisas 
    <div className="absolute inset-0 bg-black/20"></div>

    <div className="relative z-10 max-w-[clamp(40rem,80vw,56rem)] mx-auto px-[clamp(1rem,4vw,2rem)] text-center">
      <Typography
        variant="h1_light"
        className="text-[clamp(2rem,6vw,3.75rem)] font-bold leading-tight mb-[clamp(0.75rem,1.5vw,1rem)]"
        style={{ textShadow: "0.125em 0.125em 0.25em rgba(0,0,0,0.6)" }}
      >
        Bem vindo ao
      </Typography>
      <Typography
        className="text-[clamp(2rem,6vw,3.75rem)] font-bold leading-tight italic mb-[clamp(1rem,2vw,1.5rem)] text-banner"
        style={{ textShadow: "0.125em 0.125em 0.25em rgba(0,0,0,0.6)" }}
      >
        PRÓ-MATA
      </Typography>
      <Typography
        variant="h3_light"
        className="text-[clamp(1.125rem,2.5vw,1.5rem)] font-medium mb-[clamp(1rem,2.5vw,2rem)]"
      >
        Centro de Pesquisas e Conservação da Natureza
      </Typography>

      <div className="flex flex-col sm:flex-row gap-[clamp(0.75rem,2vw,1rem)] justify-center items-center">
        <Link to="/reserve">
          <DefaultButton
            label="Reservar"
            variant="primary"
            className="p-5 text-md"
          />
        </Link>
        <a
          href="https://www.pucrs.br/ima/pro-mata/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <DefaultButton
            label="Venha nos conhecer!"
            variant="secondary"
            className="p-5 text-md"
          />
        </a>
      </div>
    </div>
  </div>
  <div className="h-[clamp(2.5rem,6vh,5rem)] w-full bg-main-dark-green" />
  <div className="px-4 sm:px-6 lg:px-8 py-[clamp(2rem,6vw,5rem)] flex flex-col items-center">
    <InfoExperiencias />
    <CardsInfoOnHover />
    <ExperienceCard
      title="Experiência X"
      price={450}
      period={{
        start: new Date("2024-08-01"),
        end: new Date("2024-08-31"),
      }}
      imageUrl="/home-page-image.png"
    />

    <Carousel />
    <div className="flex flex-col items-center mb-[clamp(2rem,5vw,3.75rem)] justify-center">
      <Typography
        variant="h4"
        className="my-[clamp(0.75rem,2vw,1.125rem)] font-medium text-on-banner-text text-[clamp(1.125rem,2.5vw,1.5rem)]"
      >
        Não perca tempo e venha viver essa experiência única!
      </Typography>
      <Link to="/reserve">
        <Button
          label="Fazer Reserva"
          variant="gray"
          className="p-5 text-md"
        />
      </Link>
    </div>
  </div>
</div>

); } `

Acceptance Criteria

  • Deve mostrar as informações da experiências
  • Deve poder selecionar a data e o número de pessoas que irão participar daquela experiência
  • As datas possíveis para escolha devem ser dentro dos dias disponíveis daquela experiência

Screenshots da tela/componente desenvolvido

Observações

🔄 Sincronizado do GitHub

Sincronizado automaticamente do GitHub para GitLab AGES