stickerlandia/web-frontend/src/components/Landing.jsx at 7bfe4a683562daff52b8721c2ac5870f612f200c · DataDog/stickerlandia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from "react";
import { Link } from "react-router";
import { useAuth } from "../context/AuthContext";
import WorkspacePremiumOutlinedIcon from '@mui/icons-material/WorkspacePremiumOutlined';
import PolylineOutlinedIcon from '@mui/icons-material/PolylineOutlined';
import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';

function Landing() {
  const { login, isLoading } = useAuth();

  return (
    <div className="relative isolate overflow-hidden pb-20 pt-[calc(theme(spacing.16)+theme(spacing.20))] sm:pb-32 sm:pt-[calc(theme(spacing.16)+theme(spacing.32))] -mt-16">
      <div className="landing-cta">
        <h1 className="text-purple-600 mx-auto max-w-[17.5rem] text-balance text-3xl/9 font-bold tracking-tight sm:!max-w-4xl sm:text-4.5xl md:text-5xl lg:text-6xl [@media(width>=27.5em)]:max-w-[24.25rem]">
          Collect. Share. Print.
        </h1>
        <p className="mx-auto mt-4 max-w-md text-pretty text-base/6 sm:max-w-2xl sm:text-lg">
          Stickerlandia is your gamified digital collectibles platform. Earn
          stickers through Datadog achievements, share your collection, and
          print them at events.
        </p>
        <div className="mt-8 mb-8 flex items-center justify-center gap-x-6 gap-y-3 max-sm:flex-col">
          <button
            onClick={login}
            disabled={isLoading}
            className="group relative isolate inline-flex items-center justify-center overflow-hidden text-left font-medium transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] before:transtion-opacity rounded-md shadow-[0_1px_theme(colors.white/0.07)_inset,0_1px_3px_theme(colors.gray.900/0.2)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:from-white/20 before:opacity-50 hover:before:opacity-100 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:from-white/10 after:from-[46%] after:to-[54%] after:mix-blend-overlay text-sm h-[1.875rem] px-3 ring-1 bg-gray-900 text-white ring-gray-900"
          >
            {isLoading ? 'Loading...' : 'Start Collecting'}
          </button>
          <Link to="/public-dashboard" className="group relative isolate inline-flex items-center justify-center overflow-hidden text-left font-medium transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] before:transtion-opacity rounded-md shadow-[0_1px_theme(colors.white/0.07)_inset,0_1px_3px_theme(colors.gray.900/0.2)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-md before:bg-gradient-to-b before:from-white/20 before:opacity-50 hover:before:opacity-100 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-md after:bg-gradient-to-b after:from-white/10 after:from-[46%] after:to-[54%] after:mix-blend-overlay text-sm h-[1.875rem] px-3 ring-1 bg-white text-black ring-gray-100">
            View Public Dashboard
          </Link>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="landing-card">
            <span className="card-icon">
              <WorkspacePremiumOutlinedIcon />
            </span>

            <p className="card-title font-bold">Earn Through Achievements</p>
            <p className="card-copy">
              Complete certifications, attend events, and participate in the
              community to earn unique stickers.
            </p>
          </div>
          <div className="landing-card">
            <span className="card-icon">
              <PolylineOutlinedIcon />
            </span>

            <p className="card-title font-bold">Share Your Collection</p>
            <p className="card-copy">
              Create a public profile to showcase your achievements and share
              individual stickers on social media.
            </p>
          </div>
          <div className="landing-card">
            <span className="card-icon">
              <PrintOutlinedIcon />
            </span>

            <p className="card-title font-bold">Print at Events</p>
            <p className="card-copy">
              Turn your digital collection into physical stickers at Datadog
              events and conferences.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Landing;