adding marketing pages

components/promo/call-to-action.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Newspaper from "./roman-kraft-unsplash.jpg";
+
+export const CTA = () => {
+ return (
+ <section>
+ <div className="relative grid min-h-min grid-cols-2 overflow-hidden rounded-lg bg-sky-700 text-zinc-100 dark:bg-sky-400 dark:text-zinc-900 lg:grid-cols-4">
+ <div className="col-span-2">
+ <div className="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+ <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+ <span className="block">Ready to dive in?</span>
+ <span className="block">Start your free trial today.</span>
+ </h2>
+ <p className="mt-4 text-lg leading-6 text-sky-200 dark:text-sky-900">
+ Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada
+ adipiscing sagittis vel nulla nec.
+ </p>
+ <a
+ href="#"
+ className="mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-sky-600 shadow hover:bg-indigo-50">
+ Sign up for free
+ </a>
+ </div>
+ </div>
+
+ <div className="col-span-2">
+ <Image
+ src={Newspaper}
+ alt="App screenshot"
+ className="opacity-75"
+ layout="responsive"
+ objectFit="cover"
+ />
+ </div>
+ </div>
+ </section>
+ );
+};

components/promo/features.tsx

@@ -0,0 +1,50 @@
+import { FiGlobe, FiActivity, FiMail } from "react-icons/fi";
+
+const features = [
+ {
+ name: "Competitive rates",
+ description:
+ "Consequuntur omnis dicta cumque, inventore atque ab dolores aspernatur tempora ab doloremque.",
+ icon: FiGlobe,
+ },
+
+ {
+ name: "Instant transfers",
+ description:
+ "Omnis, illo delectus? Libero, possimus nulla nemo tenetur adipisci repellat dolore eligendi velit doloribus mollitia.",
+ icon: FiActivity,
+ },
+ {
+ name: "Reminder emails",
+ description:
+ "Veniam necessitatibus reiciendis fugit explicabo dolorem nihil et omnis assumenda odit? Quisquam unde accusantium.",
+ icon: FiMail,
+ },
+];
+
+export const FeatureList = () => (
+ <section>
+ <div className="relative lg:grid lg:grid-cols-3 lg:gap-x-8">
+ <div className="col-span-1">
+ <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+ Take doom out of your evening scroll.
+ </h2>
+ </div>
+ <dl className="col-span-2 mt-10 grid grid-cols-2 gap-x-8 gap-y-10 sm:mt-0">
+ {features.map((feature) => (
+ <div key={feature.name}>
+ <dt>
+ <div className="flex h-12 w-12 items-center justify-center rounded-md bg-sky-400 text-zinc-900">
+ <feature.icon className="h-6 w-6" aria-hidden="true" />
+ </div>
+ <p className="mt-5 text-lg font-medium leading-6 text-zinc-800 dark:text-zinc-200">
+ {feature.name}
+ </p>
+ </dt>
+ <dd className="mt-2 text-base text-zinc-500">{feature.description}</dd>
+ </div>
+ ))}
+ </dl>
+ </div>
+ </section>
+);

