From 04883d280c86b7df1746afca31e4c9a0ab25db62 Mon Sep 17 00:00:00 2001 From: marcolivierbouch Date: Fri, 29 Nov 2024 07:38:20 -0500 Subject: [PATCH] feat: update website with more content and new theme --- pnpm-lock.yaml | 87 +++++++++++ websites/customdomainready/app/layout.tsx | 54 ++++--- websites/customdomainready/app/page.tsx | 140 +++++++++--------- websites/customdomainready/app/providers.tsx | 9 ++ .../customdomainready/components/Footer.tsx | 62 +++----- .../components/ParticleBackground.tsx | 97 ------------ .../customdomainready/components/UserFlow.tsx | 19 +-- .../components/dynamic-background.tsx | 108 ++++++++++++++ .../components/key-benefits.tsx | 40 +++++ .../components/providers.tsx | 8 + .../components/testimonials.tsx | 42 ++++++ .../components/ui/avatar.tsx | 50 +++++++ websites/customdomainready/package.json | 2 + websites/customdomainready/tailwind.config.js | 77 ++++++++++ 14 files changed, 558 insertions(+), 237 deletions(-) create mode 100644 websites/customdomainready/app/providers.tsx delete mode 100644 websites/customdomainready/components/ParticleBackground.tsx create mode 100644 websites/customdomainready/components/dynamic-background.tsx create mode 100644 websites/customdomainready/components/key-benefits.tsx create mode 100644 websites/customdomainready/components/providers.tsx create mode 100644 websites/customdomainready/components/testimonials.tsx create mode 100644 websites/customdomainready/components/ui/avatar.tsx create mode 100644 websites/customdomainready/tailwind.config.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 77bc2a7..c386f72 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -238,6 +238,9 @@ importers: '@customdomainready/sdk': specifier: workspace:* version: link:../../packages/sdk + '@radix-ui/react-avatar': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) '@radix-ui/react-label': specifier: ^2.1.0 version: 2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) @@ -262,6 +265,9 @@ importers: next: specifier: 14.2.15 version: 14.2.15(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) + next-themes: + specifier: ^0.4.3 + version: 0.4.3(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) npm: specifier: ^10.9.1 version: 10.9.1 @@ -1043,6 +1049,19 @@ packages: engines: {node: '>=18'} hasBin: true + '@radix-ui/react-avatar@1.1.1': + resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-compose-refs@1.1.0': resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} peerDependencies: @@ -1052,6 +1071,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-context@1.1.1': + resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-label@2.1.0': resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==} peerDependencies: @@ -1087,6 +1115,24 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-callback-ref@1.1.0': + resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-layout-effect@1.1.0': + resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@rollup/rollup-android-arm-eabi@4.14.1': resolution: {integrity: sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==} cpu: [arm] @@ -2881,6 +2927,12 @@ packages: natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + next-themes@0.4.3: + resolution: {integrity: sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==} + peerDependencies: + react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc + next@14.2.15: resolution: {integrity: sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==} engines: {node: '>=18.17.0'} @@ -4838,12 +4890,30 @@ snapshots: dependencies: playwright: 1.45.3 + '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)': + dependencies: + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607) + react: 19.0.0-rc-cc1ec60d0d-20240607 + react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607)': dependencies: react: 19.0.0-rc-cc1ec60d0d-20240607 optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-context@1.1.1(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607)': + dependencies: + react: 19.0.0-rc-cc1ec60d0d-20240607 + optionalDependencies: + '@types/react': 18.3.12 + '@radix-ui/react-label@2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)': dependencies: '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607) @@ -4869,6 +4939,18 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607)': + dependencies: + react: 19.0.0-rc-cc1ec60d0d-20240607 + optionalDependencies: + '@types/react': 18.3.12 + + '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.12)(react@19.0.0-rc-cc1ec60d0d-20240607)': + dependencies: + react: 19.0.0-rc-cc1ec60d0d-20240607 + optionalDependencies: + '@types/react': 18.3.12 + '@rollup/rollup-android-arm-eabi@4.14.1': optional: true @@ -7028,6 +7110,11 @@ snapshots: natural-compare@1.4.0: {} + next-themes@0.4.3(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607): + dependencies: + react: 19.0.0-rc-cc1ec60d0d-20240607 + react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607) + next@14.2.15(@opentelemetry/api@1.9.0)(@playwright/test@1.45.3)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607): dependencies: '@next/env': 14.2.15 diff --git a/websites/customdomainready/app/layout.tsx b/websites/customdomainready/app/layout.tsx index 4dc8fea..a7d8848 100644 --- a/websites/customdomainready/app/layout.tsx +++ b/websites/customdomainready/app/layout.tsx @@ -1,26 +1,40 @@ -import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; -import './globals.css'; -import { Analytics } from "@vercel/analytics/react" - -const inter = Inter({ subsets: ['latin'] }); +import { Providers } from './providers' +import './globals.css' +import { Metadata } from 'next' export const metadata: Metadata = { - title: - 'CustomDomainReady - Add custom domain support to your SaaS in minutes', - description: - 'Ship custom domain support in less than a day. Totally free — Host your custom domain solution in your Vercel account.', -}; + title: 'Custom Domain Ready', + 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', + url: 'https://yourdomain.com', + siteName: 'Custom Domain Ready', + //images: [ + // { + // url: 'https://yourdomain.com/og-image.png', + // width: 800, + // height: 600, + // alt: 'Custom Domain Ready', + // }, + //], + locale: 'en_US', + type: 'website', + }, + twitter: { + card: 'summary_large_image', + title: 'Custom Domain Ready', + 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 ( - - - {children} + + + {children} + - ); + ) } diff --git a/websites/customdomainready/app/page.tsx b/websites/customdomainready/app/page.tsx index 2c26d54..2e8b967 100644 --- a/websites/customdomainready/app/page.tsx +++ b/websites/customdomainready/app/page.tsx @@ -1,80 +1,86 @@ -import Link from 'next/link'; -import { Github } from 'lucide-react'; -import { Button } from '@/components/ui/button'; -import { ParticleBackground } from '@/components/ParticleBackground'; -import { UserFlow } from '@/components/UserFlow'; -import { Footer } from '@/components/Footer'; +'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' export default function Home() { - return ( -
- - {/* Background gradient effects */} -
-
-
-
+ const [mounted, setMounted] = useState(false) + const [scrolled, setScrolled] = useState(false) + const { theme, setTheme } = useTheme() - {/* Navigation */} - + const handleScroll = () => { + setScrolled(window.scrollY > 20) + } - {/* Hero Section */} -
- + window.addEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) + }, []) -

