Skip to content

Enhance Theme with Modern Design System #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance Theme with Modern Design System #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 92 additions & 61 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
Expand All @@ -8,6 +9,32 @@
font-family: Parkinsans, sans-serif;
}

.font-inter {
font-family: 'Inter', sans-serif;
}

.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.glass-morphism {
backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.125);
}

.dark .glass-morphism {
background-color: rgba(17, 25, 40, 0.75);
border: 1px solid rgba(255, 255, 255, 0.125);
}

@layer utilities {
.text-balance {
text-wrap: balance;
Expand All @@ -17,72 +44,72 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--popover-foreground: 222 47% 11%;
--primary: 221 83% 53%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222 47% 11%;
--muted: 210 40% 96%;
--muted-foreground: 215 16% 47%;
--accent: 210 40% 96%;
--accent-foreground: 222 47% 11%;
--destructive: 0 84% 60%;
--destructive-foreground: 210 40% 98%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 221 83% 53%;
--chart-1: 221 83% 53%;
--chart-2: 142 71% 45%;
--chart-3: 262 83% 58%;
--chart-4: 331 78% 58%;
--chart-5: 35 91% 65%;
--radius: 0.75rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-primary: 221 83% 53%;
--sidebar-primary-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 222 47% 11%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--background: 222 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217 91% 60%;
--primary-foreground: 222 47% 11%;
--secondary: 217 33% 17%;
--secondary-foreground: 210 40% 98%;
--muted: 217 33% 17%;
--muted-foreground: 215 20% 65%;
--accent: 217 33% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 217 33% 17%;
--input: 217 33% 17%;
--ring: 217 91% 60%;
--chart-1: 217 91% 60%;
--chart-2: 142 71% 45%;
--chart-3: 262 83% 58%;
--chart-4: 331 78% 58%;
--chart-5: 35 91% 65%;
--sidebar-background: 222 84% 4.9%;
--sidebar-foreground: 210 40% 98%;
--sidebar-primary: 217 91% 60%;
--sidebar-primary-foreground: 222 47% 11%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 217 33% 17%;
--sidebar-ring: 217 91% 60%;
}
}

Expand All @@ -91,6 +118,10 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground font-inter;
font-feature-settings: 'rlig' 1, 'calt' 1;
}
h1, h2, h3, h4, h5, h6 {
font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
}
}
14 changes: 12 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Metadata } from 'next'
import localFont from 'next/font/local'
import { ThemeProvider } from 'next-themes'
import './globals.css'

const geistSans = localFont({
Expand All @@ -24,8 +25,17 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
<html lang="en" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
)
}
1 change: 0 additions & 1 deletion app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client"

import { Hero } from '@/components/ui/animated-hero'
import Image from 'next/image'

export default function Home() {
return <Hero />
Expand Down
120 changes: 94 additions & 26 deletions components/ui/animated-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
import { motion } from 'framer-motion'
import { MoveRight, PhoneCall } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ThemeToggle } from '@/components/ui/theme-toggle'
import Image from 'next/image'

function Hero() {
Expand All @@ -20,38 +21,59 @@ function Hero() {
}, [titleNumber, titles])

return (
<div className="w-full">
<div className="container mx-auto">
<div className="flex flex-col items-center justify-center gap-8 py-20 lg:py-40">
<div>
<div className="w-full min-h-screen relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-blue-950 dark:to-purple-950" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-100 via-transparent to-transparent dark:from-blue-800/20" />

<div className="absolute top-6 right-6 z-20">
<ThemeToggle />
</div>

<div className="container mx-auto relative z-10">
<div className="flex flex-col items-center justify-center gap-12 py-20 lg:py-40">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="animate-float"
>
<a
href="https://codeguide.dev"
target="_blank"
rel="noopener noreferrer"
className="flex flex-row items-center gap-2"
className="flex flex-row items-center gap-3 group transition-transform hover:scale-105 duration-300"
>
<Image src="/codeguide-logo.png" alt="CodeGuide" width={42} height={42} />
<span className="logo-text text-3xl font-bold">CodeGuide</span>
<div className="p-2 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border border-white/20 dark:border-gray-700/50 shadow-lg group-hover:shadow-xl transition-all duration-300">
<Image src="/codeguide-logo.png" alt="CodeGuide" width={42} height={42} className="rounded-lg" />
</div>
<span className="logo-text text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
CodeGuide
</span>
</a>
</div>
<div className="flex flex-col gap-4">
<h1 className="font-regular max-w-2xl text-center text-5xl tracking-tighter md:text-7xl">
<span className="relative flex w-full justify-center overflow-hidden text-center md:mb-1">
&nbsp;
</motion.div>

<div className="flex flex-col gap-8 items-center">
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="font-inter font-extrabold max-w-4xl text-center text-5xl tracking-tight md:text-7xl lg:text-8xl"
>
<span className="relative flex w-full justify-center overflow-hidden text-center md:mb-2">
{titles.map((title, index) => (
<motion.span
key={index}
className="absolute font-semibold"
initial={{ opacity: 0, y: '-100' }}
transition={{ type: 'spring', stiffness: 50 }}
className="absolute font-extrabold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent"
initial={{ opacity: 0, y: 100 }}
transition={{ type: 'spring', stiffness: 100, damping: 30 }}
animate={
titleNumber === index
? {
y: 0,
opacity: 1,
}
: {
y: titleNumber > index ? -150 : 150,
y: titleNumber > index ? -100 : 100,
opacity: 0,
}
}
Expand All @@ -60,19 +82,65 @@ function Hero() {
</motion.span>
))}
</span>
<span className="text-spektr-cyan-50">Starter Kit Lite</span>
</h1>
<span className="text-gray-700 dark:text-gray-300">
Starter Kit
<span className="ml-3 px-4 py-2 text-base font-medium bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full shadow-lg">
Pro
</span>
</span>
</motion.h1>

<p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:mt-8 md:text-xl">
Start building with a modern web application template featuring authentication,
database integration. Built with Next.js 14, Clerk, Supabase.
</p>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="max-w-3xl text-center text-lg leading-relaxed tracking-tight text-gray-600 dark:text-gray-400 md:text-xl lg:text-2xl font-medium"
>
Start building with a modern web application template featuring{' '}
<span className="text-blue-600 dark:text-blue-400 font-semibold">authentication</span>,{' '}
<span className="text-purple-600 dark:text-purple-400 font-semibold">database integration</span>, and{' '}
<span className="text-blue-600 dark:text-blue-400 font-semibold">premium components</span>.
<br className="hidden md:block" />
Built with Next.js 14, Clerk, and Supabase.
</motion.p>
</div>
<div className="flex flex-row gap-3">
<Button size="lg" className="gap-4">
Get Started <MoveRight className="h-4 w-4" />

<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex flex-col sm:flex-row gap-4"
>
<Button
size="lg"
className="gap-4 px-8 py-6 text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-0 shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
>
Get Started <MoveRight className="h-5 w-5" />
</Button>
</div>
<Button
variant="outline"
size="lg"
className="gap-4 px-8 py-6 text-lg font-semibold border-2 border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm hover:bg-white/80 dark:hover:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-300"
>
<PhoneCall className="h-5 w-5" /> Book a Demo
</Button>
</motion.div>

<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.8 }}
className="mt-12 flex flex-col items-center gap-4"
>
<p className="text-sm text-gray-500 dark:text-gray-400 font-medium">
Trusted by developers at
</p>
<div className="flex items-center gap-8 opacity-60 hover:opacity-100 transition-opacity duration-300">
<div className="h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
<div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
<div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
</div>
</motion.div>
</div>
</div>
</div>
Expand Down
Loading