feat: add everything you need section

marcolivierbouch · Nov 29, 2024 · 7d15876 · 7d15876
1 parent 46eba9e
commit 7d15876
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 232 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
-``` 
-$$$$$$\                        $$\                                   $$$$$$$\                                    $$\                 $$$$$$$\                            $$\           
-$$  __$$\                       $$ |                                  $$  __$$\                                   \__|                $$  __$$\                           $$ |          
-$$ /  \__|$$\   $$\  $$$$$$$\ $$$$$$\    $$$$$$\  $$$$$$\$$$$\        $$ |  $$ | $$$$$$\   $$$$$$\  $$$$$$\$$$$\  $$\ $$$$$$$\        $$ |  $$ | $$$$$$\   $$$$$$\   $$$$$$$ |$$\   $$\ 
+```
+$$$$$$\                        $$\                                   $$$$$$$\                                    $$\                 $$$$$$$\                            $$\
+$$  __$$\                       $$ |                                  $$  __$$\                                   \__|                $$  __$$\                           $$ |
+$$ /  \__|$$\   $$\  $$$$$$$\ $$$$$$\    $$$$$$\  $$$$$$\$$$$\        $$ |  $$ | $$$$$$\   $$$$$$\  $$$$$$\$$$$\  $$\ $$$$$$$\        $$ |  $$ | $$$$$$\   $$$$$$\   $$$$$$$ |$$\   $$\
 $$ |      $$ |  $$ |$$  _____|\_$$  _|  $$  __$$\ $$  _$$  _$$\       $$ |  $$ |$$  __$$\  \____$$\ $$  _$$  _$$\ $$ |$$  __$$\       $$$$$$$  |$$  __$$\  \____$$\ $$  __$$ |$$ |  $$ |
 $$ |      $$ |  $$ |\$$$$$$\    $$ |    $$ /  $$ |$$ / $$ / $$ |      $$ |  $$ |$$ /  $$ | $$$$$$$ |$$ / $$ / $$ |$$ |$$ |  $$ |      $$  __$$< $$$$$$$$ | $$$$$$$ |$$ /  $$ |$$ |  $$ |
 $$ |  $$\ $$ |  $$ | \____$$\   $$ |$$\ $$ |  $$ |$$ | $$ | $$ |      $$ |  $$ |$$ |  $$ |$$  __$$ |$$ | $$ | $$ |$$ |$$ |  $$ |      $$ |  $$ |$$   ____|$$  __$$ |$$ |  $$ |$$ |  $$ |
 \$$$$$$  |\$$$$$$  |$$$$$$$  |  \$$$$  |\$$$$$$  |$$ | $$ | $$ |      $$$$$$$  |\$$$$$$  |\$$$$$$$ |$$ | $$ | $$ |$$ |$$ |  $$ |      $$ |  $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$ |\$$$$$$$ |
  \______/  \______/ \_______/    \____/  \______/ \__| \__| \__|      \_______/  \______/  \_______|\__| \__| \__|\__|\__|  \__|      \__|  \__| \_______| \_______| \_______| \____$$ |
                                                                                                                                                                               $$\   $$ |
                                                                                                                                                                               \$$$$$$  |
-                                                                                                                                                                               \______/ 
+                                                                                                                                                                               \______/
 ```
 
 # Custom Domain Ready
@@ -24,15 +24,15 @@ For this tutorial you'll need a [Vercel](https://vercel.com/) account.
 
 1. Create a new storage [Edge Config](https://vercel.com/docs/storage/edge-config).
 2. Create a new vercel project and import configuration-api.
-![image](https://github.com/user-attachments/assets/a32e8dcc-3f23-4890-b887-4a94d8bbbc93)
+   ![image](https://github.com/user-attachments/assets/a32e8dcc-3f23-4890-b887-4a94d8bbbc93)
 
-4. Create a new project and import custom-domain-proxy.
-![image](https://github.com/user-attachments/assets/f7d07dd7-009e-49a3-a3ec-5a6726e422ae)
+3. Create a new project and import custom-domain-proxy.
+   ![image](https://github.com/user-attachments/assets/f7d07dd7-009e-49a3-a3ec-5a6726e422ae)
 
-5. Connect the storage to the project custom-domain-proxy.
-![image](https://github.com/user-attachments/assets/afd55de4-6e2e-412e-898f-a8c8ea05503f)
+4. Connect the storage to the project custom-domain-proxy.
+   ![image](https://github.com/user-attachments/assets/afd55de4-6e2e-412e-898f-a8c8ea05503f)
 
-7. Add the required env vars for the configuration-api
+5. Add the required env vars for the configuration-api
 
 ```bash
 VERCEL_CUSTOM_DOMAIN_PROXY_EDGE_CONFIG_ID= # You can find the edge config id when you click on the storage