- Ship custom domain support - in less than a day -

+ if (!mounted) { + return null + } -

+ return ( +

+ +
+
+

Custom Domain Ready

+
+ + +
+
+
+
+
+ + + +
+

+ Ship custom domain support
in less than a day +

+

Totally free — Host your custom domain solution in your Vercel account

- - - -
- - {/* User Flow Section */} +
+
+ - - {/* Footer */} +
-
- ); + + ) } + diff --git a/websites/customdomainready/app/providers.tsx b/websites/customdomainready/app/providers.tsx new file mode 100644 index 0000000..be4e037 --- /dev/null +++ b/websites/customdomainready/app/providers.tsx @@ -0,0 +1,9 @@ + +'use client' + +import { ThemeProvider } from 'next-themes' + +export function Providers({ children }: { children: React.ReactNode }) { + return {children} +} + diff --git a/websites/customdomainready/components/Footer.tsx b/websites/customdomainready/components/Footer.tsx index 33fb336..d9a9a8d 100644 --- a/websites/customdomainready/components/Footer.tsx +++ b/websites/customdomainready/components/Footer.tsx @@ -1,60 +1,34 @@ import Link from 'next/link'; -import { Github, Twitter, Linkedin } from 'lucide-react'; +import { Github } from 'lucide-react'; +import { Button } from '@/components/ui/button'; export function Footer() { return ( -