Skip to content

Commit 707e719

Browse files
codeaashucodeaashu
authored
Merge pull request #547 from Smitkhobragade/main
Home Page added
2 parents 5f9a0f4 + bee74e3 commit 707e719

File tree

6 files changed

+313
-1
lines changed

6 files changed

+313
-1
lines changed

‎package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@testing-library/jest-dom": "^5.17.0",
1111
"@testing-library/react": "^14.2.1",
1212
"@testing-library/user-event": "^14.5.2",
13+
"cobe": "^0.6.3",
1314
"flag": "^5.0.1",
1415
"framer-motion": "^11.11.1",
1516
"lucide-react": "^0.447.0",

‎src/App.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,30 @@ div .gt_float_switcher {
3838
max-height: 200px;
3939
overflow-y: auto;
4040
}
41+
42+
/* .hero-section {
43+
background: radial-gradient(circle, rgba(0, 0, 0) 1px, transparent 1px),
44+
radial-gradient(circle, rgb(0, 0, 0) 1px, transparent 1px);
45+
background-position: 0 0, 25px 25px;
46+
background-size: 50px 50px;
47+
z-index: -1;
48+
} */
49+
50+
.background-wrapper {
51+
position: relative;
52+
min-height: 100vh;
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
justify-content: center;
57+
background-size: 40px 40px;
58+
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
59+
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
60+
background-color: #141d2f; /* Adjust color as desired */
61+
}
62+
63+
.globe-container {
64+
width: 600px;
65+
height: 600px;
66+
margin: 0 auto;
67+
}

‎src/Page/TechDisplay.jsx‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import { Home, Briefcase, BookOpen, Code, Lightbulb, MessageCircle, User, FileText } from 'lucide-react';
3+
import Navbar from '../components/Navbar';
4+
import Globe from '../components/Globe';
35

46
const Sidebar = () => {
57
return (
@@ -45,4 +47,94 @@ const Sidebar = () => {
4547
);
4648
};
4749

48-
export default Sidebar;
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="relative -top-20 left-20 flex h-[400px] w-full max-w-[600px] items-center justify-center 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;

‎src/components/Globe.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useEffect, useRef } from 'react';
2+
import createGlobe from 'cobe';
3+
4+
function Globe() {
5+
const canvasRef = useRef();
6+
7+
useEffect(() => {
8+
let phi = 0;
9+
10+
// Initialize the globe with the canvas ref
11+
const globe = createGlobe(canvasRef.current, {
12+
devicePixelRatio: 1,
13+
width: 500, // Double the resolution for better quality
14+
height: 500, // Double the resolution for better quality
15+
phi: 0,
16+
theta: 0,
17+
dark: 1,
18+
diffuse: 1.2,
19+
mapSamples: 16000,
20+
mapBrightness: 6,
21+
baseColor: [0.3, 0.3, 0.3],
22+
markerColor: [0.1, 0.8, 1],
23+
glowColor: [1, 1, 1],
24+
markers: [
25+
// Example marker locations (longitude, latitude)
26+
{ location: [37.7595, -122.4367], size: 0.03 }, // San Francisco
27+
{ location: [40.7128, -74.006], size: 0.1 }, // New York
28+
],
29+
onRender: (state) => {
30+
// Animation frame handler
31+
state.phi = phi;
32+
phi += 0.01; // Rotation speed
33+
},
34+
});
35+
36+
return () => {
37+
globe.destroy();
38+
};
39+
}, []);
40+
41+
return (
42+
<div style={{ width: '100%', height: '100%' }}>
43+
<canvas
44+
ref={canvasRef}
45+
style={{
46+
width: '100%', // Make canvas responsive
47+
height: '100%', // Make canvas responsive
48+
maxWidth: '100%',
49+
aspectRatio: 1,
50+
}}
51+
/>
52+
</div>
53+
);
54+
}
55+
56+
export default Globe;

