Skip to content

Commit bf72092

Browse files
ajeaiexecutesajeaiexecutes
authored
Merge pull request #133 from devxtra-community/dev
Dev
2 parents 9b20f95 + a130322 commit bf72092

8 files changed

Lines changed: 532 additions & 326 deletions

File tree

‎apps/web/app/gig-list/page.tsx‎

Lines changed: 258 additions & 221 deletions
Large diffs are not rendered by default.

‎apps/web/app/globals.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,21 @@
129129
html {
130130
@apply font-sans;
131131
}
132+
133+
/* Custom minimal scrollbar */
134+
::-webkit-scrollbar {
135+
width: 6px;
136+
}
137+
::-webkit-scrollbar-track {
138+
background: transparent;
139+
}
140+
::-webkit-scrollbar-thumb {
141+
background: rgba(0, 0, 0, 0.1);
142+
border-radius: 10px;
143+
}
144+
::-webkit-scrollbar-thumb:hover {
145+
background: rgba(16, 185, 129, 0.4);
146+
}
132147
}
133148

134149
@keyframes progress-flow {
@@ -140,4 +155,24 @@
140155
.animate-progress-flow {
141156
background-size: 200% 200%;
142157
animation: progress-flow 3s ease infinite;
143-
}
158+
}
159+
/* Lenis recommended CSS */
160+
html.lenis, html.lenis body {
161+
height: auto;
162+
}
163+
164+
.lenis.lenis-smooth {
165+
scroll-behavior: auto !important;
166+
}
167+
168+
.lenis.lenis-smooth [data-lenis-prevent] {
169+
overscroll-behavior: contain;
170+
}
171+
172+
.lenis.lenis-stopped {
173+
overflow: hidden;
174+
}
175+
176+
.lenis.lenis-scrolling iframe {
177+
pointer-events: none;
178+
}

‎apps/web/app/layout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
33

44
import "./globals.css";
55
import AuthInitializer from "@/components/AuthInitializer";
6+
import SmoothScroll from "@/components/SmoothScroll";
67

78

89