components/promo/hero.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+export const Hero = () => (
+ <section>
+ <div className="text-center">
+ <Link href="/" passHref className="block">
+ <svg
+ className="mx-auto mb-12 max-w-[4rem]"
+ viewBox="0 0 45 56"
+ fill="none"
+ xmlns="http:https://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M1.12542 6.83245C-1.33382 4.25504 0.505064 0 4.05476 0H27.3155C29.8944 0 32.2314 1.51874 33.2788 3.87533L43.1533 26.0931C43.1683 26.1267 43.182 26.1609 43.1946 26.1956C44.0833 28.6528 44.7856 31.7459 43.379 34.2765C41.9036 36.9307 38.5797 38.2212 33.3459 38.2217H33.3434L33.3277 38.2217H26.7409C25.9856 38.2217 25.4867 37.3993 25.6488 36.6616C26.0374 34.8934 25.6328 32.9346 24.1762 31.3834L18.342 25.1704H18.408C16.9506 23.5746 14.9351 21.4125 12.6939 19.0294C8.78564 14.8737 4.28383 10.1426 1.12542 6.83245ZM8.85576 4.97192C8.0712 4.97192 7.63752 5.88194 8.13167 6.49132L10.5958 9.53012C11.1268 10.185 11.925 10.5653 12.7681 10.5653H28.3647C29.5688 10.5653 30.3153 9.25488 29.7012 8.21917L28.5882 6.34223C28.0845 5.49277 27.1702 4.97192 26.1826 4.97192H8.85576ZM17.0266 12.4298C15.8504 12.4298 15.22 13.8135 15.9918 14.7011C16.4537 15.2323 17.1231 15.5373 17.827 15.5373H25.671C26.583 15.5373 27.196 14.6023 26.8324 13.7659C26.4796 12.9546 25.6793 12.4298 24.7946 12.4298H17.0266ZM21.6815 17.4017C20.5068 17.4017 19.8762 18.7826 20.6456 19.6704C21.1073 20.2031 21.7776 20.5092 22.4826 20.5092H32.8207C33.7318 20.5092 34.3446 19.5758 33.9823 18.7398C33.6303 17.9275 32.8295 17.4017 31.9442 17.4017H21.6815Z"
+ fill="currentColor"
+ />
+ <path
+ d="M14.3755 25.4858C14.1865 25.2845 13.9227 25.1704 13.6465 25.1704H7.78918C7.58113 25.1589 7.36612 25.1595 7.14385 25.1734C7.05679 25.1788 6.97034 25.1916 6.88541 25.2115C6.46696 25.3099 6.00778 25.4869 5.562 25.7562C4.79101 26.2219 5.45292 27.2446 6.32778 27.459C7.17339 27.6662 8.00697 28.1027 8.7756 28.7291C10.2905 29.9638 11.6657 32.001 12.7364 34.8841C13.1906 36.1073 14.3673 36.9895 15.9368 37.5608C17.1404 37.9989 18.3876 38.1813 19.2539 38.2217H19.8721C22.3216 38.2217 23.5876 35.2961 21.9109 33.5105L14.3755 25.4858Z"
+ fill="currentColor"
+ />
+ <path
+ d="M3.96478 32.9376C4.21215 33.5632 4.53298 34.2186 4.93079 34.9037C5.61164 36.3462 7.53103 39.4974 9.79964 43.0862C12.1366 46.7832 14.9243 51.0682 17.3324 54.728C19.0106 57.2786 22.9043 55.6755 22.4047 52.7253L20.5511 41.7787C20.5072 41.5191 20.2823 41.3292 20.019 41.3292C19.7757 41.3405 19.4975 41.3412 19.1922 41.3291H18.7383V41.3029C17.6181 41.2185 16.2277 40.9736 14.874 40.4809C12.9272 39.7723 10.7375 38.4275 9.82332 35.9659C8.87451 33.411 7.76391 31.9134 6.81243 31.1379C5.865 30.3658 5.19059 30.3766 4.86629 30.4869C4.54677 30.5955 4.13236 30.9461 3.9838 31.8016C3.92847 32.1203 3.91493 32.5012 3.96478 32.9376Z"
+ fill="currentColor"
+ />
+ </svg>
+ </Link>
+ <h2 className="bg-gradient-to-tr from-sky-200 to-sky-600 bg-clip-text font-display text-8xl font-bold tracking-tighter text-transparent">
+ Reubin
+ </h2>
+ <p className="text-2xl opacity-50">RSS for the next generation. Coming Soon.</p>
+ </div>
+ </section>
+);

components/promo/pricing.tsx

