Skip to content

Commit ad3535b

Browse files
SudoAnirudhSudoAnirudh
committed
Add tech trends showcase with interactive cards to IndustryTrends page
- Replace generic industry content with technology-focused trends - Add 6 tech trend categories (AI/ML, Blockchain, Quantum, etc.) - Implement interactive hover cards with gradient overlays - Include trend icons and external link functionality - Update hero section copy to emphasize technology focus
1 parent b8c1aaf commit ad3535b

File tree

1 file changed

+204
-53
lines changed

1 file changed

+204
-53
lines changed

‎src/Page/IndustryTrends.jsx‎

Lines changed: 204 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react'; // Import React and hooks
2-
import { Search, PlusCircle, Trash } from 'lucide-react'; // Import icons from 'lucide-react'
2+
import { Search, PlusCircle, Trash, ExternalLink, TrendingUp, Cpu, Shield, Leaf, Globe, Zap } from 'lucide-react'; // Import icons from 'lucide-react'
33
import { Footer } from '../components/Footer/Footer'; // Import Footer component
44
import { Dialog } from '@headlessui/react'; // Import Dialog component from Headless UI
55

@@ -30,21 +30,159 @@ const Hero = () => {
3030
<div className="container mx-auto flex flex-col items-center justify-center text-center">
3131
<div className="mb-10 rounded-br-[50px] rounded-tl-[50px] border border-[#00a6fb] p-8 shadow-lg">
3232
<p className="text-lg font-semibold tracking-widest text-[#00a6fb]">
33-
Discover the Latest Industry Insights 🌐
33+
Discover the Latest Technology Trends 🚀
3434
</p>
3535
</div>
3636
<h2 className="mb-8 text-5xl font-bold">
37-
Industry <span className="text-[#00a6fb]">Trends</span>
37+
Tech <span className="text-[#00a6fb]">Trends</span>
3838
</h2>
3939
<p className="mx-auto max-w-3xl text-lg leading-relaxed text-gray-300">
40-
Discover the latest updates on industry trends through insightful blogs and engaging video content to stay
41-
ahead.
40+
Stay ahead of the curve with the latest technology trends shaping the future of innovation and development.
4241
</p>
4342
</div>
4443
</section>
4544
);
4645
};
4746

