Skip to content

Commit 8152e96

Browse files
sunithvssunithvs
authored
Merge pull request #118 from maheswar-dileep/feat/landing-v2
Feat/landing v2
2 parents 62141a8 + 33e2e01 commit 8152e96

9 files changed

Lines changed: 213 additions & 73 deletions

File tree

‎www/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export default async function Home() {
171171
<AnimatedHero />
172172

173173
{/* Analytics Section */}
174-
<section className="py-20 bg-gradient-to-b from-white to-gray-50">
174+
{/* <section className="py-20 bg-gradient-to-b from-white to-gray-50">
175175
<div className="container mx-auto px-4">
176176
<div className="max-w-3xl mx-auto">
177177
<AnimatedStats
@@ -180,7 +180,7 @@ export default async function Home() {
180180
/>
181181
</div>
182182
</div>
183-
</section>
183+
</section> */}
184184

185185
{/* Compare Section */}
186186
<section className="py-20">
@@ -199,7 +199,7 @@ export default async function Home() {
199199
secondImage="/images/compare-2.png"
200200
firstImageClassName="object-cover object-left-top"
201201
secondImageClassname="object-cover object-left-top"
202-
className="h-[350px] w-[400px] md:h-[650px] md:w-[500px]"
202+
className="w-full max-w-5xl h-[350px] md:h-[500px]"
203203
slideMode="hover"
204204
// autoplay
205205
/>

‎www/components/animated-hero/client.tsx‎

Lines changed: 206 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,215 @@
1-
"use client";
1+
'use client';
22

3-
import { motion } from "framer-motion";
4-
import Image from "next/image";
5-
import { useEffect, useState } from "react";
6-
import GitHubModal from "../github-modal/client";
3+
import { motion } from 'framer-motion';
4+
import Image from 'next/image';
5+
import { useEffect, useState } from 'react';
6+
import GitHubModal from '../github-modal/client';
7+
import { Github, GitFork } from 'lucide-react';
8+
import Counter from '../counter';
9+
import Link from 'next/link';
710

811
export default function AnimatedHeroClient() {
9-
const [showGithubModal, setShowGithubModal] = useState(false);
12+
const [showGithubModal, setShowGithubModal] = useState(false);
1013

11-
useEffect(() => {
12-
// Check if URL has modal=true parameter
13-
const searchParams = new URLSearchParams(window.location.search);
14-
const shouldShowModal = searchParams.get("modal") === "true";
14+
useEffect(() => {
15+
// Check if URL has modal=true parameter
16+
const searchParams = new URLSearchParams(window.location.search);
17+
const shouldShowModal = searchParams.get('modal') === 'true';
1518

16-
if (shouldShowModal) {
17-
setShowGithubModal(true);
18-
}
19-
}, []);
19+
if (shouldShowModal) {
20+
setShowGithubModal(true);
21+
}
22+
}, []);
2023

21-
return (
22-
<section className="container mx-auto px-4 py-16 flex flex-col md:flex-row items-center justify-between gap-12">
23-
{/* Left side - Text Content */}
24-
<motion.div
25-
className="flex-1 max-w-2xl"
26-
initial={{ opacity: 0, x: -50 }}
27-
animate={{ opacity: 1, x: 0 }}
28-
transition={{ duration: 0.6, delay: 0.2 }}
29-
>
30-
<h1 className="text-6xl md:text-7xl md:font-medium leading-tight mb-4">
31-
Effortless <span className="block">Portfolios for</span>
32-
<span className="inline-block bg-[#B9FF66] px-4 py-1 rounded-lg">
33-
Developers
34-
</span>
35-
</h1>
36-
<p className="text-xl text-gray-600 mb-8 mt-6">
37-
Your GitHub profile tells a story.
38-
<br />
39-
Let us help you narrate it
40-
</p>
41-
<div className="flex flex-col sm:flex-row gap-4">
42-
<button
43-
onClick={() => setShowGithubModal(true)}
44-
className="bg-[#1A1A1A] text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-black transition-colors"
45-
>
46-
Generate Your Portfolio
47-
</button>
48-
</div>
49-
</motion.div>
24+
const contributorAvatars = [
25+
{
26+
src: 'https://avatars.githubusercontent.com/u/63339782?v=4',
27+
alt: 'Customer 1',
28+
zIndex: 'z-0',
29+
extraClass: '',
30+
},
31+
{
32+
src: 'https://avatars.githubusercontent.com/u/93549213?v=4',
33+
alt: 'Customer 2',
34+
zIndex: 'z-10',
35+
extraClass: '',
36+
},
37+
{
38+
src: 'https://avatars.githubusercontent.com/u/135146135?v=4',
39+
alt: 'Customer 3',
40+
zIndex: 'z-20',
41+
extraClass: 'bg-purple-100',
42+
},
43+
];
5044

51-
{/* Right side - GitHub Illustration */}
52-
<motion.div
53-
className="flex-1 relative"
54-
initial={{ opacity: 0, x: 50 }}
55-
animate={{ opacity: 1, x: 0 }}
56-
transition={{ duration: 0.6, delay: 0.4 }}
57-
>
58-
<div className="relative w-full max-w-lg mx-auto">
59-
<Image
60-
src="/images/hero.png"
61-
alt="GitHub Wrapped Illustration"
62-
width={600}
63-
height={600}
64-
className="w-full h-auto"
65-
priority
66-
/>
67-
</div>
68-
</motion.div>
45+
return (
46+
<section className="w-full flex flex-col items-center justify-center pb-16 md:pb-24">
47+
{/* Trusted badge */}
48+
<motion.div
49+
initial={{ opacity: 0, y: 20 }}
50+
animate={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.5 }}
52+
className="flex items-center justify-center mb-8 md:mb-10 w-full px-2"
53+
>
54+
<Image
55+
src="/images/leaf-l.png"
56+
alt="Laurel left"
57+
width={28}
58+
height={52}
59+
className="hidden sm:block w-auto h-8 md:h-12 opacity-80 shrink-0"
60+
/>
61+
<div className="flex items-center gap-2 md:gap-3 mx-2 md:mx-4">
62+
<div className="flex -space-x-3 shrink-0">
63+
{contributorAvatars.map((avatar, index) => (
64+
<Image
65+
key={index}
66+
src={avatar.src}
67+
alt={avatar.alt}
68+
width={36}
69+
height={36}
70+
priority
71+
className={`w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative ${avatar.zIndex} ${avatar.extraClass}`}
72+
/>
73+
))}
74+
</div>
75+
<span className="text-sm md:text-[17px] font-medium text-[#7a7a7a] tracking-tight whitespace-nowrap">
76+
Trusted by 2k+ Customers
77+
</span>
78+
</div>
79+
<Image
80+
src="/images/leaf-r.png"
81+
alt="Laurel right"
82+
width={28}
83+
height={52}
84+
className="hidden sm:block w-auto h-8 md:h-12 opacity-80 shrink-0"
85+
/>
86+
</motion.div>
6987

70-
{showGithubModal && (
71-
<GitHubModal onClose={() => setShowGithubModal(false)} />
72-
)}
73-
</section>
74-
);
88+
{/* Main Headline */}
89+
<motion.h1
90+
initial={{ opacity: 0, y: 20 }}
91+
animate={{ opacity: 1, y: 0 }}
92+
transition={{ duration: 0.5, delay: 0.1 }}
93+
className="text-[40px] leading-[1.1] sm:text-5xl md:text-[76px] font-semibold text-[#111] tracking-tight text-center max-w-5xl px-2"
94+
>
95+
<span className="whitespace-nowrap">
96+
Effortless{' '}
97+
<motion.span
98+
aria-hidden="true"
99+
animate={{ y: [4, -8, 4] }}
100+
transition={{ repeat: Infinity, duration: 4, ease: 'easeInOut' }}
101+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white rotate-6 items-center justify-center bg-indigo-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
102+
>
103+
👨‍💻
104+
</motion.span>
105+
</span>{' '}
106+
<span className="whitespace-nowrap">Portfolios</span>{' '}
107+
<br className="hidden md:block" />
108+
<span className="whitespace-nowrap">
109+
for{' '}
110+
<motion.span
111+
aria-hidden="true"
112+
animate={{ y: [4, -10, 4] }}
113+
transition={{
114+
repeat: Infinity,
115+
duration: 3.5,
116+
ease: 'easeInOut',
117+
delay: 0.5,
118+
}}
119+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-6 items-center justify-center bg-rose-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
120+
>
121+
💻
122+
</motion.span>
123+
</span>{' '}
124+
<span className="whitespace-nowrap">
125+
Developers{' '}
126+
<motion.span
127+
aria-hidden="true"
128+
animate={{ y: [4, -6, 4] }}
129+
transition={{
130+
repeat: Infinity,
131+
duration: 4.5,
132+
ease: 'easeInOut',
133+
delay: 1,
134+
}}
135+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-12 items-center justify-center bg-amber-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
136+
>
137+
📁
138+
</motion.span>
139+
</span>
140+
</motion.h1>
141+
142+
{/* Subhead */}
143+
<motion.p
144+
initial={{ opacity: 0, y: 20 }}
145+
animate={{ opacity: 1, y: 0 }}
146+
transition={{ duration: 0.5, delay: 0.2 }}
147+
className="text-lg md:text-xl text-gray-500 mt-8 max-w-2xl text-center px-4"
148+
>
149+
Automatic portfolio generation powered by your GitHub profile.{' '}
150+
<br className="hidden md:block" />
151+
Zero maintenance required. Setup once, let it narrate your story.
152+
</motion.p>
153+
154+
{/* Buttons */}
155+
<motion.div
156+
initial={{ opacity: 0, y: 20 }}
157+
animate={{ opacity: 1, y: 0 }}
158+
transition={{ duration: 0.5, delay: 0.3 }}
159+
className="flex flex-col sm:flex-row items-center gap-4 mt-10"
160+
>
161+
<button
162+
onClick={() => setShowGithubModal(true)}
163+
className="bg-black text-white px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-800 transition-colors flex items-center gap-2 shadow-lg"
164+
>
165+
<Github className="w-5 h-5" /> Generate Portfolio
166+
</button>
167+
<Link
168+
href="https://github.com/sunithvs/devb.io"
169+
target="_blank"
170+
rel="noopener noreferrer"
171+
className="bg-white border text-gray-700 border-gray-200 px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 shadow-sm"
172+
>
173+
<GitFork className="w-4 h-4 text-black" /> Contribute
174+
</Link>
175+
</motion.div>
176+
{/* Metrics Section */}
177+
<motion.div
178+
initial={{ opacity: 0, y: 20 }}
179+
animate={{ opacity: 1, y: 0 }}
180+
transition={{ duration: 0.5, delay: 0.4 }}
181+
className="mt-20 w-full max-w-4xl border-t border-gray-100 pt-12"
182+
>
183+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4 divide-y md:divide-y-0 md:divide-x divide-gray-100">
184+
<div className="flex flex-col items-center justify-center pt-4 md:pt-0">
185+
<span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2 flex items-center">
186+
<Counter from={0} to={6010} duration={2} />+
187+
</span>
188+
<span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center">
189+
Profiles Generated
190+
</span>
191+
</div>
192+
<div className="flex flex-col items-center justify-center pt-8 md:pt-0">
193+
<span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2 flex items-baseline">
194+
<Counter from={0} to={8} duration={2} />
195+
<span className="text-3xl font-semibold text-gray-300 ml-1">mo</span>
196+
</span>
197+
<span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center">
198+
Continuously Active
199+
</span>
200+
</div>
201+
<div className="flex flex-col items-center justify-center pt-8 md:pt-0">
202+
<span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2">
203+
Global
204+
</span>
205+
<span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center">
206+
Developer Reach
207+
</span>
208+
</div>
209+
</div>
210+
</motion.div>
211+
212+
{showGithubModal && <GitHubModal onClose={() => setShowGithubModal(false)} />}
213+
</section>
214+
);
75215
}

‎www/components/ui/compare.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const Compare = ({
138138
return (
139139
<div
140140
ref={sliderRef}
141-
className={cn("w-[400px] h-[400px] overflow-hidden", className)}
141+
className={cn("w-full h-[400px] md:h-full overflow-hidden border border-gray-200 rounded-lg shadow-sm bg-gray-50", className)}
142142
style={{
143143
position: "relative",
144144
cursor: slideMode === "drag" ? "grab" : "col-resize",
@@ -186,7 +186,7 @@ export const Compare = ({
186186
{firstImage ? (
187187
<motion.div
188188
className={cn(
189-
"absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none overflow-hidden",
189+
"absolute inset-0 z-20 rounded-lg shrink-0 w-full h-full select-none overflow-hidden",
190190
firstImageClassName,
191191
)}
192192
style={{
@@ -198,7 +198,7 @@ export const Compare = ({
198198
alt="first image"
199199
src={firstImage}
200200
className={cn(
201-
"absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none",
201+
"absolute inset-0 z-20 rounded-lg shrink-0 w-full h-full select-none",
202202
firstImageClassName,
203203
)}
204204
draggable={false}
@@ -212,7 +212,7 @@ export const Compare = ({
212212
{secondImage ? (
213213
<motion.img
214214
className={cn(
215-
"absolute top-0 left-0 z-[19] rounded-2xl w-full h-full select-none",
215+
"absolute top-0 left-0 z-[19] rounded-lg w-full h-full select-none",
216216
secondImageClassname,
217217
)}
218218
alt="second image"

‎www/public/images/compare-1.png‎

317 KB
Loading

‎www/public/images/compare-1_bak.png‎

70.6 KB
Loading

‎www/public/images/compare-2.png‎

337 KB
Loading

‎www/public/images/compare-2_bak.png‎

46.6 KB
Loading

‎www/public/images/leaf-l.png‎

34.8 KB
Loading

‎www/public/images/leaf-r.png‎

35.2 KB
Loading

0 commit comments

Comments
 (0)