‎src/components/Navbar.jsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React, { useState } from 'react';
2+
import { Home, User, Medal, HandHelping, Coins } from 'lucide-react';
3+
4+
const Navbar = () => {
5+
const [isOpen, setIsOpen] = useState(false);
6+
7+
const toggleMenu = () => {
8+
setIsOpen(!isOpen);
9+
};
10+
11+
return (
12+
<nav className="w-full bg-gray-800 text-white shadow-md">
13+
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
14+
{/* Logo */}
15+
<div className="text-2xl font-bold">
16+
<img src="./devDisplayLOGO.png" alt="DevDisplay" className="h-16 w-16" />
17+
</div>
18+
19+
{/* Links for larger screens */}
20+
<div className="hidden items-center gap-4 space-x-6 md:flex">
21+
<a href="/Home" className="flex items-center gap-2 rounded-full border border-white p-3">
22+
<Home className="h-6 w-6" />
23+
Home
24+
</a>
25+
<a href="/About" className="flex items-center gap-2 rounded-full border border-white p-3">
26+
<Medal className="h-6 w-6" />
27+
About
28+
</a>
29+
<a href="/Contribute" className="flex items-center gap-2 rounded-full border border-white p-3">
30+
<HandHelping className="h-6 w-6" />
31+
Contribute
32+
</a>
33+
<a href="/SponsorUs" className="flex items-center gap-2 rounded-full border border-white p-3">
34+
<Coins className="h-6 w-6" />
35+
Sponsor Us
36+
</a>
37+
38+
{/* Profile Icon */}
39+
<a href="/Profile" className="flex items-center gap-2">
40+
<User className="h-10 w-10 rounded-full border-2 border-white p-1" />
41+
</a>
42+
</div>
43+
44+
{/* Mobile Menu Toggle */}
45+
<button className="text-white focus:outline-none md:hidden" onClick={toggleMenu}>
46+
<svg
47+
className="h-6 w-6"
48+
fill="none"
49+
stroke="currentColor"
50+
viewBox="0 0 24 24"
51+
xmlns="http://www.w3.org/2000/svg"
52+
>
53+
<path
54+
strokeLinecap="round"
55+
strokeLinejoin="round"
56+
strokeWidth="2"
57+
d={isOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'}
58+
/>
59+
</svg>
60+
</button>
61+
</div>
62+
63+
{/* Mobile Menu */}
64+
{isOpen && (
65+
<div className="flex flex-col space-y-4 bg-gray-800 px-4 pb-4 md:hidden">
66+
{/* Profile Icon at the Top */}
67+
<a
68+
href="/Profile"
69+
className={`flex transform items-center gap-2 rounded-full border border-white p-3 transition duration-500 ease-in-out ${
70+
isOpen ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
71+
} delay-[100ms]`}
72+
>
73+
<User className="h-8 w-8 rounded-full border-2 border-white p-1" />
74+
<span>Profile</span>
75+
</a>
76+
77+
{/* Menu Items with Transition */}
78+
<a
79+
href="/Home"
80+
className={`flex transform items-center gap-2 rounded-full border border-white p-3 transition duration-500 ease-out ${
81+
isOpen ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
82+
} delay-[200ms]`}
83+
>
84+
<Home className="h-6 w-6" />
85+
Home
86+
</a>
87+
<a
88+
href="/About"
89+
className={`flex transform items-center gap-2 rounded-full border border-white p-3 transition duration-500 ease-out ${
90+
isOpen ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
91+
} delay-[300ms]`}
92+
>
93+
<Medal className="h-6 w-6" />
94+
About
95+
</a>
96+
<a
97+
href="/Contribute"
98+
className={`flex transform items-center gap-2 rounded-full border border-white p-3 transition duration-500 ease-out ${
99+
isOpen ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
100+
} delay-[400ms]`}
101+
>
102+
<HandHelping className="h-6 w-6" />
103+
Contribute
104+
</a>
105+
<a
106+
href="/SponsorUs"
107+
className={`flex transform items-center gap-2 rounded-full border border-white p-3 transition duration-500 ease-out ${
108+
isOpen ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
109+
} delay-[500ms]`}
110+
>
111+
<Coins className="h-6 w-6" />
112+
Sponsor Us
113+
</a>
114+
</div>
115+
)}
116+
</nav>
117+
);
118+
};
119+
120+
export default Navbar;

0 commit comments

Comments
 (0)