Skip to content

Commit

Permalink
feat(web): mobile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
betofigueiredo committed Apr 6, 2024
1 parent e69dd9c commit 54352fd
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 89 deletions.
15 changes: 10 additions & 5 deletions web/src/components/FeaturedHighlights/FeaturedHighlights.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,18 +71,23 @@ const FeaturedHighlights = () => {

return (
<>
<div className="relative mt-24 min-h-fit w-full md:min-h-[635px]">
<div className="relative mt-12 min-h-[560px] w-full md:mt-24 md:min-h-[635px]">
{stop ? (
<></>
) : (
<>
<h1 className="hidden animate-slide-in-from-left font-serif text-[120px] font-bold text-gray-200 md:block">
{order.toString().padStart(2, "0")}
</h1>
<div className="mb-8 mt-1 h-1 w-28 animate-slide-in-from-left bg-black" />
<div className="relative mb-10 w-full animate-slide-in-from-left font-serif text-4xl font-bold text-gray-900 md:w-1/2 md:text-6xl">
<img
src={image}
alt={title}
className="relative right-0 top-0 z-[-2] block animate-opacity-in md:hidden"
/>
<div className="mb-8 mt-1 hidden h-1 w-28 animate-slide-in-from-left bg-black md:block" />
<div className="relative mb-10 mt-5 w-full animate-slide-in-from-left font-serif text-4xl font-bold text-gray-900 md:mt-0 md:w-1/2 md:text-6xl">
<Link to={link}>{title}</Link>
<div className="absolute right-20 top-[36px] z-[-1] mb-8 mt-1 h-4 w-96 bg-amber-400" />
<div className="absolute right-20 top-[36px] z-[-1] mb-8 mt-1 hidden h-4 w-96 bg-amber-400 md:block" />
</div>
<div className="mb-8 w-full animate-slide-in-from-left text-gray-700 md:w-2/5">
{description}
Expand All @@ -95,7 +100,7 @@ const FeaturedHighlights = () => {
<img
src={image}
alt={title}
className="absolute right-0 top-0 z-[-2] animate-opacity-in"
className="absolute right-0 top-0 z-[-2] hidden animate-opacity-in md:block"
/>
</>
)}
Expand Down
55 changes: 55 additions & 0 deletions web/src/components/FourthHighlights/FourthHighlights.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Highlight } from "@/types/highlight";
import HighlightCard from "@/components/HighlightCard";

const FourthHighlights = () => {
const highlights: Highlight[] = [
{
id: "11",
oldId: 11,
type: "GENERAL",
title: "FÁCEIS E RÁPIDOS",
subtitle:
"Separamos 10 drinques deliciosos e muito fáceis de preparar para você fazer em casa, sem nenhum trabalho. Confira!",
description: "",
},
{
id: "1",
oldId: 1,
type: "GENERAL",
title: "HALLOWEEN",
subtitle:
"O Halloween chegou? Então surpreenda seus amigos com este terríveis e assustadores drinques que separamos para esse feriado.",
description: "",
},
{
id: "112",
oldId: 112,
type: "GENERAL",
title: "MOJITO",
subtitle:
"O Mojito é um coquetel refrescante conhecido mundialmente. Este clássico é um dos poucos feitos com hortelã fresca, o que o torna único.",
description: "",
customUrl: "/drinques/24",
},
{
id: "113",
oldId: 113,
type: "GENERAL",
title: "MANGO DAIQUIRI",
subtitle:
"O Mango Daiquiri é delicioso e muito refrescante, perfeito para os dias quentes.",
description: "",
customUrl: "/drinques/432",
},
];

return (
<div className="mt-14 grid grid-cols-1 gap-7 md:grid-cols-4">
{highlights?.map((highlight) => (
<HighlightCard key={highlight.id} highlight={highlight} />
))}
</div>
);
};

export default FourthHighlights;
1 change: 1 addition & 0 deletions web/src/components/FourthHighlights/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./FourthHighlights";
2 changes: 1 addition & 1 deletion web/src/components/NavigationBar/components/Logo/Logo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Link } from "react-router-dom";

const Logo = () => {
return (
<div className="absolute z-10 w-24 pt-3 text-center text-[26px] font-medium md:pt-5">
<div className="relative z-10 w-auto pt-3 text-center text-[26px] font-medium md:absolute md:w-24 md:pt-5">
<Link to="/">
DRINQUE<span className="text-[#f3c73f]">PEDIA</span>
</Link>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import NavigationItem from "../NavigationItem";

const Navigation = () => {
return (
<ul className="container relative m-0 mx-auto flex w-full list-none flex-row justify-end gap-4 p-0 pr-5 md:w-auto lg:mx-0 lg:justify-center">
<ul className="container relative m-0 mx-auto flex w-full list-none flex-row justify-end gap-4 p-0 md:w-auto lg:mx-0 lg:justify-center lg:pr-14">
<NavigationItem to="/drinques" label="Drinques" />
<NavigationItem to="/destaques" label="Destaques" />
<NavigationItem to="/tudosobrebar" label="Tudo sobre bar" />
Expand Down
82 changes: 31 additions & 51 deletions web/src/components/ThirdHighlights/ThirdHighlights.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,35 @@
import { Highlight } from "@/types/highlight";
import HighlightCard from "@/components/HighlightCard";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";

const ThirdHighlights = () => {
const highlights: Highlight[] = [
{
id: "11",
oldId: 11,
type: "GENERAL",
title: "FÁCEIS E RÁPIDOS",
subtitle:
"Separamos 10 drinques deliciosos e muito fáceis de preparar para você fazer em casa, sem nenhum trabalho. Confira!",
description: "",
},
{
id: "1",
oldId: 1,
type: "GENERAL",
title: "HALLOWEEN",
subtitle:
"O Halloween chegou? Então surpreenda seus amigos com este terríveis e assustadores drinques que separamos para esse feriado.",
description: "",
},
{
id: "112",
oldId: 112,
type: "GENERAL",
title: "MOJITO",
subtitle:
"O Mojito é um coquetel refrescante conhecido mundialmente. Este clássico é um dos poucos feitos com hortelã fresca, o que o torna único.",
description: "",
customUrl: "/drinques/24",
},
{
id: "113",
oldId: 113,
type: "GENERAL",
title: "MANGO DAIQUIRI",
subtitle:
"O Mango Daiquiri é delicioso e muito refrescante, perfeito para os dias quentes.",
description: "",
customUrl: "/drinques/432",
},
];

return (
<div className="mt-14 grid grid-cols-1 gap-7 md:grid-cols-4">
{highlights?.map((highlight) => (
<HighlightCard key={highlight.id} highlight={highlight} />
))}
const ThirdHighlights = () => (
<div className="container grid grid-cols-1 gap-10 pb-4 pt-24 md:grid-cols-2">
<div className="pb-20">
<h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
Dicas Gerais
</h1>
<p className="pb-8 pr-0 text-gray-500 md:pr-24">
Descubra como criar os mixes essenciais para seus drinks favoritos,
aprenda técnicas de decoração simples, como fazer coquetéis em camadas e
muito mais.
</p>
<Link to="/dicas">
<Button>Veja mais dicas</Button>
</Link>
</div>
<div className="pb-20">
<h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
Tudo sobre bar
</h1>
<p className="pb-8 pr-0 text-gray-500 md:pr-9">
Explore a classificação dos coquetéis, descubra as principais medidas
utilizadas, conheça os diferentes tipos de copos e desvende outros
segredos essenciais da mixologia.
</p>
<Link to="/tudosobrebar">
<Button>Veja mais detalhes</Button>
</Link>
</div>
);
};
</div>
);

export default ThirdHighlights;
34 changes: 3 additions & 31 deletions web/src/pages/Home/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import FeaturedHighlights from "@/components/FeaturedHighlights";
import SecondHighlights from "@/components/SecondHighlights";
import ThirdHighlights from "@/components/ThirdHighlights";
import FourthHighlights from "@/components/FourthHighlights";

const Home = () => (
<>
Expand All @@ -11,37 +10,10 @@ const Home = () => (
<SecondHighlights />
</div>
<div className="my-24 w-full bg-gray-100">
<div className="container grid grid-cols-2 gap-10 py-24">
<div>
<h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
Dicas Gerais
</h1>
<p className="pb-8 pr-0 text-gray-500 md:pr-24">
Descubra como criar os mixes essenciais para seus drinks favoritos,
aprenda técnicas de decoração simples, como fazer coquetéis em
camadas e muito mais.
</p>
<Link to="/dicas">
<Button>Veja mais dicas</Button>
</Link>
</div>
<div>
<h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
Tudo sobre bar
</h1>
<p className="pb-8 pr-0 text-gray-500 md:pr-9">
Explore a classificação dos coquetéis, descubra as principais
medidas utilizadas, conheça os diferentes tipos de copos e desvende
outros segredos essenciais da mixologia.
</p>
<Link to="/tudosobrebar">
<Button>Veja mais detalhes</Button>
</Link>
</div>
</div>
<ThirdHighlights />
</div>
<div className="container">
<ThirdHighlights />
<FourthHighlights />
</div>
</>
);
Expand Down

0 comments on commit 54352fd

Please sign in to comment.