59 |
66 | 60 | {page.title} 61 |
62 | {page.description && ( 63 |{page.description}
64 | )} 65 |67 |
{children}
;
18 | }
19 |
--------------------------------------------------------------------------------
/hooks/use-scroll.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 |
3 | export function useScroll(threshold: number) {
4 | const [scrolled, setScrolled] = useState(false);
5 |
6 | const onScroll = useCallback(() => {
7 | setScrolled(window.pageYOffset > threshold);
8 | }, [threshold]);
9 |
10 | useEffect(() => {
11 | window.addEventListener("scroll", onScroll);
12 | return () => window.removeEventListener("scroll", onScroll);
13 | }, [onScroll]);
14 |
15 | return scrolled;
16 | }
17 |
--------------------------------------------------------------------------------
/components/shared/max-width-wrapper.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export default function MaxWidthWrapper({
6 | className,
7 | children,
8 | large = false,
9 | }: {
10 | className?: string;
11 | large?: boolean;
12 | children: ReactNode;
13 | }) {
14 | return (
15 |
22 | {children}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/app/(marketing)/error.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Button } from '@/components/ui/button';
4 |
5 | export default function Error({
6 | reset,
7 | }: {
8 | reset: () => void;
9 | }) {
10 |
11 | return (
12 |
13 |
22 | );
23 | }
--------------------------------------------------------------------------------
/assets/fonts/index.ts:
--------------------------------------------------------------------------------
1 | import localFont from "next/font/local";
2 | import { Inter as FontSans, Urbanist } from "next/font/google";
3 |
4 | export const fontSans = FontSans({
5 | subsets: ["latin"],
6 | variable: "--font-sans",
7 | })
8 |
9 | export const fontUrban = Urbanist({
10 | subsets: ["latin"],
11 | variable: "--font-urban",
12 | })
13 |
14 | export const fontHeading = localFont({
15 | src: "./CalSans-SemiBold.woff2",
16 | variable: "--font-heading",
17 | })
18 |
19 | export const fontGeist = localFont({
20 | src: "./GeistVF.woff2",
21 | variable: "--font-geist",
22 | })
23 |
--------------------------------------------------------------------------------
/app/(protected)/dashboard/settings/loading.tsx:
--------------------------------------------------------------------------------
1 | import { DashboardHeader } from "@/components/dashboard/header";
2 | import { SkeletonSection } from "@/components/shared/section-skeleton";
3 |
4 | export default function DashboardSettingsLoading() {
5 | return (
6 | <>
7 | Something went wrong!
14 | 21 |
12 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/dashboard/header.tsx:
--------------------------------------------------------------------------------
1 | interface DashboardHeaderProps {
2 | heading: string;
3 | text?: string;
4 | children?: React.ReactNode;
5 | }
6 |
7 | export function DashboardHeader({
8 | heading,
9 | text,
10 | children,
11 | }: DashboardHeaderProps) {
12 | return (
13 |
14 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/app/(marketing)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { NavBar } from "@/components/layout/navbar";
2 | import { SiteFooter } from "@/components/layout/site-footer";
3 | import { NavMobile } from "@/components/layout/mobile-nav";
4 |
5 | interface MarketingLayoutProps {
6 | children: React.ReactNode;
7 | }
8 |
9 | export default function MarketingLayout({ children }: MarketingLayoutProps) {
10 | return (
11 |
15 |
18 | {children}
19 | {heading}
16 | {text &&{text}
} 17 |
12 | {children}
15 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/shared/card-skeleton.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardContent,
4 | CardFooter,
5 | CardHeader,
6 | } from "@/components/ui/card";
7 | import { Skeleton } from "@/components/ui/skeleton";
8 |
9 | export function CardSkeleton() {
10 | return (
11 |
13 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/lib/user.ts:
--------------------------------------------------------------------------------
1 | import { prisma } from "@/lib/db";
2 |
3 | export const getUserByEmail = async (email: string) => {
4 | try {
5 | const user = await prisma.user.findUnique({
6 | where: {
7 | email: email,
8 | },
9 | select: {
10 | name: true,
11 | emailVerified: true,
12 | },
13 | });
14 |
15 | return user;
16 | } catch {
17 | return null;
18 | }
19 | };
20 |
21 | export const getUserById = async (id: string) => {
22 | try {
23 | const user = await prisma.user.findUnique({ where: { id } });
24 |
25 | return user;
26 | } catch {
27 | return null;
28 | }
29 | };
--------------------------------------------------------------------------------
/components/content/blog-posts.tsx:
--------------------------------------------------------------------------------
1 | import { Post } from "@/.contentlayer/generated";
2 |
3 | import { BlogCard } from "./blog-card";
4 |
5 | export function BlogPosts({
6 | posts,
7 | }: {
8 | posts: (Post & {
9 | blurDataURL: string;
10 | })[];
11 | }) {
12 | return (
13 |
17 | {posts.slice(1).map((post, idx) => (
18 |
21 |
6 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/app/api/user/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from "@/auth";
2 |
3 | import { prisma } from "@/lib/db";
4 |
5 | export const DELETE = auth(async (req) => {
6 | if (!req.auth) {
7 | return new Response("Not authenticated", { status: 401 });
8 | }
9 |
10 | const currentUser = req.auth.user;
11 | if (!currentUser) {
12 | return new Response("Invalid user", { status: 401 });
13 | }
14 |
15 | try {
16 | await prisma.user.delete({
17 | where: {
18 | id: currentUser.id,
19 | },
20 | });
21 | } catch (error) {
22 | return new Response("Internal server error", { status: 500 });
23 | }
24 |
25 | return new Response("User deleted successfully!", { status: 200 });
26 | });
27 |
--------------------------------------------------------------------------------
/app/(docs)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { NavMobile } from "@/components/layout/mobile-nav";
2 | import { NavBar } from "@/components/layout/navbar";
3 | import { SiteFooter } from "@/components/layout/site-footer";
4 | import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
5 |
6 | interface DocsLayoutProps {
7 | children: React.ReactNode;
8 | }
9 |
10 | export default function DocsLayout({ children }: DocsLayoutProps) {
11 | return (
12 | xs
7 | sm
8 | md
9 | lg
10 | xl
11 | 2xl
12 |
13 |
16 | {children}
17 |
18 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/config/blog.ts:
--------------------------------------------------------------------------------
1 | export const BLOG_CATEGORIES: {
2 | title: string;
3 | slug: "news" | "education";
4 | description: string;
5 | }[] = [
6 | {
7 | title: "News",
8 | slug: "news",
9 | description: "Updates and announcements from Next SaaS Starter.",
10 | },
11 | {
12 | title: "Education",
13 | slug: "education",
14 | description: "Educational content about SaaS management.",
15 | },
16 | ];
17 |
18 | export const BLOG_AUTHORS = {
19 | mickasmt: {
20 | name: "mickasmt",
21 | image: "/_static/avatars/mickasmt.png",
22 | twitter: "miickasmt",
23 | },
24 | shadcn: {
25 | name: "shadcn",
26 | image: "/_static/avatars/shadcn.jpeg",
27 | twitter: "shadcn",
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/components/dashboard/info-card.tsx:
--------------------------------------------------------------------------------
1 | import { Users } from "lucide-react"
2 |
3 | import {
4 | Card,
5 | CardContent,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/components/ui/card"
9 |
10 | export default function InfoCard() {
11 | return (
12 | +2350
19 | +180.1% from last month
20 |
16 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/hooks/use-local-storage.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useLocalStorage =
17 |
22 | {title}
18 |19 | {description} 20 |
21 |{children}
23 |
11 |
16 | {children}
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const { withContentlayer } = require("next-contentlayer2");
2 |
3 | import("./env.mjs");
4 |
5 | /** @type {import('next').NextConfig} */
6 | const nextConfig = {
7 | reactStrictMode: true,
8 | swcMinify: true,
9 | images: {
10 | remotePatterns: [
11 | {
12 | protocol: "https",
13 | hostname: "avatars.githubusercontent.com",
14 | },
15 | {
16 | protocol: "https",
17 | hostname: "lh3.googleusercontent.com",
18 | },
19 | {
20 | protocol: "https",
21 | hostname: "randomuser.me",
22 | },
23 | ],
24 | },
25 | experimental: {
26 | serverComponentsExternalPackages: ["@prisma/client"],
27 | },
28 | };
29 |
30 | module.exports = withContentlayer(nextConfig);
31 |
--------------------------------------------------------------------------------
/components/shared/header-section.tsx:
--------------------------------------------------------------------------------
1 | interface HeaderSectionProps {
2 | label?: string;
3 | title: string;
4 | subtitle?: string;
5 | }
6 |
7 | export function HeaderSection({ label, title, subtitle }: HeaderSectionProps) {
8 | return (
9 |
10 | {label ? (
11 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/app/(marketing)/blog/page.tsx:
--------------------------------------------------------------------------------
1 | import { allPosts } from "contentlayer/generated";
2 |
3 | import { constructMetadata, getBlurDataURL } from "@/lib/utils";
4 | import { BlogPosts } from "@/components/content/blog-posts";
5 |
6 | export const metadata = constructMetadata({
7 | title: "Blog – SaaS Starter",
8 | description: "Latest news and updates from Next SaaS Starter.",
9 | });
10 |
11 | export default async function BlogPage() {
12 | const posts = await Promise.all(
13 | allPosts
14 | .filter((post) => post.published)
15 | .sort((a, b) => b.date.localeCompare(a.date))
16 | .map(async (post) => ({
17 | ...post,
18 | blurDataURL: await getBlurDataURL(post.image),
19 | })),
20 | );
21 |
22 | return
12 | {label}
13 |
14 | ) : null}
15 | 16 | {title} 17 |
18 | {subtitle ? ( 19 |20 | {subtitle} 21 |
22 | ) : null} 23 |
7 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/components/sections/preview-landing.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
4 |
5 | export default function PreviewLanding() {
6 | return (
7 | 404
8 |16 | Page not found. Back to{" "} 17 | 21 | Homepage 22 | 23 | . 24 |
25 |
8 |
9 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef
10 |
21 |
11 |
20 |
6 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef
7 |
10 |
11 | {card ? (
12 |
23 |
16 |
19 |
12 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
13 |
18 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
9 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('prettier').Config} */
2 | module.exports = {
3 | bracketSpacing: true,
4 | endOfLine: "lf",
5 | semi: true,
6 | singleQuote: false,
7 | tabWidth: 2,
8 | trailingComma: "all",
9 | printWidth: 80,
10 | importOrder: [
11 | "^(react/(.*)$)|^(react$)",
12 | "^(next/(.*)$)|^(next$)",
13 | "
10 |
15 |
26 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/components/docs/page-header.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | import { Icons } from "../shared/icons";
4 |
5 | interface DocsPageHeaderProps extends React.HTMLAttributes
27 |
31 | {href && (
32 |
33 | View
34 |
35 | )}
36 |
28 | {children}
29 |
30 |
19 |
25 |
26 | Docs
20 |
22 | {heading}
23 |
24 |
27 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/actions/open-customer-portal.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { redirect } from "next/navigation";
4 | import { auth } from "@/auth";
5 |
6 | import { stripe } from "@/lib/stripe";
7 | import { absoluteUrl } from "@/lib/utils";
8 |
9 | export type responseAction = {
10 | status: "success" | "error";
11 | stripeUrl?: string;
12 | };
13 |
14 | const billingUrl = absoluteUrl("/dashboard/billing");
15 |
16 | export async function openCustomerPortal(
17 | userStripeId: string,
18 | ): Promise28 | {heading} 29 |
30 | {text && ( 31 |{text}
32 | )} 33 |
27 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/app/(protected)/admin/page.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "next/navigation";
2 |
3 | import { getCurrentUser } from "@/lib/session";
4 | import { constructMetadata } from "@/lib/utils";
5 | import { DashboardHeader } from "@/components/dashboard/header";
6 | import InfoCard from "@/components/dashboard/info-card";
7 | import TransactionsList from "@/components/dashboard/transactions-list";
8 |
9 | export const metadata = constructMetadata({
10 | title: "Admin – SaaS Starter",
11 | description: "Admin page for only admin management.",
12 | });
13 |
14 | export default async function AdminPage() {
15 | const user = await getCurrentUser();
16 | if (!user || user.role !== "ADMIN") redirect("/login");
17 |
18 | return (
19 | <>
20 |
25 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/components/docs/search.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 |
5 | import { cn } from "@/lib/utils"
6 | import { Input } from "@/components/ui/input"
7 | import { toast } from "@/components/ui/use-toast"
8 |
9 | interface DocsSearchProps extends React.HTMLAttributes
26 |
31 |
8 |
9 |
10 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/hooks/use-media-query.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useMediaQuery() {
4 | const [device, setDevice] = useState<"mobile" | "sm" | "tablet" | "desktop" | null>(
5 | null,
6 | );
7 | const [dimensions, setDimensions] = useState<{
8 | width: number;
9 | height: number;
10 | } | null>(null);
11 |
12 | useEffect(() => {
13 | const checkDevice = () => {
14 | if (window.matchMedia("(max-width: 640px)").matches) {
15 | setDevice("mobile");
16 | } else if (window.matchMedia("(max-width: 768px)").matches) {
17 | setDevice("sm");
18 | } else if (
19 | window.matchMedia("(min-width: 641px) and (max-width: 1024px)").matches
20 | ) {
21 | setDevice("tablet");
22 | } else {
23 | setDevice("desktop");
24 | }
25 | setDimensions({ width: window.innerWidth, height: window.innerHeight });
26 | };
27 |
28 | // Initial detection
29 | checkDevice();
30 |
31 | // Listener for windows resize
32 | window.addEventListener("resize", checkDevice);
33 |
34 | // Cleanup listener
35 | return () => {
36 | window.removeEventListener("resize", checkDevice);
37 | };
38 | }, []);
39 |
40 | return {
41 | device,
42 | width: dimensions?.width,
43 | height: dimensions?.height,
44 | isMobile: device === "mobile",
45 | isSm: device === "sm",
46 | isTablet: device === "tablet",
47 | isDesktop: device === "desktop",
48 | };
49 | }
50 |
--------------------------------------------------------------------------------
/styles/mdx.css:
--------------------------------------------------------------------------------
1 | code[data-theme*=" "],
2 | code[data-theme*=" "] span {
3 | color: var(--shiki-light);
4 | background-color: var(--shiki-light-bg);
5 | }
6 |
7 | @media (prefers-color-scheme: dark) {
8 |
9 | code[data-theme*=" "],
10 | code[data-theme*=" "] span {
11 | color: var(--shiki-dark);
12 | background-color: var(--shiki-dark-bg);
13 | }
14 | }
15 |
16 | [data-rehype-pretty-code-figure] {
17 | @apply relative mt-6 mb-4;
18 | }
19 |
20 | [data-rehype-pretty-code-figure] code {
21 | @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
22 | counter-reset: line;
23 | box-decoration-break: clone;
24 | }
25 |
26 | [data-line] {
27 | @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
28 | }
29 |
30 | [data-line-numbers]>[data-line]::before {
31 | @apply text-muted-foreground text-xs;
32 | counter-increment: line;
33 | content: counter(line);
34 | display: inline-block;
35 | width: 1rem;
36 | margin-right: 1.5rem;
37 | text-align: right;
38 | }
39 |
40 | [data-highlighted-line] {
41 | @apply bg-zinc-600/50;
42 | }
43 |
44 | [data-highlighted-chars] span {
45 | @apply relative;
46 | }
47 |
48 | [data-highlighted-chars] {
49 | @apply rounded-sm bg-zinc-600/50 text-foreground p-1;
50 | }
51 |
52 | [data-rehype-pretty-code-title] {
53 | @apply mt-3 py-2 px-4 text-sm font-medium;
54 | }
55 |
56 | .mdx>.steps:first-child>h3:first-child {
57 | @apply mt-0;
58 | }
59 |
60 | .steps>h3 {
61 | @apply mt-8 mb-4 text-base font-semibold;
62 | }
--------------------------------------------------------------------------------
/content/docs/configuration/email.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Email
3 | description: How to manage emails in this project.
4 | ---
5 |
6 |
11 |
14 |
15 |
16 |
20 |
21 |
22 |
25 | 29 |
8 | You can use it in your local environment and in your own production setup. 9 |
45 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/config/docs.ts:
--------------------------------------------------------------------------------
1 | import { DocsConfig } from "types";
2 |
3 | export const docsConfig: DocsConfig = {
4 | mainNav: [
5 | {
6 | title: "Documentation",
7 | href: "/docs",
8 | },
9 | {
10 | title: "Guides",
11 | href: "/guides",
12 | },
13 | ],
14 | sidebarNav: [
15 | {
16 | title: "Getting Started",
17 | items: [
18 | {
19 | title: "Introduction",
20 | href: "/docs",
21 | },
22 | {
23 | title: "Installation",
24 | href: "/docs/installation",
25 | },
26 | ],
27 | },
28 | {
29 | title: "Configuration",
30 | items: [
31 | {
32 | title: "Authentification",
33 | href: "/docs/configuration/authentification",
34 | },
35 | {
36 | title: "Blog",
37 | href: "/docs/configuration/blog",
38 | },
39 | {
40 | title: "Components",
41 | href: "/docs/configuration/components",
42 | },
43 | {
44 | title: "Config files",
45 | href: "/docs/configuration/config-files",
46 | },
47 | {
48 | title: "Database",
49 | href: "/docs/configuration/database",
50 | },
51 | {
52 | title: "Email",
53 | href: "/docs/configuration/email",
54 | },
55 | {
56 | title: "Layouts",
57 | href: "/docs/configuration/layouts",
58 | },
59 | {
60 | title: "Markdown files",
61 | href: "/docs/configuration/markdown-files",
62 | },
63 | {
64 | title: "Subscriptions",
65 | href: "/docs/configuration/subscriptions",
66 | },
67 | ],
68 | },
69 | ],
70 | };
71 |
--------------------------------------------------------------------------------
/auth.ts:
--------------------------------------------------------------------------------
1 | import authConfig from "@/auth.config";
2 | import { PrismaAdapter } from "@auth/prisma-adapter";
3 | import { UserRole } from "@prisma/client";
4 | import NextAuth, { type DefaultSession } from "next-auth";
5 |
6 | import { prisma } from "@/lib/db";
7 | import { getUserById } from "@/lib/user";
8 |
9 | // More info: https://authjs.dev/getting-started/typescript#module-augmentation
10 | declare module "next-auth" {
11 | interface Session {
12 | user: {
13 | role: UserRole;
14 | } & DefaultSession["user"];
15 | }
16 | }
17 |
18 | export const {
19 | handlers: { GET, POST },
20 | auth,
21 | } = NextAuth({
22 | adapter: PrismaAdapter(prisma),
23 | session: { strategy: "jwt" },
24 | pages: {
25 | signIn: "/login",
26 | // error: "/auth/error",
27 | },
28 | callbacks: {
29 | async session({ token, session }) {
30 | if (session.user) {
31 | if (token.sub) {
32 | session.user.id = token.sub;
33 | }
34 |
35 | if (token.email) {
36 | session.user.email = token.email;
37 | }
38 |
39 | if (token.role) {
40 | session.user.role = token.role;
41 | }
42 |
43 | session.user.name = token.name;
44 | session.user.image = token.picture;
45 | }
46 |
47 | return session;
48 | },
49 |
50 | async jwt({ token }) {
51 | if (!token.sub) return token;
52 |
53 | const dbUser = await getUserById(token.sub);
54 |
55 | if (!dbUser) return token;
56 |
57 | token.name = dbUser.name;
58 | token.email = dbUser.email;
59 | token.picture = dbUser.image;
60 | token.role = dbUser.role;
61 |
62 | return token;
63 | },
64 | },
65 | ...authConfig,
66 | // debug: process.env.NODE_ENV !== "production"
67 | });
68 |
--------------------------------------------------------------------------------
/lib/email.ts:
--------------------------------------------------------------------------------
1 | import { MagicLinkEmail } from "@/emails/magic-link-email";
2 | import { EmailConfig } from "next-auth/providers/email";
3 | import { Resend } from "resend";
4 |
5 | import { env } from "@/env.mjs";
6 | import { siteConfig } from "@/config/site";
7 |
8 | import { getUserByEmail } from "./user";
9 |
10 | export const resend = new Resend(env.RESEND_API_KEY);
11 |
12 | export const sendVerificationRequest: EmailConfig["sendVerificationRequest"] =
13 | async ({ identifier, url, provider }) => {
14 | const user = await getUserByEmail(identifier);
15 | if (!user || !user.name) return;
16 |
17 | const userVerified = user?.emailVerified ? true : false;
18 | const authSubject = userVerified
19 | ? `Sign-in link for ${siteConfig.name}`
20 | : "Activate your account";
21 |
22 | try {
23 | const { data, error } = await resend.emails.send({
24 | from: provider.from,
25 | to:
26 | process.env.NODE_ENV === "development"
27 | ? "delivered@resend.dev"
28 | : identifier,
29 | subject: authSubject,
30 | react: MagicLinkEmail({
31 | firstName: user?.name as string,
32 | actionUrl: url,
33 | mailType: userVerified ? "login" : "register",
34 | siteName: siteConfig.name,
35 | }),
36 | // Set this to prevent Gmail from threading emails.
37 | // More info: https://resend.com/changelog/custom-email-headers
38 | headers: {
39 | "X-Entity-Ref-ID": new Date().getTime() + "",
40 | },
41 | });
42 |
43 | if (error || !data) {
44 | throw new Error(error?.message);
45 | }
46 |
47 | // console.log(data)
48 | } catch (error) {
49 | throw new Error("Failed to send verification email.");
50 | }
51 | };
52 |
--------------------------------------------------------------------------------
/app/(protected)/dashboard/charts/page.tsx:
--------------------------------------------------------------------------------
1 | import { constructMetadata } from "@/lib/utils";
2 | import { Skeleton } from "@/components/ui/skeleton";
3 | import { AreaChartStacked } from "@/components/charts/area-chart-stacked";
4 | import { BarChartMixed } from "@/components/charts/bar-chart-mixed";
5 | import { InteractiveBarChart } from "@/components/charts/interactive-bar-chart";
6 | import { LineChartMultiple } from "@/components/charts/line-chart-multiple";
7 | import { RadarChartSimple } from "@/components/charts/radar-chart-simple";
8 | import { RadialChartGrid } from "@/components/charts/radial-chart-grid";
9 | import { RadialShapeChart } from "@/components/charts/radial-shape-chart";
10 | import { RadialStackedChart } from "@/components/charts/radial-stacked-chart";
11 | import { RadialTextChart } from "@/components/charts/radial-text-chart";
12 | import { DashboardHeader } from "@/components/dashboard/header";
13 |
14 | export const metadata = constructMetadata({
15 | title: "Charts – SaaS Starter",
16 | description: "List of charts by shadcn-ui",
17 | });
18 |
19 | export default function ChartsPage() {
20 | return (
21 | <>
22 | 46 | {authors[username].name} 47 |
48 |49 | @{authors[username].twitter} 50 |
51 |
24 |
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const ScrollArea = React.forwardRef<
9 | React.ElementRef
25 |
30 |
31 |
34 |
39 |
60 | {articles.map((article, idx) => (
61 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { VariantProps, cva } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | }
20 | )
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
18 |
25 | <>
26 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/app/(marketing)/[slug]/page.tsx:
--------------------------------------------------------------------------------
1 | import { notFound } from "next/navigation";
2 | import { allPages } from "contentlayer/generated";
3 |
4 | import { Mdx } from "@/components/content/mdx-components";
5 |
6 | import "@/styles/mdx.css";
7 |
8 | import { Metadata } from "next";
9 |
10 | import { constructMetadata, getBlurDataURL } from "@/lib/utils";
11 |
12 | export async function generateStaticParams() {
13 | return allPages.map((page) => ({
14 | slug: page.slugAsParams,
15 | }));
16 | }
17 |
18 | export async function generateMetadata({
19 | params,
20 | }: {
21 | params: { slug: string };
22 | }): Promise
31 |
41 |
43 |
52 |
32 |
40 | 34 | Welcome back 35 |
36 |37 | Enter your email to sign in to your account 38 |
39 |44 | 48 | Don't have an account? Sign Up 49 | 50 |
51 |67 |
22 | {pager?.prev && (
23 |
27 |
41 | )
42 | }
43 |
44 | export function getPagerForDoc(doc: Doc) {
45 | const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
46 | const activeIndex = flattenedLinks.findIndex(
47 | (link) => doc.slug === link?.href
48 | )
49 | const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
50 | const next =
51 | activeIndex !== flattenedLinks.length - 1
52 | ? flattenedLinks[activeIndex + 1]
53 | : null
54 | return {
55 | prev,
56 | next,
57 | }
58 | }
59 |
60 | export function flatten(links: { items?}[]) {
61 | return links.reduce((flat, link) => {
62 | return flat.concat(link.items ? flatten(link.items) : link)
63 | }, [])
64 | }
65 |
--------------------------------------------------------------------------------
/lib/subscription.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | // TODO: Fix this when we turn strict mode on.
3 | import { pricingData } from "@/config/subscriptions";
4 | import { prisma } from "@/lib/db";
5 | import { stripe } from "@/lib/stripe";
6 | import { UserSubscriptionPlan } from "types";
7 |
8 | export async function getUserSubscriptionPlan(
9 | userId: string
10 | ): Promise
22 |
41 | );
42 | }
43 |
44 | let subscriptionPlan;
45 | if (user && user.id) {
46 | subscriptionPlan = await getUserSubscriptionPlan(user.id);
47 | }
48 |
49 | return (
50 | Seriously?
23 |31 | You are an {user.role}. Back to{" "} 32 | 36 | Dashboard 37 | 38 | . 39 |
40 |
51 |
53 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/components/pricing/billing-info.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import * as React from "react";
3 |
4 | import { CustomerPortalButton } from "@/components/forms/customer-portal-button";
5 | import { buttonVariants } from "@/components/ui/button";
6 | import {
7 | Card,
8 | CardContent,
9 | CardDescription,
10 | CardFooter,
11 | CardHeader,
12 | CardTitle,
13 | } from "@/components/ui/card";
14 | import { cn, formatDate } from "@/lib/utils";
15 | import { UserSubscriptionPlan } from "types";
16 |
17 | interface BillingInfoProps extends React.HTMLAttributes53 |
43 | {isCanceled 44 | ? "Your plan will be canceled on " 45 | : "Your plan renews on "} 46 | {formatDate(stripeCurrentPeriodEnd)}. 47 |
48 | ) : null} 49 | 50 | {isPaid && stripeCustomerId ? ( 51 |
33 |
34 | This is a demo app.
36 |
37 | SaaS Starter app is a demo app using a Stripe test environment. You
38 | can find a list of test card numbers on the{" "}
39 |
45 | Stripe docs
46 |
47 | .
48 |
49 |
50 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/app/(protected)/layout.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "next/navigation";
2 |
3 | import { sidebarLinks } from "@/config/dashboard";
4 | import { getCurrentUser } from "@/lib/session";
5 | import { SearchCommand } from "@/components/dashboard/search-command";
6 | import {
7 | DashboardSidebar,
8 | MobileSheetSidebar,
9 | } from "@/components/layout/dashboard-sidebar";
10 | import { ModeToggle } from "@/components/layout/mode-toggle";
11 | import { UserAccountNav } from "@/components/layout/user-account-nav";
12 | import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
13 |
14 | interface ProtectedLayoutProps {
15 | children: React.ReactNode;
16 | }
17 |
18 | export default async function Dashboard({ children }: ProtectedLayoutProps) {
19 | const user = await getCurrentUser();
20 |
21 | if (!user) redirect("/login");
22 |
23 | const filteredLinks = sidebarLinks.map((section) => ({
24 | ...section,
25 | items: section.items.filter(
26 | ({ authorizeOnly }) => !authorizeOnly || authorizeOnly === user.role,
27 | ),
28 | }));
29 |
30 | return (
31 |
32 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Tabs = TabsPrimitive.Root
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef
35 |
36 |
37 |
46 |
47 |
48 |
49 |
50 | {children}
51 |
52 |
53 |
54 |
40 |
42 |
43 |
39 | {JSON.stringify(data, null, 2)}
40 |
41 | ),
42 | });
43 | }
44 |
45 | return (
46 |
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/components/sections/testimonials.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | import { testimonials } from "@/config/landing";
4 | import { HeaderSection } from "@/components/shared/header-section";
5 |
6 | export default function Testimonials() {
7 | return (
8 |
10 |
50 |
18 | {testimonials.map((item) => (
19 |
49 |
20 |
47 | ))}
48 |
21 |
46 |
22 |
45 |
23 |
44 |
24 |
25 |
42 |
34 |
41 | 35 | {item.name} 36 |
37 |38 | {item.job} 39 |
40 |{item.review}43 |
61 |
17 |
24 | Login
25 |
26 |
27 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const buttonVariants = cva(
7 | "inline-flex items-center justify-center text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ring-offset-background select-none active:scale-[0.98]",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
12 | destructive:
13 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 | outline:
15 | "border border-input hover:bg-accent hover:text-accent-foreground",
16 | secondary:
17 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18 | ghost: "hover:bg-accent hover:text-accent-foreground",
19 | link: "underline-offset-4 hover:underline text-primary",
20 | disable:
21 | "border border-input bg-transparent text-neutral-600 cursor-not-allowed",
22 | },
23 | size: {
24 | default: "h-10 py-2 px-4",
25 | sm: "h-9 px-3",
26 | lg: "h-11 px-8",
27 | icon: "size-10",
28 | },
29 | rounded: {
30 | default: "rounded-md",
31 | sm: "rounded-sm",
32 | lg: "rounded-lg",
33 | xl: "rounded-xl",
34 | "2xl": "rounded-2xl",
35 | full: "rounded-full",
36 | },
37 | },
38 | defaultVariants: {
39 | variant: "default",
40 | size: "default",
41 | rounded: "default",
42 | },
43 | },
44 | );
45 |
46 | export interface ButtonProps
47 | extends React.ButtonHTMLAttributes
28 |
60 |
29 |
39 |
41 |
59 |
30 |
38 | 32 | Create an account 33 |
34 |35 | Enter your email below to create your account 36 |
37 |42 | By clicking continue, you agree to our{" "} 43 | 47 | Terms of Service 48 | {" "} 49 | and{" "} 50 | 54 | Privacy Policy 55 | 56 | . 57 |
58 |
78 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
5 | import { ChevronDown } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Accordion = AccordionPrimitive.Root
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef
79 |
81 | {children}
82 | {children}
56 |
19 |
20 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/charts/radar-chart-simple.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { TrendingUp } from "lucide-react";
4 | import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
5 |
6 | import {
7 | Card,
8 | CardContent,
9 | CardDescription,
10 | CardFooter,
11 | CardHeader,
12 | CardTitle,
13 | } from "@/components/ui/card";
14 | import {
15 | ChartConfig,
16 | ChartContainer,
17 | ChartTooltip,
18 | ChartTooltipContent,
19 | } from "@/components/ui/chart";
20 |
21 | const chartData = [
22 | { month: "January", desktop: 186 },
23 | { month: "February", desktop: 305 },
24 | { month: "March", desktop: 237 },
25 | { month: "April", desktop: 273 },
26 | { month: "May", desktop: 209 },
27 | { month: "June", desktop: 214 },
28 | ];
29 |
30 | const chartConfig = {
31 | desktop: {
32 | label: "Desktop",
33 | color: "hsl(var(--chart-1))",
34 | },
35 | } satisfies ChartConfig;
36 |
37 | export function RadarChartSimple() {
38 | return (
39 |
21 |
44 | 22 | {data.title} 23 |
24 |25 | {data.description} 26 |
27 |-
28 | {data.list.map((item, index) => {
29 | const Icon = Icons[item.icon || "arrowRight"];
30 | return (
31 |
-
33 |
34 | {item.title} 35 |
36 | - 37 | {item.description} 38 | 39 |
32 |
40 | );
41 | })}
42 |
50 |
61 |
51 |
60 |
65 | Trending up by 5.2% this month
67 |
68 | January - June 2024
69 |
70 |
23 |
53 |
24 |
42 |
25 | Are you sure ?
26 |
27 | {userPaidPlan ? (
28 |
36 |
29 |
34 | ) : null}
35 |
30 |
32 | Active Subscription
33 |
37 | Permanently delete your {siteConfig.name} account
38 | {userPaidPlan ? " and your subscription" : ""}. This action cannot
39 | be undone - please proceed with caution.
40 |
41 |
43 |
51 |
52 |
21 |
25 | );
26 | }
27 |
28 | interface EmptyPlaceholderIconProps
29 | extends Partial
22 | {children}
23 |
24 |
50 |
52 | );
53 | };
54 |
55 | interface EmptyPlaceholderTitleProps
56 | extends React.HTMLAttributes
67 |
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | generator client {
5 | provider = "prisma-client-js"
6 | }
7 |
8 | datasource db {
9 | provider = "postgresql"
10 | url = env("DATABASE_URL")
11 | }
12 |
13 | enum UserRole {
14 | ADMIN
15 | USER
16 | }
17 |
18 | model Account {
19 | id String @id @default(cuid())
20 | userId String
21 | type String
22 | provider String
23 | providerAccountId String
24 | refresh_token String? @db.Text
25 | access_token String? @db.Text
26 | expires_at Int?
27 | token_type String?
28 | scope String?
29 | id_token String? @db.Text
30 | session_state String?
31 | createdAt DateTime @default(now()) @map(name: "created_at")
32 | updatedAt DateTime @default(now()) @map(name: "updated_at")
33 |
34 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
35 |
36 | @@unique([provider, providerAccountId])
37 | @@index([userId])
38 | @@map(name: "accounts")
39 | }
40 |
41 | model Session {
42 | id String @id @default(cuid())
43 | sessionToken String @unique
44 | userId String
45 | expires DateTime
46 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
47 |
48 | @@index([userId])
49 | @@map(name: "sessions")
50 | }
51 |
52 | model User {
53 | id String @id @default(cuid())
54 | name String?
55 | email String? @unique
56 | emailVerified DateTime?
57 | image String?
58 | createdAt DateTime @default(now()) @map(name: "created_at")
59 | updatedAt DateTime @default(now()) @map(name: "updated_at")
60 | role UserRole @default(USER)
61 |
62 | accounts Account[]
63 | sessions Session[]
64 |
65 | stripeCustomerId String? @unique @map(name: "stripe_customer_id")
66 | stripeSubscriptionId String? @unique @map(name: "stripe_subscription_id")
67 | stripePriceId String? @map(name: "stripe_price_id")
68 | stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
69 |
70 | @@map(name: "users")
71 | }
72 |
73 | model VerificationToken {
74 | identifier String
75 | token String @unique
76 | expires DateTime
77 |
78 | @@unique([identifier, token])
79 | @@map(name: "verification_tokens")
80 | }
81 |
--------------------------------------------------------------------------------
/content/docs/configuration/layouts.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dashboard Layout Options
3 | description: Choose between two different layout options for your dashboard.
4 | ---
5 |
6 | Explore the different layout options available for customizing your dashboard. You have the choice between two layouts for the dashboard.
7 |
8 | ## Centered Sidebar and Main Content
9 |
10 | In this layout, both the sidebar and the main content are centered in the middle of the page, like **Stripe dashboard**.
11 |
12 | ```tsx
13 |
15 |
34 |
18 |
19 |
28 |
29 |
30 | {children}
31 |
32 |
33 |
22 |
24 |
25 |
43 |
66 | ```
67 |
68 | Feel free to choose the layout that best fits your design preferences and user experience goals.
--------------------------------------------------------------------------------
/app/(docs)/guides/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { allGuides } from "contentlayer/generated";
3 | import { compareDesc } from "date-fns";
4 |
5 | import { formatDate } from "@/lib/utils";
6 | import { DocsPageHeader } from "@/components/docs/page-header";
7 | import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
8 |
9 | export const metadata = {
10 | title: "Guides",
11 | description:
12 | "This section includes end-to-end guides for developing Next.js 13 apps.",
13 | };
14 |
15 | export default function GuidesPage() {
16 | const guides = allGuides
17 | .filter((guide) => guide.published)
18 | .sort((a, b) => {
19 | return compareDesc(new Date(a.date), new Date(b.date));
20 | });
21 |
22 | return (
23 |
46 |
47 |
48 |
57 |
58 |
59 |
60 |
61 | {children}
62 |
63 |
64 |
65 |
51 |
53 |
54 |
30 | {guides.map((guide) => (
31 |
35 | {guide.featured && (
36 |
37 | Featured
38 |
39 | )}
40 |
59 | ))}
60 |
61 | ) : (
62 |
41 |
55 |
56 | View
57 |
58 |
42 |
49 | {guide.date && (
50 | 43 | {guide.title} 44 |
45 | {guide.description && ( 46 |{guide.description}
47 | )} 48 |51 | {formatDate(guide.date)} 52 |
53 | )} 54 |No guides published.
63 | )} 64 |
20 | {items.map((item) => (
21 |
35 | ) : null;
36 | }
37 |
38 | interface DocsSidebarNavItemsProps {
39 | items: NavItem[];
40 | pathname: string | null;
41 | setOpen?: (boolean) => void;
42 | }
43 |
44 | export function DocsSidebarNavItems({
45 | items,
46 | setOpen,
47 | pathname,
48 | }: DocsSidebarNavItemsProps) {
49 | return items?.length > 0 ? (
50 |
22 |
33 | ))}
34 | 23 | {item.title} 24 |
25 | {item.items ? ( 26 |
51 | {items.map((item, index) =>
52 | !item.disabled && item.href ? (
53 | {
57 | if (setOpen) setOpen(false);
58 | }}
59 | className={cn(
60 | "flex w-full items-center rounded-md px-2 py-1.5 text-muted-foreground hover:underline",
61 | {
62 | "font-medium text-blue-600 dark:text-blue-400":
63 | pathname === item.href,
64 | },
65 | )}
66 | target={item.external ? "_blank" : ""}
67 | rel={item.external ? "noreferrer" : ""}
68 | >
69 | {item.title}
70 |
71 | ) : (
72 |
76 | {item.title}
77 |
78 | ),
79 | )}
80 |
81 | ) : null;
82 | }
83 |
--------------------------------------------------------------------------------
/components/pricing/pricing-faq.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Accordion,
3 | AccordionContent,
4 | AccordionItem,
5 | AccordionTrigger,
6 | } from "@/components/ui/accordion";
7 |
8 | import { HeaderSection } from "../shared/header-section";
9 |
10 | const pricingFaqData = [
11 | {
12 | id: "item-1",
13 | question: "What is the cost of the free plan?",
14 | answer:
15 | "Our free plan is completely free, with no monthly or annual charges. It's a great way to get started and explore our basic features.",
16 | },
17 | {
18 | id: "item-2",
19 | question: "How much does the Basic Monthly plan cost?",
20 | answer:
21 | "The Basic Monthly plan is priced at $15 per month. It provides access to our core features and is billed on a monthly basis.",
22 | },
23 | {
24 | id: "item-3",
25 | question: "What is the price of the Pro Monthly plan?",
26 | answer:
27 | "The Pro Monthly plan is available for $25 per month. It offers advanced features and is billed on a monthly basis for added flexibility.",
28 | },
29 | {
30 | id: "item-4",
31 | question: "Do you offer any annual subscription plans?",
32 | answer:
33 | "Yes, we offer annual subscription plans for even more savings. The Basic Annual plan is $144 per year, and the Pro Annual plan is $300 per year.",
34 | },
35 | {
36 | id: "item-5",
37 | question: "Is there a trial period for the paid plans?",
38 | answer:
39 | "We offer a 14-day free trial for both the Pro Monthly and Pro Annual plans. It's a great way to experience all the features before committing to a paid subscription.",
40 | },
41 | ];
42 |
43 | export function PricingFaq() {
44 | return (
45 |
31 |
46 | )}
47 |
53 |
77 |
78 | View Article
79 |
80 |
54 |
63 | 55 | {data.title} 56 |
57 | {data.description && ( 58 |59 | {data.description} 60 |
61 | )} 62 |
64 |
76 |
65 | {data.authors.map((author) => (
66 |
69 |
70 | {data.date && (
71 | 72 | {formatDate(data.date)} 73 |
74 | )} 75 |
73 |
78 |
80 |
75 |
77 | 78 |
81 |
85 |
82 |
84 |
61 |
81 |
62 |
65 |
75 | 65 |
66 |
70 |
74 |
76 |
80 |
77 |
79 |
78 | Trending up by 5.2% this month
80 |
81 | Showing total visitors for the last 6 months
82 |
83 |
27 |
60 |
28 |
29 |
37 |
38 | Sign In
32 |33 | This is strictly for demo purposes - only your email and profile 34 | picture will be stored. 35 |
36 |
39 |
58 |
59 |