Initial commit for working landing page

This commit is contained in:
Bart van der Braak 2023-06-06 03:17:35 +02:00
parent f3fecc77c5
commit 439b6eabe8
36 changed files with 9186 additions and 0 deletions

View file

@ -0,0 +1,30 @@
import { Particles } from "@/components/landing/particles";
import { ClerkProvider, SignIn, SignedIn, SignedOut } from "@clerk/nextjs/app-beta";
export default function AppLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<SignedIn>{children}</SignedIn>
<SignedOut>
<div className="flex items-center justify-center w-screen h-screen">
<Particles className="absolute inset-0 -z-10 " />
<SignIn
appearance={{
variables: {
colorPrimary: "#161616",
colorText: "#161616",
},
}}
afterSignInUrl={"/"}
afterSignUpUrl={"/"}
/>
</div>
</SignedOut>
</ClerkProvider>
);
}

61
app/(landing)/layout.tsx Normal file
View file

@ -0,0 +1,61 @@
"use client";
import { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
import { Header } from "@/components/landing/ui/header";
import Link from "next/link";
export default function DefaultLayout({
children,
}: {
children: React.ReactNode;
}) {
useEffect(() => {
AOS.init({
once: true,
disable: "phone",
duration: 1000,
easing: "ease-out-cubic",
});
});
return (
<>
<Header />
<main className="grow">{children}</main>
<footer className="pt-24 " aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="px-6 pb-8 mx-auto max-w-7xl lg:px-8">
<div className="pt-8 mt-16 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div className="flex space-x-6 md:order-2">
<Link
target="_blank"
href="https://github.com/bartvdbraak/omnidash"
className="text-gray-500 hover:text-gray-400"
>
<span className="sr-only">Github</span>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
</Link>
</div>
<p className="mt-8 text-xs text-gray-400 leading-5 md:order-1 md:mt-0">
&copy; {new Date().getUTCFullYear()} All rights reserved.
</p>
</div>
</div>
</footer>
</>
);
}

13
app/(landing)/page.tsx Normal file
View file

@ -0,0 +1,13 @@
import { Hero } from "@/components/landing/hero";
import { Features } from "@/components/landing/features";
import { Cta } from "@/components/landing/cta";
export default function Page() {
return (
<div className="overflow-x-hidden max-w-screen">
<Hero />
<Features />
<Cta />
</div>
);
}

80
app/layout.tsx Normal file
View file

@ -0,0 +1,80 @@
import { Inter } from 'next/font/google';
import LocalFont from "next/font/local";
import { TailwindIndicator } from "@/components/tailwind-indicator";
import { ThemeProvider } from "@/components/theme-provider";
import "tailwindcss/tailwind.css";
import { ToastProvider } from "../toast-provider";
import { Metadata } from "next";
export const metadata: Metadata = {
title: {
default: "Omnidash",
template: "%s | Omnidash",
},
description: "Open Source Multi-client Ticket Dashboard",
openGraph: {
title: "Omnidash",
description: "Open Source Multi-client Ticket Dashboard",
url: "https://omnidash.io",
siteName: "omnidash.io",
locale: "en-US",
type: "website",
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
twitter: {
title: "Omnidash",
card: "summary_large_image",
},
icons: {
shortcut: "/favicon.png",
},
};
interface RootLayoutProps {
children: React.ReactNode;
}
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const calSans = LocalFont({
src: "../public/fonts/CalSans-SemiBold.ttf",
variable: "--font-calsans",
});
interface RootLayoutProps {
children: React.ReactNode;
}
export default async function RootLayout({ children }: RootLayoutProps) {
return (
<>
<html
lang="en"
suppressHydrationWarning
className={[inter.variable, calSans.variable].join(" ")}
>
<head />
<body className="min-h-screen antialiased">
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<ToastProvider>{children}</ToastProvider>
<TailwindIndicator />
</ThemeProvider>
</body>
</html>
</>
);
}