Skip to content

Commit c407ceb

Browse files
SmitkhobragadeSmitkhobragade
committed
Added Footer
1 parent 7002d34 commit c407ceb

File tree

2 files changed

+99
-10
lines changed

2 files changed

+99
-10
lines changed

‎src/Page/Home.jsx‎

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -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,18 +108,19 @@ 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+
<div className="feature-card-inner rounded-lg p-[2px]">
123124
<h3 className="mb-4 text-2xl font-semibold">
124125
Want to <span className="text-blue-400">Add New Features</span> ?
125126
</h3>
@@ -147,7 +148,7 @@ const SupportedBy = () => {
147148
<div className="my-10 py-10">
148149
<h2 className="my-10 text-center text-4xl font-bold text-[#00a6fb]">Supported By</h2>
149150

150-
<div className="relative mx-auto flex max-w-[99vw] overflow-x-hidden">
151+
<div className="relative mx-auto flex max-w-[99vw] space-x-8 overflow-x-hidden">
151152
{/* First Marquee */}
152153
<div className="animate-marquee flex space-x-8">
153154
{supporters.map((sponsor, index) => (
@@ -173,13 +174,66 @@ const SupportedBy = () => {
173174
);
174175
};
175176

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+
176229
const Home = () => {
177230
return (
178231
<div className="background-wrapper bg-gray-400">
179232
<Navbar />
180233
<Hero />
181234
<TechFeatures />
182235
<SupportedBy />
236+
<Footer />
183237
</div>
184238
);
185239
};

‎src/index.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,38 @@ code {
9494
.animate-marquee2 {
9595
animation: marquee2 25s linear infinite;
9696
}
97+
98+
.feature-card {
99+
position: relative;
100+
overflow: hidden;
101+
}
102+
103+
/* Create the border effect */
104+
.feature-card::before {
105+
content: '';
106+
position: absolute;
107+
top: 0;
108+
left: 0;
109+
right: 0;
110+
bottom: 0;
111+
border: 3px solid transparent;
112+
border-radius: 10px;
113+
background: conic-gradient(#0ea5e9 20deg, transparent 120deg);
114+
background-size: 400% 400%;
115+
z-index: -1;
116+
animation: rotate 10s linear infinite;
117+
}
118+
119+
@keyframes rotate {
120+
0% {
121+
transform: rotate(0deg) scale(1);
122+
}
123+
100% {
124+
transform: rotate(360deg) scale(1);
125+
}
126+
}
127+
128+
.feature-card-inner {
129+
position: relative;
130+
z-index: 1;
131+
}

0 commit comments

Comments
 (0)