Skip to content

Commit

Permalink
feat: update website with more content and new theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcolivierbouch
marcolivierbouch committed Nov 29, 2024
1 parent 57351ac commit 04883d2
Show file tree
Hide file tree
Showing 14 changed files with 558 additions and 237 deletions.
87 changes: 87 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 34 additions & 20 deletions websites/customdomainready/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<html lang="en" className="bg-black">
<Analytics />
<body className={inter.className}>{children}</body>
<html lang="en" suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
)
}
140 changes: 73 additions & 67 deletions websites/customdomainready/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="min-h-screen bg-black relative overflow-hidden">
<ParticleBackground />
{/* Background gradient effects */}
<div className="absolute inset-0 bg-gradient-to-br via-black to-black" />
<div className="absolute inset-0">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.1)_0%,transparent_0%)]" />
</div>
const [mounted, setMounted] = useState(false)
const [scrolled, setScrolled] = useState(false)
const { theme, setTheme } = useTheme()

{/* Navigation */}
<nav className="relative z-20 container mx-auto px-4 py-6 flex items-center justify-between">
<Link href="/" className="text-white text-xl font-semibold">
CustomDomainReady
</Link>
useEffect(() => {
setMounted(true)

<div className="hidden md:flex items-center space-x-8">
{/* <Link href="/documentation" className="text-gray-300 hover:text-white transition-colors">
Documentation
</Link>
<Link href="/pricing" className="text-gray-300 hover:text-white transition-colors">
Pricing
</Link>
<Link href="/company" className="text-gray-300 hover:text-white transition-colors">
Company
</Link>
<Link href="/blog" className="text-gray-300 hover:text-white transition-colors">
Blog
</Link> */}
<Button variant="outline" className="text-white" asChild>
<Link href="https://github.com/marcolivierbouch/custom-domain-ready">
Get CustomDomainReady
</Link>
</Button>
</div>
</nav>
const handleScroll = () => {
setScrolled(window.scrollY > 20)
}

{/* Hero Section */}
<main className="relative z-20 container mx-auto px-4 pt-20 pb-32 text-center">
<Button variant="outline" size="sm" className="mb-8 bg-white" asChild>
<Link
href="https://github.com/marcolivierbouch/custom-domain-ready"
className="flex items-center gap-2"
>
<Github className="w-4 h-4" />
Star us on Github!
</Link>
</Button>
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])

<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 max-w-4xl mx-auto leading-tight">
Ship custom domain support
<span className="block text-gray-400 mt-2">in less than a day</span>
</h1>
if (!mounted) {
return null
}

<p className="text-gray-400 text-xl mb-12">
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' : ''
}`}>
<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>
<div className="flex items-center space-x-4">
<Button variant="outline">Get Started</Button>
<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`}
>
{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>
<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"
>
<span className="flex items-center space-x-2 bg-white dark:bg-gray-900 rounded-md px-4 py-2">
<Github className="w-5 h-5" />
<span>Star us on Github!</span>
</span>
</Button>
</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>
</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>

<Button size="lg" className="text-lg px-8 border bg-white" asChild>
<Link href="https://github.com/marcolivierbouch/custom-domain-ready">
Add custom domains to your SaaS
<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>
</Button>
</main>

{/* User Flow Section */}
</div>
</div>
<KeyBenefits/>
<UserFlow />

{/* Footer */}
<Testimonials/>
<Footer />
</div>
);
</main>
)
}

9 changes: 9 additions & 0 deletions websites/customdomainready/app/providers.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

'use client'

import { ThemeProvider } from 'next-themes'

export function Providers({ children }: { children: React.ReactNode }) {
return <ThemeProvider attribute="class">{children}</ThemeProvider>
}

Loading

0 comments on commit 04883d2

Please sign in to comment.