47+
// Tech Trends Data
48+
const techTrendsData = [
49+
{
50+
id: 1,
51+
title: "AI & Machine Learning",
52+
description: "Artificial Intelligence and Machine Learning continue to revolutionize industries with advanced algorithms, neural networks, and automated decision-making systems.",
53+
icon: <Cpu className="h-8 w-8" />,
54+
color: "from-purple-500 to-pink-500",
55+
link: "#ai-ml"
56+
},
57+
{
58+
id: 2,
59+
title: "Blockchain Technology",
60+
description: "Decentralized systems and cryptocurrency innovations are transforming finance, supply chain, and digital identity management across global markets.",
61+
icon: <Globe className="h-8 w-8" />,
62+
color: "from-blue-500 to-cyan-500",
63+
link: "#blockchain"
64+
},
65+
{
66+
id: 3,
67+
title: "Quantum Computing",
68+
description: "Quantum computers promise unprecedented computational power, potentially solving complex problems in cryptography, optimization, and scientific research.",
69+
icon: <Zap className="h-8 w-8" />,
70+
color: "from-yellow-500 to-orange-500",
71+
link: "#quantum"
72+
},
73+
{
74+
id: 4,
75+
title: "Green Technology",
76+
description: "Sustainable tech solutions focus on renewable energy, carbon reduction, and environmentally friendly innovations for a greener future.",
77+
icon: <Leaf className="h-8 w-8" />,
78+
color: "from-green-500 to-emerald-500",
79+
link: "#green-tech"
80+
},
81+
{
82+
id: 5,
83+
title: "Web3 & Metaverse",
84+
description: "The next generation of the internet featuring decentralized applications, virtual worlds, and immersive digital experiences.",
85+
icon: <Globe className="h-8 w-8" />,
86+
color: "from-indigo-500 to-purple-500",
87+
link: "#web3"
88+
},
89+
{
90+
id: 6,
91+
title: "Cybersecurity",
92+
description: "Advanced security measures, zero-trust architectures, and AI-powered threat detection to protect against evolving cyber threats.",
93+
icon: <Shield className="h-8 w-8" />,
94+
color: "from-red-500 to-pink-500",
95+
link: "#cybersecurity"
96+
}
97+
];
98+
99+
// TechTrendCard Component
100+
const TechTrendCard = ({ trend }) => {
101+
const [isHovered, setIsHovered] = useState(false);
102+
103+
return (
104+
<div
105+
className={`group relative overflow-hidden rounded-xl bg-gray-800 p-6 transition-all duration-300 hover:scale-105 hover:shadow-2xl ${
106+
isHovered ? 'transform-gpu' : ''
107+
}`}
108+
onMouseEnter={() => setIsHovered(true)}
109+
onMouseLeave={() => setIsHovered(false)}
110+
>
111+
{/* Gradient overlay */}
112+
<div className={`absolute inset-0 bg-gradient-to-br ${trend.color} opacity-0 transition-opacity duration-300 group-hover:opacity-10`}></div>
113+
114+
{/* Content */}
115+
<div className="relative z-10">
116+
{/* Icon */}
117+
<div className={`mb-4 inline-flex rounded-lg bg-gradient-to-br ${trend.color} p-3 text-white`}>
118+
{trend.icon}
119+
</div>
120+
121+
{/* Title */}
122+
<h3 className="mb-3 text-xl font-bold text-white group-hover:text-[#00a6fb] transition-colors duration-300">
123+
{trend.title}
124+
</h3>
125+
126+
{/* Description */}
127+
<p className="mb-4 text-gray-300 leading-relaxed">
128+
{trend.description}
129+
</p>
130+
131+
{/* Explore Link */}
132+
<button className="inline-flex items-center gap-2 text-[#00a6fb] hover:text-blue-400 transition-colors duration-300 font-semibold">
133+
<span>Explore</span>
134+
<ExternalLink className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
135+
</button>
136+
</div>
137+
138+
{/* Hover effect border */}
139+
<div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-[#00a6fb] transition-colors duration-300"></div>
140+
</div>
141+
);
142+
};
143+
144+
// TechTrendsGrid Component
145+
const TechTrendsGrid = ({ searchQuery }) => {
146+
const filteredTrends = techTrendsData.filter(trend =>
147+
trend.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
148+
trend.description.toLowerCase().includes(searchQuery.toLowerCase())
149+
);
150+
151+
return (
152+
<div className="px-6 py-8">
153+
<div className="mx-auto max-w-7xl">
154+
<div className="mb-8 flex items-center justify-between">
155+
<div>
156+
<h2 className="text-3xl font-bold text-white mb-2">
157+
Latest Tech <span className="text-[#00a6fb]">Trends</span>
158+
</h2>
159+
<p className="text-gray-400">
160+
Discover the technologies shaping our future
161+
</p>
162+
</div>
163+
<div className="flex items-center gap-2 text-[#00a6fb]">
164+
<TrendingUp className="h-5 w-5" />
165+
<span className="font-semibold">{filteredTrends.length} Trends</span>
166+
</div>
167+
</div>
168+
169+
{filteredTrends.length > 0 ? (
170+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
171+
{filteredTrends.map((trend) => (
172+
<TechTrendCard key={trend.id} trend={trend} />
173+
))}
174+
</div>
175+
) : (
176+
<div className="text-center py-12">
177+
<div className="text-gray-400 text-lg mb-2">No trends found</div>
178+
<p className="text-gray-500">Try adjusting your search query</p>
179+
</div>
180+
)}
181+
</div>
182+
</div>
183+
);
184+
};
185+
48186
// SearchBar Component
49187
const SearchBar = ({ searchQuery, setSearchQuery }) => {
50188
return (
@@ -135,110 +273,123 @@ const IndustryTrendsSec = () => {
135273

136274
return (
137275
<div>
138-
<div className="flex items-center justify-between p-6">
276+
{/* Search Bar */}
277+
<div className="flex flex-col md:flex-row items-center justify-between gap-4 p-6">
139278
<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
140279
<div className="flex gap-4">
141280
<button
142281
onClick={() => openModal('blog')} // Open modal to add a new blog
143-
className="margin-left-5 flex items-center gap-2 rounded-full bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
282+
className="flex items-center gap-2 rounded-full bg-[#00a6fb] px-6 py-3 text-white hover:bg-blue-600 transition-colors duration-300 font-semibold"
144283
>
145-
<PlusCircle className="h-5 w-5" /> Add Blog
284+
<PlusCircle className="h-5 w-5" /> Add Article
146285
</button>
147286
</div>
148287
</div>
149288

289+
{/* Tech Trends Grid */}
290+
<TechTrendsGrid searchQuery={searchQuery} />
291+
150292
{/* Modal for adding new content */}
151293
<Dialog open={isModalOpen} onClose={() => setIsModalOpen(false)} className="relative z-50">
152294
<div className="fixed inset-0 bg-black bg-opacity-50"></div>
153-
<div className="fixed inset-0 flex items-center justify-center">
154-
<div className="w-full max-w-md rounded-lg bg-gray-800 p-6 text-white shadow-lg">
155-
<h2 className="mb-4 text-lg font-bold">Add Blog</h2>
295+
<div className="fixed inset-0 flex items-center justify-center p-4">
296+
<div className="w-full max-w-md rounded-xl bg-gray-800 p-6 text-white shadow-2xl">
297+
<h2 className="mb-6 text-2xl font-bold text-[#00a6fb]">Add New Article</h2>
156298
{/* Form fields for blog details */}
157299
<input
158300
type="text"
159301
value={newTitle}
160302
onChange={(e) => setNewTitle(e.target.value)} // Handle title input
161-
placeholder="Enter blog title"
303+
placeholder="Enter article title"
162304
required
163-
className="mb-4 w-full rounded-md bg-gray-700 p-2 text-white placeholder-gray-400 outline-none"
305+
className="mb-4 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-[#00a6fb] transition-all duration-300"
164306
/>
165307
<textarea
166308
value={newDescription}
167309
onChange={(e) => setNewDescription(e.target.value)} // Handle description input
168-
placeholder="Enter blog description"
169-
className="mb-4 h-28 w-full rounded-md bg-gray-700 p-2 text-white placeholder-gray-400 outline-none"
310+
placeholder="Enter article description"
311+
className="mb-4 h-28 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-[#00a6fb] transition-all duration-300 resize-none"
170312
/>
171313
<input
172314
type="text"
173315
value={newAuthor}
174316
onChange={(e) => setNewAuthor(e.target.value)} // Handle author input
175317
placeholder="Enter author name"
176-
className="mb-4 w-full rounded-md bg-gray-700 p-2 text-white placeholder-gray-400 outline-none"
318+
className="mb-4 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-[#00a6fb] transition-all duration-300"
177319
/>
178320
<input
179321
type="file"
180322
onChange={(e) => setNewImage(e.target.files[0])} // Handle image upload
181-
className="mb-4 w-full text-gray-400"
323+
className="mb-4 w-full text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-[#00a6fb] file:text-white file:cursor-pointer hover:file:bg-blue-600"
182324
/>
183325
<textarea
184326
value={newContent}
185327
onChange={(e) => setNewContent(e.target.value)} // Handle blog content input
186-
placeholder="Enter blog content..."
187-
className="mb-4 h-28 w-full rounded-md bg-gray-700 p-2 text-white placeholder-gray-400 outline-none"
328+
placeholder="Enter article content..."
329+
className="mb-6 h-32 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-[#00a6fb] transition-all duration-300 resize-none"
188330
/>
189331
{/* Buttons for submitting or canceling */}
190332
<div className="flex justify-end gap-4">
191333
<button
192334
onClick={() => setIsModalOpen(false)} // Close modal without submitting
193-
className="rounded bg-gray-600 px-4 py-2 hover:bg-gray-700"
335+
className="rounded-lg bg-gray-600 px-6 py-2 hover:bg-gray-700 transition-colors duration-300"
194336
>
195337
Cancel
196338
</button>
197339
<button
198340
onClick={handleAddContent} // Submit content to be added
199-
className="rounded bg-blue-600 px-4 py-2 hover:bg-blue-700"
341+
className="rounded-lg bg-[#00a6fb] px-6 py-2 hover:bg-blue-600 transition-colors duration-300 font-semibold"
200342
>
201-
Submit
343+
Publish
202344
</button>
203345
</div>
204346
</div>
205347
</div>
206348
</Dialog>
207349

208-
{/* Display saved trends */}
209-
<div className="mt-8 px-6">
210-
<h2 className="text-2xl font-bold text-white">Top Trends</h2>
211-
<div className="mt-4 space-y-4">
212-
{filteredTrends.map((trend, index) => (
213-
<div key={index} className="flex rounded-md bg-gray-800 p-4 text-white">
214-
{trend.image && (
215-
<div className="w-1/4">
216-
<img src={trend.image} alt="Blog image" className="h-auto w-full rounded-md" />
350+
{/* Display saved articles */}
351+
{filteredTrends.length > 0 && (
352+
<div className="mt-12 px-6">
353+
<div className="mx-auto max-w-7xl">
354+
<h2 className="text-3xl font-bold text-white mb-6">
355+
Community <span className="text-[#00a6fb]">Articles</span>
356+
</h2>
357+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
358+
{filteredTrends.map((trend, index) => (
359+
<div key={index} className="group relative overflow-hidden rounded-xl bg-gray-800 p-6 transition-all duration-300 hover:scale-105 hover:shadow-2xl">
360+
{trend.image && (
361+
<div className="mb-4">
362+
<img src={trend.image} alt="Article image" className="h-48 w-full rounded-lg object-cover" />
363+
</div>
364+
)}
365+
<div>
366+
<h3 className="mb-3 text-xl font-bold text-white group-hover:text-[#00a6fb] transition-colors duration-300">
367+
{trend.title}
368+
</h3>
369+
<p className="mb-4 text-gray-300 leading-relaxed">
370+
{trend.description}
371+
</p>
372+
<div className="mb-4 text-sm text-gray-400">
373+
By {trend.author} | {trend.publishTime}
374+
</div>
375+
{trend.type === 'blog' && (
376+
<p className="text-gray-300 text-sm line-clamp-3">
377+
{trend.content}
378+
</p>
379+
)}
380+
<button className="mt-4 inline-flex items-center gap-2 text-[#00a6fb] hover:text-blue-400 transition-colors duration-300 font-semibold">
381+
<span>Read More</span>
382+
<ExternalLink className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
383+
</button>
384+
</div>
385+
{/* Hover effect border */}
386+
<div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-[#00a6fb] transition-colors duration-300"></div>
217387
</div>
218-
)}
219-
<div className="ml-4 w-3/4">
220-
<h3 className="text-xl font-semibold">{trend.title}</h3>
221-
<p>{trend.description}</p>
222-
<p className="text-gray-400">
223-
By {trend.author} | {trend.publishTime}
224-
</p>
225-
{trend.type === 'blog' && (
226-
<p>
227-
<strong>Blog:</strong> {trend.content}
228-
</p>
229-
)}
230-
{/* Uncomment to enable delete functionality */}
231-
{/* <button
232-
onClick={() => handleDeleteContent(index)} // Delete the content when clicked
233-
className="mt-2 text-red-500 hover:text-red-700"
234-
>
235-
<Trash className="inline h-5 w-5 mr-1" /> Delete
236-
</button> */}
237-
</div>
388+
))}
238389
</div>
239-
))}
390+
</div>
240391
</div>
241-
</div>
392+
)}
242393
<br />
243394
<br />
244395
</div>

0 commit comments

Comments
 (0)