Skip to content

Commit 91a158e

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #406 from Richajaishwal0/mockup
Added mockup-image
2 parents ced19fd + d010c03 commit 91a158e

File tree

5 files changed

+519
-607
lines changed

5 files changed

+519
-607
lines changed

‎src/components/mockup/DeveloperMockup.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import React, { useState } from 'react';
2+
import { motion } from 'framer-motion';
3+
import { useColorMode } from '@docusaurus/theme-common';
4+
5+
interface MockupItem {
6+
title: string;
7+
image: string;
8+
description: string;
9+
}
10+
11+
interface DeveloperMockupProps {
12+
items: MockupItem[];
13+
}
14+
15+
const DeveloperMockup: React.FC<DeveloperMockupProps> = ({ items }) => {
16+
const [activeIndex, setActiveIndex] = useState(0);
17+
const { colorMode } = useColorMode();
18+
const isDark = colorMode === 'dark';
19+
20+
return (
21+
<div className="w-full py-16">
22+
{/* Section Header */}
23+
<div className="text-center mb-12">
24+
<motion.div
25+
initial={{ opacity: 0, y: 20 }}
26+
whileInView={{ opacity: 1, y: 0 }}
27+
transition={{ duration: 0.6 }}
28+
className="inline-block px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full text-sm font-medium mb-4"
29+
>
30+
Live Preview
31+
</motion.div>
32+
<motion.h2
33+
initial={{ opacity: 0, y: 20 }}
34+
whileInView={{ opacity: 1, y: 0 }}
35+
transition={{ duration: 0.6, delay: 0.1 }}
36+
className={`text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r ${
37+
isDark ? 'from-white via-gray-300 to-white' : 'from-black via-gray-700 to-black'
38+
}`}
39+
>
40+
Interactive Project Showcase
41+
</motion.h2>
42+
<motion.p
43+
initial={{ opacity: 0, y: 20 }}
44+
whileInView={{ opacity: 1, y: 0 }}
45+
transition={{ duration: 0.6, delay: 0.2 }}
46+
className={`text-lg max-w-2xl mx-auto ${
47+
isDark ? 'text-gray-300' : 'text-gray-600'
48+
}`}
49+
>
50+
Explore our featured projects with live previews and detailed insights
51+
</motion.p>
52+
</div>
53+
54+
{/* Mockup Container */}
55+
<motion.div
56+
initial={{ opacity: 0, y: 40 }}
57+
whileInView={{ opacity: 1, y: 0 }}
58+
transition={{ duration: 0.8, delay: 0.3 }}
59+
className={`max-w-7xl mx-auto p-8 rounded-3xl shadow-2xl backdrop-blur-sm ${
60+
isDark ? 'bg-gray-900/90 border border-gray-700' : 'bg-white/90 border border-gray-200'
61+
}`}
62+
>
63+
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 h-[700px]">
64+
{/* Enhanced Sidebar */}
65+
<div className={`lg:col-span-4 ${
66+
isDark ? 'bg-gradient-to-b from-gray-800 to-gray-900' : 'bg-gradient-to-b from-gray-50 to-gray-100'
67+
} rounded-2xl p-6 overflow-y-auto border ${
68+
isDark ? 'border-gray-700' : 'border-gray-200'
69+
}`}>
70+
<div className="flex items-center mb-6">
71+
<div className={`w-3 h-3 rounded-full bg-green-500 mr-3 animate-pulse`}></div>
72+
<h3 className={`text-xl font-bold ${
73+
isDark ? 'text-white' : 'text-gray-900'
74+
}`}>
75+
Featured Projects
76+
</h3>
77+
</div>
78+
79+
<div className="space-y-4">
80+
{items.map((item, index) => (
81+
<motion.div
82+
key={index}
83+
whileHover={{ scale: 1.02, x: 4 }}
84+
whileTap={{ scale: 0.98 }}
85+
onClick={() => setActiveIndex(index)}
86+
className={`relative p-5 rounded-xl cursor-pointer transition-all duration-300 overflow-hidden ${
87+
activeIndex === index
88+
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-xl transform scale-105'
89+
: isDark
90+
? 'bg-gray-700/50 hover:bg-gray-600/70 text-gray-200 border border-gray-600'
91+
: 'bg-white hover:bg-gray-50 text-gray-700 shadow-md border border-gray-200'
92+
}`}
93+
>
94+
{activeIndex === index && (
95+
<motion.div
96+
layoutId="activeBackground"
97+
className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl"
98+
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
99+
/>
100+
)}
101+
102+
<div className="relative z-10 flex items-start justify-between">
103+
<div className="flex-1">
104+
<h4 className="font-semibold text-base mb-2 leading-tight">{item.title}</h4>
105+
<p className={`text-sm leading-relaxed ${
106+
activeIndex === index
107+
? 'text-blue-100'
108+
: isDark ? 'text-gray-400' : 'text-gray-500'
109+
}`}>
110+
{item.description}
111+
</p>
112+
</div>
113+
<div className={`ml-4 w-3 h-3 rounded-full flex-shrink-0 mt-1 ${
114+
activeIndex === index ? 'bg-white shadow-lg' : 'bg-gray-400'
115+
}`} />
116+
</div>
117+
118+
{activeIndex === index && (
119+
<motion.div
120+
initial={{ width: 0 }}
121+
animate={{ width: '100%' }}
122+
className="absolute bottom-0 left-0 h-1 bg-white/30 rounded-full"
123+
/>
124+
)}
125+
</motion.div>
126+
))}
127+
</div>
128+
</div>
129+
130+
{/* Enhanced Main Screen */}
131+
<div className="lg:col-span-8">
132+
<div className={`h-full rounded-2xl overflow-hidden shadow-2xl border ${
133+
isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'
134+
}`}>
135+
{/* Enhanced Browser Header */}
136+
<div className={`flex items-center px-6 py-4 border-b backdrop-blur-sm ${
137+
isDark ? 'bg-gray-700/80 border-gray-600' : 'bg-gray-100/80 border-gray-300'
138+
}`}>
139+
<div className="flex space-x-2 mr-4">
140+
<div className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-400 transition-colors cursor-pointer"></div>
141+
<div className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-400 transition-colors cursor-pointer"></div>
142+
<div className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-400 transition-colors cursor-pointer"></div>
143+
</div>
144+
<div className={`flex-1 mx-4 px-4 py-2 rounded-lg text-sm font-mono flex items-center ${
145+
isDark ? 'bg-gray-600 text-gray-300' : 'bg-white text-gray-600 shadow-inner'
146+
}`}>
147+
<span className="text-green-500 mr-2">🔒</span>
148+
github.com/recodehive/{items[activeIndex]?.title.toLowerCase().replace(/\s+/g, '-')}
149+
</div>
150+
<div className={`px-3 py-1 rounded-md text-xs ${
151+
isDark ? 'bg-green-600 text-white' : 'bg-green-100 text-green-700'
152+
}`}>
153+
Live
154+
</div>
155+
</div>
156+
157+
{/* Enhanced Screenshot Display */}
158+
<div className="relative h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
159+
<motion.div
160+
key={activeIndex}
161+
initial={{ opacity: 0, scale: 0.9, rotateY: -10 }}
162+
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
163+
transition={{ duration: 0.6, ease: "easeOut" }}
164+
className="relative h-full"
165+
>
166+
<img
167+
src={items[activeIndex]?.image}
168+
alt={items[activeIndex]?.title}
169+
className="w-full h-full object-cover"
170+
/>
171+
172+
{/* Enhanced Overlay */}
173+
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent">
174+
<div className="absolute bottom-0 left-0 right-0 p-8">
175+
<motion.div
176+
initial={{ y: 30, opacity: 0 }}
177+
animate={{ y: 0, opacity: 1 }}
178+
transition={{ delay: 0.3, duration: 0.6 }}
179+
className="text-white"
180+
>
181+
<div className="flex items-center mb-3">
182+
<div className="w-2 h-2 bg-green-400 rounded-full mr-3 animate-pulse"></div>
183+
<span className="text-sm font-medium text-green-400">Active Project</span>
184+
</div>
185+
<h3 className="text-3xl font-bold mb-3 leading-tight">{items[activeIndex]?.title}</h3>
186+
<p className="text-gray-200 text-base leading-relaxed max-w-2xl">
187+
{items[activeIndex]?.description}
188+
</p>
189+
<motion.button
190+
whileHover={{ scale: 1.05 }}
191+
whileTap={{ scale: 0.95 }}
192+
className="mt-4 px-6 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg text-white font-medium hover:bg-white/30 transition-all duration-300"
193+
>
194+
View Project →
195+
</motion.button>
196+
</motion.div>
197+
</div>
198+
</div>
199+
</motion.div>
200+
</div>
201+
</div>
202+
</div>
203+
</div>
204+
</motion.div>
205+
</div>
206+
);
207+
};
208+
209+
export default DeveloperMockup;

0 commit comments

Comments
 (0)