@@ -26,8 +27,10 @@ export default function RootLayout({
2627
<body
2728
className="antialiased font-sans bg-[#F1F5F9]"
2829
>
29-
<AuthInitializer />
30-
{children}
30+
<SmoothScroll>
31+
<AuthInitializer />
32+
{children}
33+
</SmoothScroll>
3134
</body>
3235
</html>
3336
);

‎apps/web/app/page.tsx‎

Lines changed: 89 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,12 @@ interface Testimonial {
7878
function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
7979
const [index, setIndex] = useState(0);
8080
const [visibleCards, setVisibleCards] = useState(3);
81-
const ref = useRef(null);
82-
const isInView = useInView(ref, { once: true, amount: 0.1 });
81+
const sliderRef = useRef(null);
8382

8483
// Update visible cards on resize
8584
useEffect(() => {
8685
const handleResize = () => {
87-
setVisibleCards(window.innerWidth < 768 ? 1 : 3);
86+
setVisibleCards(window.innerWidth < 1024 ? (window.innerWidth < 640 ? 1 : 2) : 3);
8887
};
8988
handleResize();
9089
window.addEventListener("resize", handleResize);
@@ -105,20 +104,26 @@ function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
105104

106105
return (
107106
<motion.div
108-
ref={ref}
109-
initial={{ opacity: 0, y: 20 }}
110-
animate={isInView ? { opacity: 1, y: 0 } : {}}
111-
transition={{ duration: 0.8 }}
112-
className="relative w-full overflow-hidden"
107+
ref={sliderRef}
108+
initial={{ opacity: 1, y: 0 }}
109+
className="relative w-full overflow-hidden py-4"
113110
>
114111
<motion.div
115112
animate={{ x: `-${(index) * (100 / extendedTestimonials.length)}%` }}
116113
transition={{
117114
type: "spring",
118-
stiffness: 50,
115+
stiffness: 40,
119116
damping: 20,
120117
mass: 1
121118
}}
119+
onUpdate={() => {
120+
// If we've reached the end of the middle section, jump back seamlessly
121+
// Note: index calculation for seamless loop can be complex,
122+
// but for simple auto-slide, just keeping it in bounds is enough.
123+
if (index >= testimonials.length * 2) {
124+
setIndex(testimonials.length);
125+
}
126+
}}
122127
className="flex"
123128
style={{ width: `${(extendedTestimonials.length * 100) / visibleCards}%` }}
124129
>
@@ -172,7 +177,7 @@ function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
172177

173178
export default function HomePage() {
174179
return (
175-
<div className="min-h-screen bg-[#F1F5F9] text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
180+
<div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
176181
<Navbar />
177182

178183
<main>
@@ -293,64 +298,99 @@ export default function HomePage() {
293298
</div>
294299
</section>
295300

296-
{/* How it Works */}
297-
<section className="py-24 sm:py-32 relative overflow-hidden bg-white">
301+
{/* How it Works - Redesigned for Premium Minimal Look */}
302+
<section className="py-24 sm:py-40 relative overflow-hidden bg-white">
303+
{/* Subtle Background Pattern */}
304+
<div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#10b981 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
305+
298306
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 relative z-10">
299-
<div className="text-center max-w-2xl mx-auto mb-24">
300-
<span className="text-emerald-600 font-bold text-xs uppercase tracking-widest mb-4 inline-block">Simple Workflow</span>
301-
<h2 className="text-4xl md:text-5xl font-black text-slate-900 mb-6 tracking-tight">The Path to Success</h2>
302-
<p className="text-slate-500 font-medium text-lg leading-relaxed">
303-
Experience a streamlined collaboration process designed for elite speed.
307+
<div className="flex flex-col lg:flex-row lg:items-end justify-between mb-20 gap-8">
308+
<div className="max-w-2xl">
309+
<motion.div
310+
initial={{ opacity: 0, x: -20 }}
311+
whileInView={{ opacity: 1, x: 0 }}
312+
viewport={{ once: true }}
313+
className="flex items-center gap-3 mb-6"
314+
>
315+
<div className="w-10 h-[2px] bg-emerald-500" />
316+
<span className="text-emerald-600 font-bold text-xs uppercase tracking-[0.3em]">Execution Strategy</span>
317+
</motion.div>
318+
<h2 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter leading-[0.9]">
319+
The Path to <br />
320+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500">Perfect Synergy</span>
321+
</h2>
322+
</div>
323+
<p className="text-slate-500 font-medium text-lg max-w-md leading-relaxed border-l-2 border-slate-100 pl-8">
324+
We&apos;ve distilled months of collaboration overhead into three high-velocity steps.
304325
</p>
305326
</div>
306327

307-
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
328+
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
329+
{/* Connecting Line for Desktop */}
330+
<div className="hidden md:block absolute top-1/4 left-0 w-full h-[1px] bg-slate-100 z-0" />
331+
308332
{[
309333
{
310-
title: "Discover Talent",
311-
desc: "Browse a curated list of verified creators across every niche imaginable.",
334+
title: "Discovery",
335+
desc: "Our AI-driven engine filters through thousands to find your perfect niche matches.",
312336
icon: <Search className="w-6 h-6" />,
313-
color: "bg-blue-500"
337+
gradient: "from-blue-600 to-indigo-600"
314338
},
315339
{
316-
title: "Instant Booking",
317-
desc: "Check real-time availability and lock in your campaign with one click.",
318-
icon: <Calendar className="w-6 h-6" />,
319-
color: "bg-emerald-500"
340+
title: "Activation",
341+
desc: "One-click contracts and instant calendar syncing to launch your campaign at light speed.",
342+
icon: <Zap className="w-6 h-6" />,
343+
gradient: "from-emerald-500 to-teal-500"
320344
},
321345
{
322-
title: "Secure Delivery",
323-
desc: "Funds are released only when you're 100% satisfied with the results.",
346+
title: "Growth",
347+
desc: "Funds released on satisfaction, backed by real-time analytics and escrow protection.",
324348
icon: <CreditCard className="w-6 h-6" />,
325-
color: "bg-indigo-500"
349+
gradient: "from-slate-800 to-slate-900"
326350
}
327351
].map((step, i) => (
328352
<motion.div
329353
key={i}
330-
initial={{ opacity: 0, y: 20 }}
354+
initial={{ opacity: 0, y: 30 }}
331355
whileInView={{ opacity: 1, y: 0 }}
332356
viewport={{ once: true }}
333-
transition={{ delay: i * 0.2 }}
334-
className="relative p-8 sm:p-10 rounded-3xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.1)] transition-all duration-500 group"
357+
transition={{ delay: i * 0.2, duration: 0.8 }}
358+
className="relative group"
335359
>
336-
<div className="absolute top-10 right-10 text-6xl font-black text-slate-200/50 group-hover:text-emerald-500/10 transition-colors">0{i + 1}</div>
337-
<div className={`w-14 h-14 rounded-2xl mb-8 flex items-center justify-center text-white shadow-lg ${step.color}`}>
338-
{step.icon}
360+
<div className="relative z-10">
361+
<div className="mb-12 relative inline-block">
362+
<div className={`w-20 h-20 rounded-[2rem] bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white shadow-2xl shadow-emerald-200/20 group-hover:scale-110 transition-transform duration-500`}>
363+
{step.icon}
364+
</div>
365+
<div className="absolute -top-4 -right-4 w-10 h-10 rounded-full bg-white border border-slate-100 flex items-center justify-center text-xs font-black text-slate-900 shadow-sm">
366+
0{i + 1}
367+
</div>
368+
</div>
369+
370+
<h3 className="text-3xl font-black text-slate-900 mb-6 tracking-tight group-hover:text-emerald-600 transition-colors">
371+
{step.title}
372+
</h3>
373+
<p className="text-slate-500 font-medium leading-relaxed mb-8 group-hover:text-slate-700 transition-colors">
374+
{step.desc}
375+
</p>
376+
377+
<div className="w-0 group-hover:w-full h-[2px] bg-emerald-500 transition-all duration-500" />
339378
</div>
340-
<h3 className="text-2xl font-bold text-slate-900 mb-4">{step.title}</h3>
341-
<p className="text-slate-500 text-sm font-medium leading-relaxed">{step.desc}</p>
342379
</motion.div>
343380
))}
344381
</div>
345382
</div>
346383
</section>
347384

348-
{/* Platform Features */}
349-
<section className="py-24 sm:py-32 bg-slate-50 relative">
350-
<div className="max-w-[1440px] mx-auto px-4 sm:px-6">
385+
{/* Platform Features - Updated for Color Theme */}
386+
<section className="py-24 sm:py-40 bg-slate-900 relative overflow-hidden">
387+
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px] -mr-64 -mt-64" />
388+
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[120px] -ml-64 -mb-64" />
389+
390+
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 relative z-10">
351391
<div className="text-center mb-24">
352-
<span className="bg-emerald-100 text-emerald-700 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-6 inline-block">Cutting Edge</span>
353-
<h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">The Noillin Edge</h2>
392+
<span className="text-emerald-400 font-bold text-[10px] uppercase tracking-[0.4em] mb-6 inline-block">System Architecture</span>
393+
<h2 className="text-4xl md:text-6xl font-black text-white tracking-tighter">The Noillin Edge</h2>
354394
</div>
355395

356396
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -368,13 +408,13 @@ export default function HomePage() {
368408
whileInView={{ opacity: 1, y: 0 }}
369409
viewport={{ once: true }}
370410
transition={{ delay: i * 0.05 }}
371-
className="p-8 bg-white border border-slate-200/60 rounded-[2.5rem] hover:border-emerald-500/30 hover:shadow-[0_20px_50px_-20px_rgba(16,185,129,0.15)] transition-all duration-300 group"
411+
className="p-10 bg-white/5 backdrop-blur-sm border border-white/10 rounded-[2.5rem] hover:bg-white/10 hover:border-emerald-500/50 transition-all duration-300 group"
372412
>
373-
<div className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300 mb-6">
413+
<div className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center text-emerald-400 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300 mb-8">
374414
{feature.icon}
375415
</div>
376-
<h3 className="text-lg font-bold text-slate-900 mb-3 group-hover:text-emerald-600 transition-colors">{feature.title}</h3>
377-
<p className="text-slate-500 text-sm font-medium leading-relaxed">{feature.desc}</p>
416+
<h3 className="text-xl font-bold text-white mb-4 group-hover:text-emerald-400 transition-colors">{feature.title}</h3>
417+
<p className="text-slate-400 text-sm font-medium leading-relaxed">{feature.desc}</p>
378418
</motion.div>
379419
))}
380420
</div>
@@ -436,12 +476,12 @@ export default function HomePage() {
436476
</motion.div>
437477
</section>
438478

439-
{/* Testimonials */}
440-
<section className="py-24 sm:py-32 bg-white">
479+
{/* Testimonials - Updated for Color Theme */}
480+
<section className="py-24 sm:py-40 bg-white relative">
441481
<div className="max-w-[1440px] mx-auto px-4 sm:px-6">
442482
<div className="text-center mb-24">
443-
<span className="text-emerald-600 font-bold text-[10px] uppercase tracking-[0.3em] mb-4 inline-block">Success Stories</span>
444-
<h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">The Community Voice</h2>
483+
<span className="text-emerald-600 font-bold text-[10px] uppercase tracking-[0.4em] mb-4 inline-block">Validation</span>
484+
<h2 className="text-4xl md:text-6xl font-black text-slate-900 tracking-tighter">The Community Voice</h2>
445485
</div>
446486
<TestimonialSlider testimonials={[
447487
{ name: "Alex Rivera", role: "TECHFLOW DIRECTOR", img: "11", text: "Noillin streamlined our influencer outreach. We found the perfect micro-influencers within hours." },

0 commit comments

Comments
 (0)