diff --git a/apps/configuration-api/app/api/domain/route.ts b/apps/configuration-api/app/api/domain/route.ts
@@ -1,7 +1,4 @@
-import {
-  addDomainToVercel,
-  getDomains,
-} from '@customdomainready/sdk';
+import { addDomainToVercel, getDomains } from '@customdomainready/sdk';
 import { NextResponse } from 'next/server';
 
 import * as z from 'zod';

diff --git a/apps/configuration-api/components/custom-domain-config.tsx b/apps/configuration-api/components/custom-domain-config.tsx
@@ -62,8 +62,8 @@ export default function CustomDomainConfig() {
           throw new Error('Failed to add domain');
         }
 
-        const response =  await domainResponse.json()
-        alert(JSON.stringify(response))
+        const response = await domainResponse.json();
+        alert(JSON.stringify(response));
       }
 
       const aliasResponse = await fetch('/api/assign', {
@@ -77,7 +77,7 @@ export default function CustomDomainConfig() {
           destination: newConfig.destinationPath,
         }),
       });
-      
+
       if (!aliasResponse.ok) {
         throw new Error('Failed to create alias');
       }

diff --git a/websites/customdomainready/app/layout.tsx b/websites/customdomainready/app/layout.tsx
@@ -1,13 +1,15 @@
-import { Providers } from './providers'
-import './globals.css'
-import { Metadata } from 'next'
+import { Providers } from './providers';
+import './globals.css';
+import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Custom Domain Ready',
-  description: 'Ship custom domain support for your SaaS in less than a day for free',
+  description:
+    'Ship custom domain support for your SaaS in less than a day for free',
   openGraph: {
     title: 'Custom Domain Ready',
-    description: 'Ship custom domain support for your SaaS in less than a day for free',
+    description:
+      'Ship custom domain support for your SaaS in less than a day for free',
     url: 'https://customdomainready.com',
     siteName: 'Custom Domain Ready',
     //images: [
@@ -24,17 +26,22 @@ export const metadata: Metadata = {
   twitter: {
     card: 'summary_large_image',
     title: 'Custom Domain Ready',
-    description: 'Ship custom domain support for your SaaS in less than a day for free',
+    description:
+      'Ship custom domain support for your SaaS in less than a day for free',
     //images: ['https://yourdomain.com/og-image.png'],
   },
-}
+};
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
         <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }
diff --git a/websites/customdomainready/app/page.tsx b/websites/customdomainready/app/page.tsx
@@ -1,60 +1,81 @@
-'use client'
+'use client';
 
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { Github, Moon, Sun } from 'lucide-react'
-import DynamicBackground from '@/components/dynamic-background'
-import { Button } from '@/components/ui/button'
-import { Footer } from '@/components/Footer'
-import { UserFlow } from '@/components/UserFlow'
-import { KeyBenefits } from '@/components/key-benefits'
-import { Testimonials } from '@/components/testimonials'
-import Link from 'next/link'
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { Github, Moon, Sun } from 'lucide-react';
+import DynamicBackground from '@/components/dynamic-background';
+import { Button } from '@/components/ui/button';
+import { Footer } from '@/components/Footer';
+import { UserFlow } from '@/components/UserFlow';
+import { KeyBenefits } from '@/components/key-benefits';
+import { Testimonials } from '@/components/testimonials';
+import Link from 'next/link';
+import FeaturesGrid from '@/components/features-grid';
 
 export default function Home() {
-  const [mounted, setMounted] = useState(false)
-  const [scrolled, setScrolled] = useState(false)
-  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
-    setMounted(true)
+    setMounted(true);
 
     const handleScroll = () => {
-      setScrolled(window.scrollY > 20)
-    }
+      setScrolled(window.scrollY > 20);
+    };
 
-    window.addEventListener('scroll', handleScroll)
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   if (!mounted) {
-    return null
+    return null;
   }
 
   return (
     <main className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500">
       <DynamicBackground />
-      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/70 dark:bg-gray-900/70 backdrop-blur-md shadow-md' : ''
-        }`}>
+      <header
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+          scrolled
+            ? 'bg-white/70 dark:bg-gray-900/70 backdrop-blur-md shadow-md'
+            : ''
+        }`}
+      >
         <div className="container mx-auto px-4 py-6 flex justify-between items-center">
