Add some marketing content

apps/marketing/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "framer-motion": "^11.0.24",
     "lucide-react": "^0.359.0",
     "next": "14.1.4",

apps/marketing/src/app/page.tsx

@@ -1,45 +1,155 @@
-import { ArrowRight, MoveRight, SendHorizonal } from "lucide-react";
+"use client";
-import Image from "next/image";
+
-import { BackgroundBeams } from "~/components/ui/background-beams";
+import { motion } from "framer-motion";
-import { StyledInput } from "~/components/ui/styled-input";
+import { Mail, Rocket } from "lucide-react";
+import {
+  RocketLaunchIcon,
+  EnvelopeIcon,
+  MegaphoneIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  BellAlertIcon,
+} from "@heroicons/react/24/solid";
+import { Code } from "@unsend/ui/src/code";
 
 export default function Home() {
   return (
-    <div className="bg-neutral-950">
+    <div className="bg-neutral-950 pb-20">
-      <div className="h-[100vh] w-full rounded-md  relative flex flex-col items-center justify-center antialiased">
+      <div className="h-screen w-full relative flex flex-col items-center justify-center ">
         <div className="max-w-4xl mx-auto p-4">
-          <h1 className="relative z-10 text-lg md:text-6xl md:leading-[4.5rem]    text-center font-sans font-bold">
+          <h1 className="relative z-10 text-neutral-100 text-lg md:text-6xl md:leading-[4.5rem]    text-center font-sans font-bold">
             Open source sending infrastructure for{" "}
             <span className="bg-clip-text text-transparent bg-gradient-to-r  from-[#06b6d4] to-[#10b981]">
               developers
             </span>
           </h1>
           <p></p>
-          <p className="text-neutral-300 max-w-lg mx-auto my-4 text-center relative z-10">
+          <p className="text-neutral-100 text-lg max-w-lg mx-auto my-4 text-center relative z-10">
             Send transactional, marketing emails, SMSes and push notifications
             effortlessly.
           </p>
-          <p className="text-neutral-300 max-w-lg mx-auto text-xl my-4 text-center relative z-10 mt-10">
+          <div className="flex justify-center mt-16">
-            Join the waitlist!
+            <motion.a
-          </p>
+              className="bg-white text-black py-2 px-6 rounded-full cursor-pointer flex gap-2"
-          <div className="flex z-10 justify-center items-stretch bg-neutral-800 relative border border-gray-500 focus-within:border-[#06b6d45a] rounded-lg w-[400px] mx-auto mt-2">
+              whileHover={{ scale: 1.2 }}
-            <input
+              onHoverStart={(e) => {}}
-              type="text"
+              onHoverEnd={(e) => {}}
-              className="flex-1 bg-transparent  placeholder:text-neutral-600 outline-none relative z-10 px-4 p-2"
+              transition={{ type: "spring", stiffness: 400, damping: 10 }}
-              placeholder="ada@lovelace.com"
+              href="https://app.youform.io/forms/caja89vr"
-            />
+              target="_blank"
-            <button className="  text-white rounded-lg w-10  bg-slate-100 flex items-center justify-center bg-gradient-to-r  from-[#06b6d4ba] to-[#10b981ba]">
+            >
-              <ArrowRight className="text-neutral-700" />
+              <RocketLaunchIcon className="h-6 w-6" />
-            </button>
-          </div>
-        </div>
-        <BackgroundBeams />
-      </div>
-      <div className="h-[100vh] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
-        <div className="max-w-2xl mx-auto p-4">
-          <h1 className="relative z-10 text-lg md:text-7xl  bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600  text-center font-sans font-bold">
               Join the waitlist
-          </h1>
+            </motion.a>
+          </div>
+        </div>
+
+        {/* <BackgroundBeams /> */}
+      </div>
+      <div className=" max-w-5xl mx-auto flex flex-col gap-40">
+        <div>
+          <p className="text-center text-6xl ">Reach your users</p>
+        </div>
+        <div className="flex">
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <EnvelopeIcon className="h-10 w-10 text-fuchsia-500" />
+              <p className="text-3xl font-semibold">Transactional Mail</p>
+            </div>
+            <ul className="flex flex-col gap-4 mt-8">
+              <li>Simple to use! No wasted time on configuration.</li>
+              <li>Send emails that reach the inbox, not spam.</li>
+              <li>Get notified of email bounces and complaints.</li>
+            </ul>
+          </div>
+          <div className="w-1/2">
+            {/* <Code
+              codeBlocks={[
+                {
+                  language: "js",
+                  code: `const unsend = require("unsend");
+
+const email = unsend.email();
+
+email.send({
+  to: "user@example.com",
+  subject: "Hello, World!",
+  text: "Hello, World!",
+});`,
+                },
+              ]}
+            /> */}
+          </div>
+        </div>
+        <div className="flex">
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <MegaphoneIcon className="h-10 w-10 text-indigo-500" />
+              <p className="text-3xl font-semibold">Marketing Mail</p>
+            </div>
+            <ul className="flex flex-col gap-4 mt-8">
+              <li>Manage newsletters, changelogs, and broadcasts easily.</li>
+              <li>Use our no-code email builder and templates.</li>
+              <li>Measure engagement using click and open tracking.</li>
+              <li>We will manage subscriptions for you.</li>
+            </ul>
+          </div>
+          <div className="w-1/2"></div>
+        </div>
+        <div className="flex">
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <ChatBubbleOvalLeftEllipsisIcon className="h-10 w-10 text-emerald-500" />
+              <div className="flex gap-4 items-center">
+                <p className="text-3xl font-semibold">SMS</p>
+                <div className="rounded-md border px-2 py-1 text-xs bg-neutral-900">
+                  Coming soon
+                </div>
+              </div>
+            </div>
+            <ul className="flex flex-col gap-4 mt-8">
+              <li>Manage newsletters, changelogs, and broadcasts easily.</li>
+              <li>Use our no-code email builder and templates.</li>
+              <li>Measure engagement using click and open tracking.</li>
+              <li>We will manage subscriptions for you.</li>
+            </ul>
+          </div>
+          <div className="w-1/2"></div>
+        </div>
+        <div className="flex">
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <BellAlertIcon className="h-10 w-10 text-cyan-500" />
+              <div className="flex gap-4 items-center">
+                <p className="text-3xl font-semibold">Push notification</p>
+                <div className="rounded-md border px-2 py-1 text-xs bg-neutral-900">
+                  Coming soon
+                </div>
+              </div>
+            </div>
+            <ul className="flex flex-col gap-4 mt-8">
+              <li>Manage newsletters, changelogs, and broadcasts easily.</li>
+              <li>Use our no-code email builder and templates.</li>
+              <li>Measure engagement using click and open tracking.</li>
+              <li>We will manage subscriptions for you.</li>
+            </ul>
+          </div>
+          <div className="w-1/2"></div>
+        </div>
+      </div>
+      <div className="">
+        <div className="flex justify-center mt-40">
+          <motion.a
+            className="bg-white text-black py-2 px-6 rounded-full cursor-pointer flex gap-2"
+            whileHover={{ scale: 1.2 }}
+            onHoverStart={(e) => {}}
+            onHoverEnd={(e) => {}}
+            transition={{ type: "spring", stiffness: 400, damping: 10 }}
+            href="https://app.youform.io/forms/caja89vr"
+            target="_blank"
+          >
+            <RocketLaunchIcon className="h-6 w-6" />
+            Join the waitlist
+          </motion.a>
         </div>
       </div>
     </div>

apps/web/src/app/(dashboard)/layout.tsx

@@ -64,7 +64,7 @@ export default async function AuthenticatedDashboardLayout({
           <div className="flex h-full max-h-screen flex-col gap-2">
             <div className="flex h-14 items-center px-4 lg:h-[60px] lg:px-6">
               <Link href="/" className="flex items-center gap-2 font-semibold">
-                <Image src="/Logo-1.png" alt="Unsend" width={40} height={40} />
+                <Image src="/Logo-2.png" alt="Unsend" width={20} height={20} />
 
                 <span className=" ">Unsend</span>
               </Link>

packages/ui/src/code.tsx

@@ -16,7 +16,6 @@ type CodeProps = {
   codeBlocks: {
     language: Language;
     code: string;
-    display?: string;
   }[];
 };
 

pnpm-lock.yaml

@@ -27,6 +27,9 @@ importers:
 
   apps/marketing:
     dependencies:
+      '@heroicons/react':
+        specifier: ^2.1.3
+        version: 2.1.3(react@18.2.0)
       framer-motion:
         specifier: ^11.0.24
         version: 11.0.24(react-dom@18.2.0)(react@18.2.0)
@@ -1498,6 +1501,14 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
+  /@heroicons/react@2.1.3(react@18.2.0):
+    resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@hono/node-server@1.9.1:
     resolution: {integrity: sha512-XBru0xbtRlTZJyAiFJLn7XDKbCVXBaRhVQAQhB9TwND2gwj8jf9SDWIj/7VxVtNAjURJf7Ofcz58DRA6DPYiWA==}
     engines: {node: '>=18.14.1'}
@@ -4459,7 +4470,7 @@ packages:
       enhanced-resolve: 5.16.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.3
       is-core-module: 2.13.1