forked from git.gladyson/openmonetis
feat: reformulação completa da landing page
Moderniza visual, melhora experiência mobile e adiciona seções dedicadas ao Companion e galeria de screenshots. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
42
components/landing/animate-on-scroll.tsx
Normal file
42
components/landing/animate-on-scroll.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { type ReactNode, useEffect, useRef, useState } from "react";
|
||||
|
||||
interface AnimateOnScrollProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function AnimateOnScroll({ children, className }: AnimateOnScrollProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const element = ref.current;
|
||||
if (!element) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
observer.unobserve(element);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
|
||||
);
|
||||
|
||||
observer.observe(element);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`transition-all duration-700 ease-out ${
|
||||
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
|
||||
} ${className ?? ""}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
components/landing/mobile-nav.tsx
Normal file
92
components/landing/mobile-nav.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { RiArrowRightSLine, RiMenuLine } from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
|
||||
const navLinks = [
|
||||
{ href: "#telas", label: "Conheça as telas" },
|
||||
{ href: "#funcionalidades", label: "Funcionalidades" },
|
||||
{ href: "#companion", label: "Companion" },
|
||||
{ href: "#stack", label: "Stack" },
|
||||
{ href: "#como-usar", label: "Como usar" },
|
||||
];
|
||||
|
||||
interface MobileNavProps {
|
||||
isPublicDomain: boolean;
|
||||
isLoggedIn: boolean;
|
||||
}
|
||||
|
||||
export function MobileNav({ isPublicDomain, isLoggedIn }: MobileNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="md:hidden">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label="Abrir menu"
|
||||
>
|
||||
<RiMenuLine size={20} />
|
||||
</Button>
|
||||
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetContent side="right" className="w-72">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
<Logo />
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<nav className="flex flex-col gap-1 px-4">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{!isPublicDomain && (
|
||||
<div className="mt-auto flex flex-col gap-2 border-t p-4">
|
||||
{isLoggedIn ? (
|
||||
<Link href="/dashboard" onClick={() => setOpen(false)}>
|
||||
<Button variant="outline" className="w-full">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login" onClick={() => setOpen(false)}>
|
||||
<Button variant="ghost" className="w-full">
|
||||
Entrar
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/signup" onClick={() => setOpen(false)}>
|
||||
<Button className="w-full gap-2">
|
||||
Começar
|
||||
<RiArrowRightSLine size={16} />
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
components/landing/setup-tabs.tsx
Normal file
108
components/landing/setup-tabs.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
export function SetupTabs() {
|
||||
return (
|
||||
<Tabs defaultValue="docker" className="w-full">
|
||||
<TabsList className="justify-center mb-6">
|
||||
<TabsTrigger value="docker">Docker (Recomendado)</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="docker">
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
<StepCard step={1} title="Clone o repositório">
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded overflow-x-auto">
|
||||
git clone https://github.com/felipegcoutinho/openmonetis.git
|
||||
</code>
|
||||
</StepCard>
|
||||
|
||||
<StepCard step={2} title="Configure as variáveis de ambiente">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
Copie o{" "}
|
||||
<code className="bg-muted px-1 rounded">.env.example</code> para{" "}
|
||||
<code className="bg-muted px-1 rounded">.env</code> e configure o
|
||||
banco de dados
|
||||
</p>
|
||||
</StepCard>
|
||||
|
||||
<StepCard step={3} title="Suba tudo com Docker Compose">
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
|
||||
docker compose up -d
|
||||
</code>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Isso vai subir o banco PostgreSQL e a aplicação automaticamente
|
||||
</p>
|
||||
</StepCard>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
<div className="space-y-4 md:space-y-6">
|
||||
<StepCard step={1} title="Clone o repositório">
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded overflow-x-auto">
|
||||
git clone https://github.com/felipegcoutinho/openmonetis.git
|
||||
</code>
|
||||
</StepCard>
|
||||
|
||||
<StepCard step={2} title="Configure as variáveis de ambiente">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
Copie o{" "}
|
||||
<code className="bg-muted px-1 rounded">.env.example</code> para{" "}
|
||||
<code className="bg-muted px-1 rounded">.env</code> e configure o
|
||||
banco de dados
|
||||
</p>
|
||||
</StepCard>
|
||||
|
||||
<StepCard step={3} title="Suba o banco via Docker">
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
|
||||
docker compose up db -d
|
||||
</code>
|
||||
</StepCard>
|
||||
|
||||
<StepCard step={4} title="Instale e rode a aplicação">
|
||||
<div className="space-y-2">
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
|
||||
pnpm install
|
||||
</code>
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
|
||||
pnpm db:push
|
||||
</code>
|
||||
<code className="block text-xs sm:text-sm bg-muted px-2 py-1 rounded">
|
||||
pnpm dev
|
||||
</code>
|
||||
</div>
|
||||
</StepCard>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
function StepCard({
|
||||
step,
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
step: number;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardContent>
|
||||
<div className="flex gap-3 md:gap-4">
|
||||
<div className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-sm md:text-base">
|
||||
{step}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold mb-1.5 md:mb-2">{title}</h3>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user