-          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Custom Domain Ready</h2>
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+            Custom Domain Ready
+          </h2>
           <div className="flex items-center space-x-4">
-            <Link target='_blank' href="https://github.com/marcolivierbouch/custom-domain-ready" passHref>
+            <Link
+              target="_blank"
+              href="https://github.com/marcolivierbouch/custom-domain-ready"
+              passHref
+            >
               <Button variant="outline">Get Started</Button>
             </Link>
             <button
               onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
               className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200"
-              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              aria-label={`Switch to ${
+                theme === 'dark' ? 'light' : 'dark'
+              } mode`}
             >
-              {theme === 'dark' ? <Sun className="w-6 h-6 text-yellow-400" /> : <Moon className="w-6 h-6 text-gray-700" />}
+              {theme === 'dark' ? (
+                <Sun className="w-6 h-6 text-yellow-400" />
+              ) : (
+                <Moon className="w-6 h-6 text-gray-700" />
+              )}
             </button>
           </div>
         </div>
       </header>
       <div className="container mx-auto px-4 pt-60 pb-32 text-center">
         <div className="flex justify-center mb-8">
-          <Link href="https://github.com/marcolivierbouch/custom-domain-ready" passHref>
+          <Link
+            href="https://github.com/marcolivierbouch/custom-domain-ready"
+            passHref
+          >
             <Button
               variant="outline"
               className="animate-border rounded-md bg-white bg-gradient-to-r from-primary to-primary bg-[length:400%_400%] p-0.5 transition-all"
@@ -67,22 +88,32 @@ export default function Home() {
           </Link>
         </div>
         <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-center text-gray-800 dark:text-gray-100">
-          Ship custom domain support<br /><span className="text-gray-600 dark:text-gray-400">in less than a day</span>
+          Ship custom domain support
+          <br />
+          <span className="text-gray-600 dark:text-gray-400">
+            in less than a day
+          </span>
         </h1>
         <p className="mt-4 text-center text-lg text-gray-600 dark:text-gray-300">
           Totally free — Host your custom domain solution in your Vercel account
         </p>
         <div className="mt-8 flex justify-center">
-          <Link href="https://github.com/marcolivierbouch/custom-domain-ready" passHref>
-            <Button variant={"outline"} size="lg"> Add custom domains to your SaaS </Button>
+          <Link
+            href="https://github.com/marcolivierbouch/custom-domain-ready"
+            passHref
+          >
+            <Button variant={'outline'} size="lg">
+              {' '}
+              Add custom domains to your SaaS{' '}
+            </Button>
           </Link>
         </div>
       </div>
-      <KeyBenefits/>
+      <KeyBenefits />
+      <FeaturesGrid />
       <UserFlow />
-      <Testimonials/>
+      <Testimonials />
       <Footer />
     </main>
-  )
+  );
 }
-
diff --git a/websites/customdomainready/app/providers.tsx b/websites/customdomainready/app/providers.tsx
@@ -1,9 +1,7 @@
+'use client';
 
-'use client'
-
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider } from 'next-themes';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider attribute="class">{children}</ThemeProvider>
+  return <ThemeProvider attribute="class">{children}</ThemeProvider>;
 }
-
diff --git a/websites/customdomainready/components/Footer.tsx b/websites/customdomainready/components/Footer.tsx
@@ -11,11 +11,7 @@ export function Footer() {
             &copy; 2024 CustomDomainReady. All rights reserved.
           </p>
           <div className="flex space-x-4 mt-4 md:mt-0">
-            <Button
-              variant="ghost"
-              size="icon"
-              asChild
-            >
+            <Button variant="ghost" size="icon" asChild>
               <Link
                 href="https://github.com/marcolivierbouch/custom-domain-ready"
                 target="_blank"
@@ -31,4 +27,3 @@ export function Footer() {
     </footer>
   );
 }
-
diff --git a/websites/customdomainready/components/UserFlow.tsx b/websites/customdomainready/components/UserFlow.tsx
@@ -62,7 +62,10 @@ export function UserFlow() {
                   </h3>
                 </div>
                 {index < steps.length - 1 && (
-                  <ArrowRight className="text-muted-foreground ml-10 mx-4" size={32} />
+                  <ArrowRight
+                    className="text-muted-foreground ml-10 mx-4"
+                    size={32}
+                  />
                 )}
               </div>
             ))}
@@ -90,4 +93,3 @@ export function UserFlow() {
     </section>
   );
 }
-