@@ -0,0 +1,98 @@
+import { FiCheck } from "react-icons/fi";
+
+const tiers = [
+ {
+ name: "Free",
+ href: "#",
+ priceMonthly: 0,
+ description: "All the basics for starting a new business",
+ includedFeatures: [
+ "Potenti felis, in cras at at ligula nunc.",
+ "Orci neque eget pellentesque.",
+ ],
+ },
+ {
+ name: "Premium",
+ href: "#",
+ priceMonthly: 24,
+ description: "All the basics for starting a new business",
+ includedFeatures: [
+ "Potenti felis, in cras at at ligula nunc. ",
+ "Orci neque eget pellentesque.",
+ ],
+ },
+ {
+ name: "Lifetime",
+ href: "#",
+ priceMonthly: 32,
+ description: "All the basics for starting a new business",
+ includedFeatures: [
+ "Potenti felis, in cras at at ligula nunc. ",
+ "Orci neque eget pellentesque.",
+ "Donec mauris sit in eu tincidunt etiam.",
+ ],
+ },
+];
+
+export const Pricing = () => {
+ return (
+ <section>
+ <div className="sm:align-center sm:flex sm:flex-col">
+ <h1 className="text-5xl font-bold tracking-tight">Pricing Plans</h1>
+ <p className="mt-5 text-xl text-zinc-500">
+ Start building for free, then add a site plan to go live. Account plans unlock
+ additional features.
+ </p>
+ <div className="relative mt-6 flex self-end rounded-lg bg-zinc-100 p-0.5 sm:mt-8">
+ <button
+ type="button"
+ className="relative w-1/2 whitespace-nowrap rounded-md border-zinc-200 bg-white py-2 text-sm font-medium text-zinc-900 shadow-sm focus:z-10 focus:outline-none focus:ring-2 focus:ring-sky-500 sm:w-auto sm:px-8">
+ Monthly
+ </button>
+ <button
+ type="button"
+ className="relative ml-0.5 w-1/2 whitespace-nowrap rounded-md border border-transparent py-2 text-sm font-medium text-zinc-700 focus:z-10 focus:outline-none focus:ring-2 focus:ring-sky-500 sm:w-auto sm:px-8">
+ Yearly
+ </button>
+ </div>
+ </div>
+ <div className="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-3">
+ {tiers.map((tier) => (
+ <div
+ key={tier.name}
+ className="divide-y divide-zinc-200 rounded-lg border border-zinc-200 shadow-sm">
+ <div className="p-6">
+ <h2 className="text-lg font-medium leading-6">{tier.name}</h2>
+ <p className="mt-4 text-sm text-zinc-500">{tier.description}</p>
+ <p className="mt-8">
+ <span className="font-monospace text-4xl font-bold tracking-tight">
+ ${tier.priceMonthly}
+ </span>{" "}
+ <span className="text-base font-medium text-zinc-500">/mo</span>
+ </p>
+ <a
+ href={tier.href}
+ className="mt-8 block w-full rounded-md border border-zinc-800 bg-sky-800 py-2 text-center text-sm font-semibold text-white hover:bg-zinc-900">
+ Buy {tier.name}
+ </a>
+ </div>
+ <div className="px-6 pt-6 pb-8">
+ <h3 className="text-sm font-medium">What&apos;s included</h3>
+ <ul role="list" className="mt-6 space-y-4">
+ {tier.includedFeatures.map((feature) => (
+ <li key={feature} className="flex space-x-3">
+ <FiCheck
+ className="h-5 w-5 flex-shrink-0 text-sky-500"
+ aria-hidden="true"
+ />
+ <span className="text-sm text-zinc-500">{feature}</span>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+ );
+};

components/promo/services.tsx

@@ -0,0 +1,24 @@
+import { SiMedium, SiReddit, SiSubstack, SiTwitter, SiWordpress } from "react-icons/si";
+
+export const Services = () => {
+ return (
+ <section>
+ <div className="text-center">
+ <figure>
+ <div className="flex justify-center gap-8 text-sky-700 dark:text-sky-200">
+ <SiReddit size={72} />
+ <SiSubstack size={72} />
+ <SiTwitter size={72} />
+ <SiMedium size={72} />
+ <SiWordpress size={72} />
+ </div>
+ <figcaption className="mx-auto max-w-md pt-16">
+ <p className="bg-gradient-to-tr from-sky-200 to-sky-600 bg-clip-text text-6xl font-bold tracking-tighter text-transparent">
+ Track feeds from all your favorite services
+ </p>
+ </figcaption>
+ </figure>
+ </div>
+ </section>
+ );
+};

next.config.js

@@ -8,6 +8,7 @@ const config = {
  swcMinify: true,
  experimental: {
  newNextLinkBehavior: true,
+ gzipSize: true,
  },
 };