Skip to content

Commit 50c4565

Browse files
codeaashucodeaashu
committed
global changes
1 parent daef3a3 commit 50c4565

File tree

2 files changed

+74
-72
lines changed

2 files changed

+74
-72
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@fortawesome/free-brands-svg-icons": "^7.0.0",
99
"@fortawesome/free-solid-svg-icons": "^6.7.2",
1010
"@fortawesome/react-fontawesome": "^0.2.3",
11-
"@headlessui/react": "^2.2.7",
11+
"@headlessui/react": "^2.2.4",
1212
"@huggingface/inference": "^4.5.3",
1313
"@testing-library/jest-dom": "^6.6.4",
1414
"@testing-library/react": "^16.0.1",
@@ -30,7 +30,7 @@
3030
"react-scripts": "5.0.1",
3131
"sitemap": "^8.0.0",
3232
"styled-components": "^6.1.15",
33-
"web-vitals": "^5.1.0",
33+
"web-vitals": "^5.0.3",
3434
"yocto-queue": "^1.2.0"
3535
},
3636
"scripts": {

‎src/Page/IndustryTrends.jsx‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect } from 'react'; // Import React and hooks
22
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
4-
import { Dialog } from '@headlessui/react'; // Import Dialog component from Headless UI
4+
import { Dialog } from '@headlessui/react';
55

