+
+ )
+}
+
+export default Page
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..770868f
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,132 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+ font-family: "space-grotesk";
+ src: url("/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
+}
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 224 71.4% 4.1%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 224 71.4% 4.1%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 224 71.4% 4.1%;
+
+ --primary: 225, 86%, 92%;
+ --primary-foreground: 210, 86%, 92%;
+
+ --secondary: 207, 19%, 91%;
+ --secondary-foreground: 200, 19%, 91%;
+
+ --tertiary: 340, 41%, 83%;
+ --tertiary-foreground: 330, 41%, 83%;
+
+ --quantenary: 0, 0%, 98%;
+
+ --quinary: 0, 0%, 8%;
+
+ --muted: 220 14.3% 95.9%;
+ --muted-foreground: 220 8.9% 46.1%;
+
+ --accent: 220 14.3% 95.9%;
+ --accent-foreground: 220.9 39.3% 11%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 20% 98%;
+
+ --border: 220 13% 91%;
+ --input: 220 13% 91%;
+ --ring: 224 71.4% 4.1%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 200, 6%, 9%;
+ --foreground: 195, 7%, 11%;
+
+ --card: 224 71.4% 4.1%;
+ --card-foreground: 210 20% 98%;
+
+ --popover: 224 71.4% 4.1%;
+ --popover-foreground: 210 20% 98%;
+
+ --primary: 225, 86%, 92%;
+ --primary-foreground: 210, 86%, 92%;
+
+ --secondary: 207, 19%, 91%;
+ --secondary-foreground: 200, 19%, 91%;
+
+ --tertiary: 340, 41%, 83%;
+ --tertiary-foreground: 330, 41%, 83%;
+
+ --quantenary: 0, 0%, 98%;
+
+ --quinary: 0, 0%, 8%;
+
+ --muted: 215 27.9% 16.9%;
+ --muted-foreground: 217.9 10.6% 64.9%;
+
+ --accent: 215 27.9% 16.9%;
+ --accent-foreground: 210 20% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 20% 98%;
+
+ --border: 215 27.9% 16.9%;
+ --input: 215 27.9% 16.9%;
+ --ring: 216 12.2% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@keyframes infiniteScroll {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+}
+.container {
+ width: 100%;
+ overflow-x: hidden;
+}
+.horizontal-scrolling-items {
+ display: flex;
+ font-size: 40px;
+ width: 100%;
+ animation-name: infiniteScroll;
+ animation-duration: 16s;
+ animation-iteration-count: infinite;
+}
+
+/* This will apply to all scrollable elements */
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ background: transparent !important;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: hsl(var(--primary));
+ border-radius: 8px;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..b571b49
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..952ca7c
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,13 @@
+import { Body } from "@/components/Body";
+import Footer from "@/components/Footer";
+import { Header } from "@/components/Header";
+
+export default function Home() {
+ return (
+
+
+
+
+
+
+
+ {timeseriesPageviews ? (
+ ({
+ name: day.date,
+ Visitors: day.events.reduce((acc, curr) => {
+ return acc + Object.values(curr)[0]!
+ }, 0),
+ }))}
+ categories={['Visitors']}
+ index='name'
+ />
+ ) : null}
+
+
+ )
+}
+
+export default AnalyticsDashboard
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
new file mode 100644
index 0000000..4502c96
--- /dev/null
+++ b/src/components/Body.tsx
@@ -0,0 +1,137 @@
+import { Paintbrush2Icon } from "lucide-react";
+import ImageSlider from "./ImageSlider";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Button } from "./ui/button";
+import CardComponent from "./ui/card";
+
+export const Body = () => {
+ return (
+
+
+
+
+
+
+
+ + Avg. visitors/day +
++ {avgVisitorsPerDay} +
+
+ Visitors today
+
+ {amtVisitorsToday} +
++ This weeks top visitors: +
+
+ {topCountries?.map(([countryCode, number]) => {
+ return (
+
+
+
+ )
+ })}
+ + {countryCode} +
++ {number} +
+
+
+ );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..b114952
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+
+const Footer: React.FC = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..b6a73ad
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,42 @@
+import { FaBell, FaEthereum, FaSearch } from "react-icons/fa";
+import { Button } from "./ui/button";
+import Image from "next/image";
+import { NavigationMenuPage } from "./Navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { UserNav } from "./UserNav";
+
+/**
+ * Header component that renders a header with logo, navigation,
+ * and action buttons like connect wallet.
+ */
+export const Header = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ Hello, [username]
++ A great day to get a new NFT +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 124k
+Artworks
+ +
+
+
+
+
+
+
+
+
+ 24k
+Sales
+ +
+
+
+
+
+
+
+
+
+ 94k
+Colections
+ +
+
+
+
+
+
+
+
+
+ 164
+Projects
+ +
+
+ Highlights
+ +
+
+ Discover
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ImageSlider;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..06d7a8a
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+
+const components: { title: string; href: string; description: string }[] = [
+ {
+ title: "Alert Dialog",
+ href: "/docs/primitives/alert-dialog",
+ description:
+ "A modal dialog that interrupts the user with important content and expects a response.",
+ },
+ {
+ title: "Hover Card",
+ href: "/docs/primitives/hover-card",
+ description:
+ "For sighted users to preview content available behind a link.",
+ },
+ {
+ title: "Progress",
+ href: "/docs/primitives/progress",
+ description:
+ "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+ },
+ {
+ title: "Scroll-area",
+ href: "/docs/primitives/scroll-area",
+ description: "Visually or semantically separates content.",
+ },
+ {
+ title: "Tabs",
+ href: "/docs/primitives/tabs",
+ description:
+ "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+ },
+ {
+ title: "Tooltip",
+ href: "/docs/primitives/tooltip",
+ description:
+ "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+ },
+];
+
+export function NavigationMenuPage() {
+ return (
+
+
+
+
+
+
+ -
+ {images.map((image, index) => (
+
-
+
+ ++ +
+ ++{image.title}
+{image.subtitle}
++ {image.tags.map((tag, index) => ( + + ))} ++
+ ))}
+
-
+ {images.map((image, index) => (
+
-
+
+ ++ +
+ ++{image.title}
+{image.subtitle}
++ {image.tags.map((tag, index) => ( + + ))} ++
+ ))}
+ {/* -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+ */}
+
-
+
-
+
+ + ++ shadcn/ui +++ Beautifully designed components built with Radix UI and + Tailwind CSS. +
+ +
+
-
+ {components.map((component) => (
+
{title}
+ + {children} +
+ +
+
+ seistart
++ m@seistart.com +
+
+ {Array(4)
+ .fill(0)
+ .map((_, i) => (
+
+ );
+};
+
+export default CardComponent;
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..242b07a
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef
+
+ ))}
+
+
+
+ {smallImgSrcs.map((src, index) => (
+
+
+
+
+
+ {title}
+
+ {count}
+
+ {subtitle}
+
+
+
+
+
+ Raised
+ 200 sei +
+
+));
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef