Skip to content

Commit 388c686

Browse files
codeaashucodeaashu
authored
Merge pull request #548 from Smitkhobragade/main
Globe Size Overallping in Mobile Fixed
2 parents 5a4e221 + c00fc2a commit 388c686

File tree

5 files changed

+330
-18
lines changed

5 files changed

+330
-18
lines changed

‎public/assets/SupportedBy/GitBookLight_1.png‎

4.58 KB
Loading

‎src/Page/Home.jsx‎

Lines changed: 111 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Hero = () => {
1515
</h2>
1616
<p className="text-md md:text-md mx-auto my-8 max-w-2xl">Global platform that fulfills all your tech needs</p>
1717
</div>
18-
<div className="relative -top-20 left-20 flex h-[400px] w-full max-w-[600px] items-center justify-center md:h-[500px] lg:h-[600px]">
18+
<div className="relative -top-10 left-16 flex h-[400px] w-full max-w-[600px] items-center justify-center md:h-[500px] lg:h-[600px]">
1919
<Globe />
2020
</div>
2121
</section>
@@ -38,7 +38,7 @@ const TechFeatures = () => {
3838
href="/opportunities"
3939
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
4040
>
41-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
41+
<div className="feature-card-inner rounded-lg p-[2px]">
4242
<h3 className="mb-4 text-2xl font-semibold">Opportunities</h3>
4343
<p>Explore various career and learning opportunities in the tech industry.</p>
4444
</div>
@@ -48,7 +48,7 @@ const TechFeatures = () => {
4848
href="/Resources"
4949
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
5050
>
51-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
51+
<div className="feature-card-inner rounded-lg p-[2px]">
5252
<h3 className="mb-4 text-2xl font-semibold">Resources</h3>
5353
<p>Access a wide range of learning resources, tools, and libraries to boost your skills.</p>
5454
</div>
@@ -58,7 +58,7 @@ const TechFeatures = () => {
5858
href="/ProjectShowcase"
5959
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
6060
>
61-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
61+
<div className="feature-card-inner rounded-lg p-[2px]">
6262
<h3 className="mb-4 text-2xl font-semibold">Project Showcase</h3>
6363
<p>Showcase your projects, get feedback, and inspire others to collaborate.</p>
6464
</div>
@@ -68,7 +68,7 @@ const TechFeatures = () => {
6868
href="/Discussions"
6969
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
7070
>
71-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
71+
<div className="feature-card-inner rounded-lg p-[2px]">
7272
<h3 className="mb-4 text-2xl font-semibold">Tech Discussion</h3>
7373
<p>Engage in tech discussions, share ideas, and stay updated on the latest trends.</p>
7474
</div>
@@ -78,7 +78,7 @@ const TechFeatures = () => {
7878
href="/IdeaSubmission"
7979
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
8080
>
81-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
81+
<div className="feature-card-inner rounded-lg p-[2px]">
8282
<h3 className="mb-4 text-2xl font-semibold">Ideas Submission</h3>
8383
<p>Submit your innovative ideas, get feedback, and explore collaborations.</p>
8484
</div>
@@ -88,7 +88,7 @@ const TechFeatures = () => {
8888
href="/PortfolioIdeas"
8989
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
9090
>
91-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
91+
<div className="feature-card-inner rounded-lg p-[2px]">
9292
<h3 className="mb-4 text-2xl font-semibold">Portfolio Ideas</h3>
9393
<p>Get inspired with creative ideas to enhance your portfolio and make an impact.</p>
9494
</div>
@@ -98,7 +98,7 @@ const TechFeatures = () => {
9898
href="/PortfolioBuilder"
9999
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
100100
>
101-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
101+
<div className="feature-card-inner rounded-lg p-[2px]">
102102
<h3 className="mb-4 text-2xl font-semibold">Portfolio Building</h3>
103103
<p>Learn the best practices to build a standout portfolio that impresses recruiters.</p>
104104
</div>
@@ -108,32 +108,132 @@ const TechFeatures = () => {
108108
href="/ResumeBuilder"
109109
className="feature-card block rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
110110
>
111-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
111+
<div className="feature-card-inner rounded-lg p-[2px]">
112112
<h3 className="mb-4 text-2xl font-semibold">Resume Building</h3>
113113
<p>Create a professional resume with tips and templates tailored to the tech industry.</p>
114114
</div>
115115
</a>
116116
</div>
117117

118+
{/* Card for Adding New Features */}
118119
<a
119120
href="/https://github.com/codeaashu/DevDisplay"
120121
className="feature-card mt-6 block rounded-lg bg-gray-800 p-6 text-center shadow-lg transition duration-300 hover:scale-105 hover:transform hover:bg-gray-700"
121122
>
122-
<div className="border border-transparent transition duration-300 hover:border-blue-500">
123-
<h3 className="mb-4 text-2xl font-semibold">Want to Add New Features?</h3>
123+
<div className="feature-card-inner rounded-lg p-[2px]">
124+
<h3 className="mb-4 text-2xl font-semibold">
125+
Want to <span className="text-blue-400">Add New Features</span> ?
126+
</h3>
124127
<p>Suggest new features you'd love to see and help shape the tech community.</p>
125128
</div>
126129
</a>
127130
</section>
128131
);
129132
};
130133

134+
const supporters = [
135+
{ name: 'Digital Ocean', logo: '/assets/SupportedBy/DigitalOcean.png' },
136+
{ name: 'Git Book', logo: '/assets/SupportedBy/GitBookLight_1.png' },
137+
{ name: 'Melt CD', logo: '/assets/SupportedBy/meltcd.png' },
138+
{ name: 'Microsoft for Startups', logo: '/assets/SupportedBy/MicrosoftForStartups.png' },
139+
{ name: 'MSME', logo: '/assets/SupportedBy/MSME.png' },
140+
{ name: 'Notion', logo: '/assets/SupportedBy/Notion.png' },
141+
{ name: 'Peerlist', logo: '/assets/SupportedBy/Peerlist.png' },
142+
{ name: 'Product Hunt', logo: '/assets/SupportedBy/ProductHunt.png' },
143+
{ name: 'Vercel', logo: '/assets/SupportedBy/Vercel.png' },
144+
];
145+
146+
const SupportedBy = () => {
147+
return (
148+
<div className="my-10 py-10">
149+
<h2 className="my-10 text-center text-4xl font-bold text-[#00a6fb]">Supported By</h2>
150+
151+
<div className="relative mx-auto flex max-w-[99vw] space-x-8 overflow-x-hidden">
152+
{/* First Marquee */}
153+
<div className="animate-marquee flex space-x-8">
154+
{supporters.map((sponsor, index) => (
155+
<div key={index} className="flex h-[100px] w-[200px] flex-shrink-0 items-center justify-center">
156+
<img src={sponsor.logo} alt={sponsor.name} className="h-full w-auto object-contain" />
157+
</div>
158+
))}
159+
</div>
160+
161+
{/* Second Marquee */}
162+
<div className="animate-marquee2 absolute top-0 flex space-x-8">
163+
{supporters.map((sponsor, index) => (
164+
<div
165+
key={index + supporters.length}
166+
className="flex h-[100px] w-[200px] flex-shrink-0 items-center justify-center"
167+
>
168+
<img src={sponsor.logo} alt={sponsor.name} className="h-full w-auto object-contain" />
169+
</div>
170+
))}
171+
</div>
172+
</div>
173+
</div>
174+
);
175+
};
176+
177+
const Footer = () => {
178+
return (
179+
<footer className="w-full bg-gray-800 py-8 text-white">
180+
<div className="mx-auto max-w-screen-xl px-4">
181+
<div className="flex flex-col items-center justify-between md:flex-row">
182+
{/* Left section */}
183+
<div className="mb-6 text-center md:mb-0 md:text-left">
184+
<h4 className="text-xl font-bold text-[#00a6fb]">DevDisplay</h4>
185+
<p className="mt-2 text-sm">Empowering tech enthusiasts to connect, learn, and grow together.</p>
186+
</div>
187+
188+
{/* Middle section */}
189+
<div className="mb-6 flex space-x-6 md:mb-0">
190+
<a href="/about" className="text-sm hover:text-[#00a6fb]">
191+
About Us
192+
</a>
193+
<a href="/contact" className="text-sm hover:text-[#00a6fb]">
194+
Contact
195+
</a>
196+
<a href="/privacy" className="text-sm hover:text-[#00a6fb]">
197+
Privacy Policy
198+
</a>
199+
<a href="/terms" className="text-sm hover:text-[#00a6fb]">
200+
Terms of Service
201+
</a>
202+
</div>
203+
204+
{/* Right section */}
205+
<div className="flex space-x-4">
206+
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
207+
<i className="fab fa-facebook-f text-xl hover:text-[#00a6fb]"></i>
208+
</a>
209+
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
210+
<i className="fab fa-twitter text-xl hover:text-[#00a6fb]"></i>
211+
</a>
212+
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
213+
<i className="fab fa-linkedin-in text-xl hover:text-[#00a6fb]"></i>
214+
</a>
215+
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
216+
<i className="fab fa-github text-xl hover:text-[#00a6fb]"></i>
217+
</a>
218+
</div>
219+
</div>
220+
221+
<div className="mt-8 border-t border-gray-700 pt-4 text-center">
222+
<p className="text-sm">© 2024 DevDisplay. All Rights Reserved.</p>
223+
</div>
224+
</div>
225+
</footer>
226+
);
227+
};
228+
131229
const Home = () => {
132230
return (
133231
<div className="background-wrapper bg-gray-400">
134232
<Navbar />
135233
<Hero />
136234
<TechFeatures />
235+
<SupportedBy />
236+
<Footer />
137237
</div>
138238
);
139239
};

‎src/Page/TechDisplay.jsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from 'react';
2+
import { Home, Briefcase, BookOpen, Code, Lightbulb, MessageCircle, User, FileText } from 'lucide-react';
3+
import Navbar from '../components/Navbar';
4+
import Globe from '../components/Globe';
5+
6+
const Sidebar = () => {
7+
return (
8+
<div className="flex h-screen flex-col bg-gray-800 p-4 text-white">
9+
<div className="items-left flex flex-col">
10+
<img src="./devDisplayLOGO.png" alt="DevDisplay" className="mb-4 h-16 w-16" />
11+
<nav className="flex flex-col gap-4">
12+
<a href="/Home" className="flex items-center gap-2">
13+
<Home className="h-6 w-6" />
14+
Home
15+
</a>
16+
<a href="/Opportunities" className="flex items-center gap-2">
17+
<Briefcase className="h-6 w-6" />
18+
Opportunities
19+
</a>
20+
<a href="/Resources" className="flex items-center gap-2">
21+
<BookOpen className="h-6 w-6" />
22+
Tech Resources
23+
</a>
24+
<a href="/Projects" className="flex items-center gap-2">
25+
<Code className="h-6 w-6" />
26+
Projects
27+
</a>
28+
<a href="/IdeaSubmission" className="flex items-center gap-2">
29+
<Lightbulb className="h-6 w-6" />
30+
Idea Submission
31+
</a>
32+
<a href="/Discussions" className="flex items-center gap-2">
33+
<MessageCircle className="h-6 w-6" />
34+
Discussions
35+
</a>
36+
<a href="/PortfolioBuilder" className="flex items-center gap-2">
37+
<User className="h-6 w-6" />
38+
Portfolio Builder
39+
</a>
40+
<a href="/ResumeBuilder" className="flex items-center gap-2">
41+
<FileText className="h-6 w-6" />
42+
Resume Builder
43+
</a>
44+
</nav>
45+
</div>
46+
</div>
47+
);
48+
};
49+
50+
const Hero = () => {
51+
return (
52+
<section className="hero-section mt-20 flex min-h-screen flex-col items-center justify-center text-white ">
53+
<div className="flex w-full flex-col items-center justify-center px-8 text-center">
54+
<p className="text-md mx-auto mb-10 w-fit rounded-full bg-[#ffffff36] p-2 text-center">
55+
We're Open Source {'>'} Star Now🌟
56+
</p>
57+
<h1 className="my-4 text-4xl font-bold tracking-widest md:text-4xl">One Place for all your Tech Needs</h1>
58+
<h2 className="my-4 text-6xl font-bold">
59+
Dev <span className="text-[#00a6fb]">Display</span>
60+
</h2>
61+
<p className="text-md md:text-md mx-auto my-8 max-w-2xl">Global platform that fulfills all your tech needs</p>
62+
</div>
63+
<div className="mt-20 h-fit w-full max-w-[600px] overflow-visible bg-red-50 md:h-[500px] lg:h-[600px]">
64+
<Globe />
65+
</div>
66+
</section>
67+
);
68+
};
69+
70+
const TechFeatures = () => {
71+
return (
72+
<section className="tech-features-section max-w-[80%] px-4 py-16 text-white">
73+
<div className="mx-auto my-12 max-w-[80%] text-center">
74+
<h2 className="my-6 text-4xl font-bold text-[#00a6fb]">All Tech Features in One Place</h2>
75+
<p className="mx-auto my-12 mb-8 max-w-3xl text-xl">
76+
Discover a range of tools, resources, and opportunities to enhance your tech journey and skills.
77+
</p>
78+
</div>
79+
80+
{/* Grid Layout for Features */}
81+
<div className="grid grid-cols-1 gap-6 text-center md:grid-cols-2 lg:grid-cols-4">
82+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
83+
<h3 className="mb-4 text-2xl font-semibold">Opportunities</h3>
84+
<p>Explore various career and learning opportunities in the tech industry.</p>
85+
</div>
86+
87+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
88+
<h3 className="mb-4 text-2xl font-semibold">Resources</h3>
89+
<p>Access a wide range of learning resources, tools, and libraries to boost your skills.</p>
90+
</div>
91+
92+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
93+
<h3 className="mb-4 text-2xl font-semibold">Project Showcase</h3>
94+
<p>Showcase your projects, get feedback, and inspire others to collaborate.</p>
95+
</div>
96+
97+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
98+
<h3 className="mb-4 text-2xl font-semibold">Tech Discussion</h3>
99+
<p>Engage in tech discussions, share ideas, and stay updated on the latest trends.</p>
100+
</div>
101+
102+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
103+
<h3 className="mb-4 text-2xl font-semibold">Ideas Submission</h3>
104+
<p>Submit your innovative ideas, get feedback, and explore collaborations.</p>
105+
</div>
106+
107+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
108+
<h3 className="mb-4 text-2xl font-semibold">Portfolio Ideas</h3>
109+
<p>Get inspired with creative ideas to enhance your portfolio and make an impact.</p>
110+
</div>
111+
112+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
113+
<h3 className="mb-4 text-2xl font-semibold">Portfolio Building</h3>
114+
<p>Learn the best practices to build a standout portfolio that impresses recruiters.</p>
115+
</div>
116+
117+
<div className="feature-card rounded-lg bg-gray-800 p-6 shadow-lg transition duration-300 hover:bg-gray-700">
118+
<h3 className="mb-4 text-2xl font-semibold">Resume Building</h3>
119+
<p>Create a professional resume with tips and templates tailored to the tech industry.</p>
120+
</div>
121+
</div>
122+
<div className="feature-card mt-6 rounded-lg bg-gray-800 p-6 text-center shadow-lg transition duration-300 hover:bg-gray-700">
123+
<h3 className="mb-4 text-2xl font-semibold">Want to Add Features?</h3>
124+
<p>Suggest new features you'd love to see and help shape the tech community.</p>
125+
</div>
126+
</section>
127+
);
128+
};
129+
130+
const TechDisplay = () => {
131+
return (
132+
<div className="background-wrapper bg-gray-400">
133+
<Navbar />
134+
{/* <Hero /> */}
135+
<TechFeatures />
136+
</div>
137+
);
138+
};
139+
140+
export default TechDisplay;

0 commit comments

Comments
 (0)