Skip to content

Commit 48dea01

Browse files
Code2With-PratikCode2With-Pratik
authored
Merge pull request #5 from Pratik-UI-UX/ui/improvments
nav bar mobile ui Fix and hero sectoin revamped
2 parents 3f1966d + fdd1f3c commit 48dea01

9 files changed

Lines changed: 305 additions & 153 deletions

File tree

‎public/icons/logo.png‎

11.5 KB
Loading

‎src/app/globals.css‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
@import "tailwindcss";
22

33
@theme {
4-
--color-cream: #fffdf7;
5-
--color-charcoal: #18181b;
4+
--color-cream: #fffff0; /* Ivory */
5+
--color-charcoal: #000000; /* Deep black */
66
--color-zinc-deep: #09090b;
77

88
--color-background: var(--color-cream);
99
--color-foreground: var(--color-charcoal);
1010

1111
--shadow-glass: 0 8px 32px rgb(0 0 0 / 0.08);
1212
--shadow-glass-lg: 0 24px 80px rgb(0 0 0 / 0.12);
13+
--blur-glass: 12px; /* Reduced blur */
1314

14-
--blur-glass: 20px;
15+
--rotate-215: 215deg;
1516
}
1617

1718
@layer utilities {
@@ -21,7 +22,7 @@
2122

2223
/* Landing UI: light mode uses deep black ink; dark mode uses near-white */
2324
.text-ink {
24-
@apply text-zinc-950 dark:text-zinc-50;
25+
@apply text-black dark:text-zinc-50;
2526
}
2627

2728
.text-ink-muted {
@@ -36,11 +37,11 @@
3637
@layer base {
3738
:root {
3839
color-scheme: light;
39-
--page-bg: #fffdf7;
40-
--text-primary: #18181b;
41-
--glass-bg: rgb(255 253 247 / 0.72);
42-
--glass-border: rgb(24 24 27 / 0.08);
43-
--muted: rgb(24 24 27 / 0.55);
40+
--page-bg: #fffff0; /* Ivory */
41+
--text-primary: #000000; /* Black */
42+
--glass-bg: rgb(255 255 240 / 0.65); /* Ivory glass */
43+
--glass-border: rgb(0 0 0 / 0.08);
44+
--muted: rgb(0 0 0 / 0.65);
4445
--accent: #6366f1;
4546
--accent-soft: rgb(99 102 241 / 0.15);
4647
}
@@ -63,10 +64,31 @@
6364
body {
6465
background-color: var(--page-bg);
6566
color: var(--text-primary);
67+
font-family: var(--font-arima), ui-serif, Georgia, serif;
6668
font-feature-settings: "rlig" 1, "calt" 1;
6769
}
6870
}
6971

72+
@layer utilities {
73+
.animate-meteor {
74+
animation: meteor 5s linear infinite;
75+
}
76+
}
77+
78+
@keyframes meteor {
79+
0% {
80+
transform: rotate(215deg) translateX(0);
81+
opacity: 1;
82+
}
83+
70% {
84+
opacity: 1;
85+
}
86+
100% {
87+
transform: rotate(215deg) translateX(-500px);
88+
opacity: 0;
89+
}
90+
}
91+
7092
@utility glass-panel {
7193
background: var(--glass-bg);
7294
backdrop-filter: blur(var(--blur-glass));

‎src/app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ export const metadata: Metadata = {
4848
index: true,
4949
follow: true,
5050
},
51+
icons: {
52+
icon: "/icons/logo.png",
53+
shortcut: "/icons/logo.png",
54+
},
5155
};
5256

5357
export const viewport: Viewport = {
@@ -64,7 +68,7 @@ export default function RootLayout({
6468
}>) {
6569
return (
6670
<html lang="en" suppressHydrationWarning>
67-
<body className={`${arima.variable} min-h-screen antialiased`}>
71+
<body className={`${arima.variable} antialiased`}>
6872
<ThemeProvider>
6973
<SiteChrome>{children}</SiteChrome>
7074
</ThemeProvider>

‎src/components/brand-logo.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
"use client";
2-
1+
import Image from "next/image";
32
import { motion } from "framer-motion";
43
import { cn } from "@/lib/utils";
54

@@ -9,17 +8,22 @@ type Props = {
98

109
export function BrandLogo({ className }: Props) {
1110
return (
12-
<div className={cn("flex items-center gap-2.5", className)}>
13-
<motion.span
14-
className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-900 text-lg font-bold text-[#FFFDF7] shadow-inner dark:bg-zinc-100 dark:text-zinc-900"
15-
whileHover={{ scale: 1.04, rotate: -3 }}
16-
transition={{ type: "spring", stiffness: 400, damping: 18 }}
17-
aria-hidden
11+
<div className={cn("flex items-center gap-1.5 sm:gap-2", className)}>
12+
<motion.div
13+
className="relative h-7 w-7 sm:h-8 sm:w-8 overflow-hidden rounded-lg sm:rounded-xl shadow-sm"
14+
whileHover={{ scale: 1.05 }}
15+
transition={{ type: "spring", stiffness: 400, damping: 20 }}
1816
>
19-
N
20-
</motion.span>
21-
<span className="text-lg font-semibold tracking-tight text-zinc-950 dark:text-zinc-50">
22-
NexaUI
17+
<Image
18+
src="/icons/logo.png"
19+
alt="NexaUI Logo"
20+
fill
21+
className="object-cover"
22+
priority
23+
/>
24+
</motion.div>
25+
<span className="text-lg font-bold tracking-tight text-black dark:text-zinc-50">
26+
Nexa UI
2327
</span>
2428
</div>
2529
);

‎src/components/hero.tsx‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ArrowRight, Copy, Terminal } from "lucide-react";
55
import Link from "next/link";
66
import { useCallback, useRef, useState } from "react";
77
import { Safari } from "@/components/ui/safari";
8+
import { Meteors } from "@/components/ui/meteors";
89
import { cn } from "@/lib/utils";
910

1011
const INSTALL = "npm install nexaui";
@@ -18,10 +19,13 @@ export function Hero() {
1819
offset: ["start start", "end start"],
1920
});
2021

21-
const demoOpacity = useTransform(scrollYProgress, [0, 0.55], [1, 0]);
22-
const demoY = useTransform(scrollYProgress, [0, 0.55], [0, 56]);
23-
const demoBlurPx = useTransform(scrollYProgress, [0, 0.45], [0, 8]);
24-
const demoFilter = useTransform(demoBlurPx, (b) => `blur(${b}px)`);
22+
// Smooth transitions for scroll
23+
const demoOpacity = useTransform(scrollYProgress, [0, 0.4], [1, 0]);
24+
const demoY = useTransform(scrollYProgress, [0, 0.4], [0, 40]);
25+
26+
// FIXED: Removed the blur transform to keep Safari sharp while scrolling
27+
// If you still want a tiny bit of blur, change [0, 0] to [0, 2]
28+
const demoFilter = useTransform(scrollYProgress, [0, 0.45], ["blur(0px)", "blur(0px)"]);
2529

2630
const copyInstall = useCallback(async () => {
2731
try {
@@ -36,36 +40,46 @@ export function Hero() {
3640
return (
3741
<section
3842
ref={sectionRef}
39-
className="relative overflow-hidden px-4 pb-24 pt-28 md:pb-32 md:pt-36"
43+
// FIXED: Changed overflow to visible so meteors don't get cut off
44+
className="relative min-h-screen overflow-visible px-4 pb-24 pt-28 md:pb-32 md:pt-36"
4045
>
46+
{/* 1. BACKGROUND GRADIENTS LAYER */}
4147
<div
4248
aria-hidden
4349
className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_90%_70%_at_50%_-30%,rgb(99_102_241/0.18),transparent),radial-gradient(ellipse_50%_45%_at_100%_0%,rgb(244_114_182/0.1),transparent)] dark:bg-[radial-gradient(ellipse_90%_70%_at_50%_-30%,rgb(99_102_241/0.26),transparent)]"
4450
/>
51+
52+
{/* 2. FIXED METEORS: Moved to -z-20 and set to absolute inset-0 */}
53+
<div className="pointer-events-none absolute inset-0 -z-20 h-full w-full overflow-hidden">
54+
<Meteors number={40} />
55+
</div>
56+
57+
{/* Top Hairline Border */}
4558
<div
4659
aria-hidden
4760
className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-px bg-gradient-to-r from-transparent via-zinc-300/70 to-transparent dark:via-white/15"
4861
/>
4962

50-
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-14 lg:gap-20">
63+
<div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center gap-14 lg:gap-20">
5164
<div className="flex w-full flex-col items-center gap-8 text-center">
52-
<div className="mx-auto max-w-3xl space-y-5">
53-
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-ink-subtle">
65+
<div className="mx-auto max-w-3xl space-y-4 sm:space-y-5">
66+
<p className="text-[10px] sm:text-xs font-semibold uppercase tracking-[0.28em] text-ink-subtle">
5467
NexaUI · App Router kit
5568
</p>
5669
<h1
5770
className={cn(
58-
"font-arima text-balance text-4xl font-bold leading-[1.05] text-ink md:text-6xl lg:text-[4.5rem]",
71+
"font-arima text-balance text-3xl font-bold leading-[1.1] text-ink sm:text-4xl md:text-6xl lg:text-[4.5rem]",
5972
)}
6073
>
6174
Build glass-native interfaces without the noise.
6275
</h1>
63-
<p className="text-balance text-base text-ink-muted md:text-lg">
76+
<p className="text-balance text-sm sm:text-base text-ink-muted md:text-lg">
6477
A minimalist launchpad: Safari-framed previews, spotlight search,
65-
and motion that respects scroll. Cream light, zinc-deep dark.
78+
and motion that respects scroll. Ivory light, zinc-deep dark.
6679
</p>
6780
</div>
6881

82+
{/* Install Terminal UI */}
6983
<div className="flex w-full max-w-2xl flex-col items-center justify-center gap-3 sm:flex-row sm:items-stretch">
7084
<div className="flex w-full min-w-0 flex-1 items-center gap-2 rounded-2xl border border-zinc-200/90 bg-white/80 px-4 py-3 font-mono text-xs text-ink shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-zinc-950/70 dark:text-zinc-50">
7185
<Terminal className="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" aria-hidden />
@@ -93,20 +107,24 @@ export function Hero() {
93107
</div>
94108
</div>
95109

110+
{/* 3. SAFARI PREVIEW: Cleaned up transforms */}
96111
<motion.div
97112
style={{
98113
opacity: demoOpacity,
99114
y: demoY,
100115
filter: demoFilter,
101116
}}
102-
className="relative w-full max-w-6xl px-0 sm:max-w-6xl lg:max-w-7xl xl:max-w-[90rem] will-change-[opacity,transform,filter]"
117+
className="relative w-full max-w-6xl px-0 sm:max-w-6xl lg:max-w-7xl xl:max-w-[90rem] will-change-[opacity,transform]"
103118
>
119+
{/* Subtle Glow behind Safari */}
104120
<div
105121
className="pointer-events-none absolute -inset-8 -z-10 rounded-[2.5rem] bg-gradient-to-br from-indigo-500/12 via-fuchsia-500/8 to-transparent blur-3xl dark:from-indigo-400/18"
106122
aria-hidden
107123
/>
124+
108125
<Safari size="hero" url="https://nexaui.dev/preview/dashboard">
109126
<div className="relative mx-auto w-full max-w-5xl space-y-6">
127+
{/* Internal Safari Gradients */}
110128
<div
111129
className="pointer-events-none absolute inset-x-0 top-0 z-20 h-32 bg-gradient-to-b from-[#FFFDF7] via-[#FFFDF7]/60 to-transparent dark:from-[#09090B] dark:via-[#09090B]/60"
112130
aria-hidden
@@ -116,15 +134,17 @@ export function Hero() {
116134
aria-hidden
117135
/>
118136

119-
<div className="relative z-10 space-y-5 pt-2">
137+
<div className="space-y-5 pt-2">
120138
<div className="flex flex-wrap items-center justify-between gap-3">
121-
<p className="text-xs font-semibold uppercase tracking-wider text-ink-subtle">
139+
<p className="text-xs font-semibold uppercase tracking-wider">
122140
Live preview
123141
</p>
124142
<span className="rounded-full bg-indigo-500/15 px-3 py-1 text-[11px] font-semibold text-indigo-800 dark:text-indigo-200">
125143
Magic UI · Safari
126144
</span>
127145
</div>
146+
147+
{/* Dashboard Grid */}
128148
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
129149
<div className="rounded-2xl border border-zinc-200/80 bg-white/85 p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900/75">
130150
<p className="text-sm font-semibold text-ink">Glass panel</p>
@@ -145,6 +165,8 @@ export function Hero() {
145165
</p>
146166
</div>
147167
</div>
168+
169+
{/* Skeleton Loader */}
148170
<div className="rounded-2xl border border-dashed border-zinc-300/80 bg-white/55 p-5 dark:border-white/15 dark:bg-zinc-950/45">
149171
<div className="flex items-center gap-4">
150172
<div className="h-14 w-14 shrink-0 rounded-2xl bg-gradient-to-br from-indigo-500 to-fuchsia-500 opacity-95 shadow-lg" />
@@ -162,4 +184,4 @@ export function Hero() {
162184
</div>
163185
</section>
164186
);
165-
}
187+
}

0 commit comments

Comments
 (0)