66
// Navbar Component
77
const Navbar = () => {
@@ -48,52 +48,58 @@ const Hero = () => {
4848
const techTrendsData = [
4949
{
5050
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.",
51+
title: 'AI & Machine Learning',
52+
description:
53+
'Artificial Intelligence and Machine Learning continue to revolutionize industries with advanced algorithms, neural networks, and automated decision-making systems.',
5354
icon: <Cpu className="h-8 w-8" />,
54-
color: "from-purple-500 to-pink-500",
55-
link: "#ai-ml"
55+
color: 'from-purple-500 to-pink-500',
56+
link: '#ai-ml',
5657
},
5758
{
5859
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.",
60+
title: 'Blockchain Technology',
61+
description:
62+
'Decentralized systems and cryptocurrency innovations are transforming finance, supply chain, and digital identity management across global markets.',
6163
icon: <Globe className="h-8 w-8" />,
62-
color: "from-blue-500 to-cyan-500",
63-
link: "#blockchain"
64+
color: 'from-blue-500 to-cyan-500',
65+
link: '#blockchain',
6466
},
6567
{
6668
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+
title: 'Quantum Computing',
70+
description:
71+
'Quantum computers promise unprecedented computational power, potentially solving complex problems in cryptography, optimization, and scientific research.',
6972
icon: <Zap className="h-8 w-8" />,
70-
color: "from-yellow-500 to-orange-500",
71-
link: "#quantum"
73+
color: 'from-yellow-500 to-orange-500',
74+
link: '#quantum',
7275
},
7376
{
7477
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.",
78+
title: 'Green Technology',
79+
description:
80+
'Sustainable tech solutions focus on renewable energy, carbon reduction, and environmentally friendly innovations for a greener future.',
7781
icon: <Leaf className="h-8 w-8" />,
78-
color: "from-green-500 to-emerald-500",
79-
link: "#green-tech"
82+
color: 'from-green-500 to-emerald-500',
83+
link: '#green-tech',
8084
},
8185
{
8286
id: 5,
83-
title: "Web3 & Metaverse",
84-
description: "The next generation of the internet featuring decentralized applications, virtual worlds, and immersive digital experiences.",
87+
title: 'Web3 & Metaverse',
88+
description:
89+
'The next generation of the internet featuring decentralized applications, virtual worlds, and immersive digital experiences.',
8590
icon: <Globe className="h-8 w-8" />,
86-
color: "from-indigo-500 to-purple-500",
87-
link: "#web3"
91+
color: 'from-indigo-500 to-purple-500',
92+
link: '#web3',
8893
},
8994
{
9095
id: 6,
91-
title: "Cybersecurity",
92-
description: "Advanced security measures, zero-trust architectures, and AI-powered threat detection to protect against evolving cyber threats.",
96+
title: 'Cybersecurity',
97+
description:
98+
'Advanced security measures, zero-trust architectures, and AI-powered threat detection to protect against evolving cyber threats.',
9399
icon: <Shield className="h-8 w-8" />,
94-
color: "from-red-500 to-pink-500",
95-
link: "#cybersecurity"
96-
}
100+
color: 'from-red-500 to-pink-500',
101+
link: '#cybersecurity',
102+
},
97103
];
98104

99105
// TechTrendCard Component
@@ -109,72 +115,71 @@ const TechTrendCard = ({ trend }) => {
109115
onMouseLeave={() => setIsHovered(false)}
110116
>
111117
{/* 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-
118+
<div
119+
className={`absolute inset-0 bg-gradient-to-br ${trend.color} opacity-0 transition-opacity duration-300 group-hover:opacity-10`}
120+
></div>
121+
114122
{/* Content */}
115123
<div className="relative z-10">
116124
{/* Icon */}
117125
<div className={`mb-4 inline-flex rounded-lg bg-gradient-to-br ${trend.color} p-3 text-white`}>
118126
{trend.icon}
119127
</div>
120-
128+
121129
{/* Title */}
122-
<h3 className="mb-3 text-xl font-bold text-white group-hover:text-[#00a6fb] transition-colors duration-300">
130+
<h3 className="mb-3 text-xl font-bold text-white transition-colors duration-300 group-hover:text-[#00a6fb]">
123131
{trend.title}
124132
</h3>
125-
133+
126134
{/* Description */}
127-
<p className="mb-4 text-gray-300 leading-relaxed">
128-
{trend.description}
129-
</p>
130-
135+
<p className="mb-4 leading-relaxed text-gray-300">{trend.description}</p>
136+
131137
{/* Explore Link */}
132-
<button className="inline-flex items-center gap-2 text-[#00a6fb] hover:text-blue-400 transition-colors duration-300 font-semibold">
138+
<button className="inline-flex items-center gap-2 font-semibold text-[#00a6fb] transition-colors duration-300 hover:text-blue-400">
133139
<span>Explore</span>
134140
<ExternalLink className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
135141
</button>
136142
</div>
137-
143+
138144
{/* Hover effect border */}
139-
<div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-[#00a6fb] transition-colors duration-300"></div>
145+
<div className="absolute inset-0 rounded-xl border-2 border-transparent transition-colors duration-300 group-hover:border-[#00a6fb]"></div>
140146
</div>
141147
);
142148
};
143149

144150
// TechTrendsGrid Component
145151
const TechTrendsGrid = ({ searchQuery }) => {
146-
const filteredTrends = techTrendsData.filter(trend =>
147-
trend.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
148-
trend.description.toLowerCase().includes(searchQuery.toLowerCase())
152+
const filteredTrends = techTrendsData.filter(
153+
(trend) =>
154+
trend.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
155+
trend.description.toLowerCase().includes(searchQuery.toLowerCase()),
149156
);
150157

151158
return (
152159
<div className="px-6 py-8">
153160
<div className="mx-auto max-w-7xl">
154161
<div className="mb-8 flex items-center justify-between">
155162
<div>
156-
<h2 className="text-3xl font-bold text-white mb-2">
163+
<h2 className="mb-2 text-3xl font-bold text-white">
157164
Latest Tech <span className="text-[#00a6fb]">Trends</span>
158165
</h2>
159-
<p className="text-gray-400">
160-
Discover the technologies shaping our future
161-
</p>
166+
<p className="text-gray-400">Discover the technologies shaping our future</p>
162167
</div>
163168
<div className="flex items-center gap-2 text-[#00a6fb]">
164169
<TrendingUp className="h-5 w-5" />
165170
<span className="font-semibold">{filteredTrends.length} Trends</span>
166171
</div>
167172
</div>
168-
173+
169174
{filteredTrends.length > 0 ? (
170175
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
171176
{filteredTrends.map((trend) => (
172177
<TechTrendCard key={trend.id} trend={trend} />
173178
))}
174179
</div>
175180
) : (
176-
<div className="text-center py-12">
177-
<div className="text-gray-400 text-lg mb-2">No trends found</div>
181+
<div className="py-12 text-center">
182+
<div className="mb-2 text-lg text-gray-400">No trends found</div>
178183
<p className="text-gray-500">Try adjusting your search query</p>
179184
</div>
180185
)}
@@ -274,12 +279,12 @@ const IndustryTrendsSec = () => {
274279
return (
275280
<div>
276281
{/* Search Bar */}
277-
<div className="flex flex-col md:flex-row items-center justify-between gap-4 p-6">
282+
<div className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row">
278283
<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
279284
<div className="flex gap-4">
280285
<button
281286
onClick={() => openModal('blog')} // Open modal to add a new blog
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"
287+
className="flex items-center gap-2 rounded-full bg-[#00a6fb] px-6 py-3 font-semibold text-white transition-colors duration-300 hover:bg-blue-600"
283288
>
284289
<PlusCircle className="h-5 w-5" /> Add Article
285290
</button>
@@ -302,43 +307,43 @@ const IndustryTrendsSec = () => {
302307
onChange={(e) => setNewTitle(e.target.value)} // Handle title input
303308
placeholder="Enter article title"
304309
required
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"
310+
className="mb-4 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none transition-all duration-300 focus:ring-2 focus:ring-[#00a6fb]"
306311
/>
307312
<textarea
308313
value={newDescription}
309314
onChange={(e) => setNewDescription(e.target.value)} // Handle description input
310315
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"
316+
className="mb-4 h-28 w-full resize-none rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none transition-all duration-300 focus:ring-2 focus:ring-[#00a6fb]"
312317
/>
313318
<input
314319
type="text"
315320
value={newAuthor}
316321
onChange={(e) => setNewAuthor(e.target.value)} // Handle author input
317322
placeholder="Enter author name"
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"
323+
className="mb-4 w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none transition-all duration-300 focus:ring-2 focus:ring-[#00a6fb]"
319324
/>
320325
<input
321326
type="file"
322327
onChange={(e) => setNewImage(e.target.files[0])} // Handle image upload
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"
328+
className="mb-4 w-full text-gray-400 file:mr-4 file:cursor-pointer file:rounded-lg file:border-0 file:bg-[#00a6fb] file:px-4 file:py-2 file:text-white hover:file:bg-blue-600"
324329
/>
325330
<textarea
326331
value={newContent}
327332
onChange={(e) => setNewContent(e.target.value)} // Handle blog content input
328333
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"
334+
className="mb-6 h-32 w-full resize-none rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 outline-none transition-all duration-300 focus:ring-2 focus:ring-[#00a6fb]"
330335
/>
331336
{/* Buttons for submitting or canceling */}
332337
<div className="flex justify-end gap-4">
333338
<button
334339
onClick={() => setIsModalOpen(false)} // Close modal without submitting
335-
className="rounded-lg bg-gray-600 px-6 py-2 hover:bg-gray-700 transition-colors duration-300"
340+
className="rounded-lg bg-gray-600 px-6 py-2 transition-colors duration-300 hover:bg-gray-700"
336341
>
337342
Cancel
338343
</button>
339344
<button
340345
onClick={handleAddContent} // Submit content to be added
341-
className="rounded-lg bg-[#00a6fb] px-6 py-2 hover:bg-blue-600 transition-colors duration-300 font-semibold"
346+
className="rounded-lg bg-[#00a6fb] px-6 py-2 font-semibold transition-colors duration-300 hover:bg-blue-600"
342347
>
343348
Publish
344349
</button>
@@ -351,39 +356,36 @@ const IndustryTrendsSec = () => {
351356
{filteredTrends.length > 0 && (
352357
<div className="mt-12 px-6">
353358
<div className="mx-auto max-w-7xl">
354-
<h2 className="text-3xl font-bold text-white mb-6">
359+
<h2 className="mb-6 text-3xl font-bold text-white">
355360
Community <span className="text-[#00a6fb]">Articles</span>
356361
</h2>
357362
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
358363
{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">
364+
<div
365+
key={index}
366+
className="group relative overflow-hidden rounded-xl bg-gray-800 p-6 transition-all duration-300 hover:scale-105 hover:shadow-2xl"
367+
>
360368
{trend.image && (
361369
<div className="mb-4">
362370
<img src={trend.image} alt="Article image" className="h-48 w-full rounded-lg object-cover" />
363371
</div>
364372
)}
365373
<div>
366-
<h3 className="mb-3 text-xl font-bold text-white group-hover:text-[#00a6fb] transition-colors duration-300">
374+
<h3 className="mb-3 text-xl font-bold text-white transition-colors duration-300 group-hover:text-[#00a6fb]">
367375
{trend.title}
368376
</h3>
369-
<p className="mb-4 text-gray-300 leading-relaxed">
370-
{trend.description}
371-
</p>
377+
<p className="mb-4 leading-relaxed text-gray-300">{trend.description}</p>
372378
<div className="mb-4 text-sm text-gray-400">
373379
By {trend.author} | {trend.publishTime}
374380
</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+
{trend.type === 'blog' && <p className="line-clamp-3 text-sm text-gray-300">{trend.content}</p>}
382+
<button className="mt-4 inline-flex items-center gap-2 font-semibold text-[#00a6fb] transition-colors duration-300 hover:text-blue-400">
381383
<span>Read More</span>
382384
<ExternalLink className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
383385
</button>
384386
</div>
385387
{/* Hover effect border */}
386-
<div className="absolute inset-0 rounded-xl border-2 border-transparent group-hover:border-[#00a6fb] transition-colors duration-300"></div>
388+
<div className="absolute inset-0 rounded-xl border-2 border-transparent transition-colors duration-300 group-hover:border-[#00a6fb]"></div>
387389
</div>
388390
))}
389391
</div>

0 commit comments

Comments
 (0)