From c407cebe76a7052726d7bb4ddc6705d98f41ec5a Mon Sep 17 00:00:00 2001
From: Smit Khobragade <smitkbgd@gmail.com>
Date: Mon, 18 Nov 2024 22:23:01 +0530
Subject: [PATCH] Added Footer

---
 src/Page/Home.jsx | 74 ++++++++++++++++++++++++++++++++++++++++-------
 src/index.css     | 35 ++++++++++++++++++++++
 2 files changed, 99 insertions(+), 10 deletions(-)

diff --git a/src/Page/Home.jsx b/src/Page/Home.jsx
index fa67b4a..cd27032 100644
--- a/src/Page/Home.jsx
+++ b/src/Page/Home.jsx
@@ -38,7 +38,7 @@ const TechFeatures = () => {
           href="/opportunities"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Opportunities</h3>
             <p>Explore various career and learning opportunities in the tech industry.</p>
           </div>
@@ -48,7 +48,7 @@ const TechFeatures = () => {
           href="/Resources"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Resources</h3>
             <p>Access a wide range of learning resources, tools, and libraries to boost your skills.</p>
           </div>
@@ -58,7 +58,7 @@ const TechFeatures = () => {
           href="/ProjectShowcase"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Project Showcase</h3>
             <p>Showcase your projects, get feedback, and inspire others to collaborate.</p>
           </div>
@@ -68,7 +68,7 @@ const TechFeatures = () => {
           href="/Discussions"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Tech Discussion</h3>
             <p>Engage in tech discussions, share ideas, and stay updated on the latest trends.</p>
           </div>
@@ -78,7 +78,7 @@ const TechFeatures = () => {
           href="/IdeaSubmission"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Ideas Submission</h3>
             <p>Submit your innovative ideas, get feedback, and explore collaborations.</p>
           </div>
@@ -88,7 +88,7 @@ const TechFeatures = () => {
           href="/PortfolioIdeas"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Portfolio Ideas</h3>
             <p>Get inspired with creative ideas to enhance your portfolio and make an impact.</p>
           </div>
@@ -98,7 +98,7 @@ const TechFeatures = () => {
           href="/PortfolioBuilder"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Portfolio Building</h3>
             <p>Learn the best practices to build a standout portfolio that impresses recruiters.</p>
           </div>
@@ -108,18 +108,19 @@ const TechFeatures = () => {
           href="/ResumeBuilder"
           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"
         >
-          <div className="border border-transparent transition duration-300 hover:border-blue-500">
+          <div className="feature-card-inner rounded-lg p-[2px]">
             <h3 className="mb-4 text-2xl font-semibold">Resume Building</h3>
             <p>Create a professional resume with tips and templates tailored to the tech industry.</p>
           </div>
         </a>
       </div>
 
+      {/* Card for Adding New Features */}
       <a
         href="/https://github.com/codeaashu/DevDisplay"
         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"
       >
-        <div className="border border-transparent transition duration-300 hover:border-blue-500">
+        <div className="feature-card-inner rounded-lg p-[2px]">
           <h3 className="mb-4 text-2xl font-semibold">
             Want to <span className="text-blue-400">Add New Features</span> ?
           </h3>
@@ -147,7 +148,7 @@ const SupportedBy = () => {
     <div className="my-10 py-10">
       <h2 className="my-10 text-center text-4xl font-bold text-[#00a6fb]">Supported By</h2>
 
-      <div className="relative mx-auto flex max-w-[99vw] overflow-x-hidden">
+      <div className="relative mx-auto flex max-w-[99vw] space-x-8 overflow-x-hidden">
         {/* First Marquee */}
         <div className="animate-marquee flex space-x-8">
           {supporters.map((sponsor, index) => (
@@ -173,6 +174,58 @@ const SupportedBy = () => {
   );
 };
 
+const Footer = () => {
+  return (
+    <footer className="w-full bg-gray-800 py-8 text-white">
+      <div className="mx-auto max-w-screen-xl px-4">
+        <div className="flex flex-col items-center justify-between md:flex-row">
+          {/* Left section */}
+          <div className="mb-6 text-center md:mb-0 md:text-left">
+            <h4 className="text-xl font-bold text-[#00a6fb]">DevDisplay</h4>
+            <p className="mt-2 text-sm">Empowering tech enthusiasts to connect, learn, and grow together.</p>
+          </div>
+
+          {/* Middle section */}
+          <div className="mb-6 flex space-x-6 md:mb-0">
+            <a href="/about" className="text-sm hover:text-[#00a6fb]">
+              About Us
+            </a>
+            <a href="/contact" className="text-sm hover:text-[#00a6fb]">
+              Contact
+            </a>
+            <a href="/privacy" className="text-sm hover:text-[#00a6fb]">
+              Privacy Policy
+            </a>
+            <a href="/terms" className="text-sm hover:text-[#00a6fb]">
+              Terms of Service
+            </a>
+          </div>
+
+          {/* Right section */}
+          <div className="flex space-x-4">
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+              <i className="fab fa-facebook-f text-xl hover:text-[#00a6fb]"></i>
+            </a>
+            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
+              <i className="fab fa-twitter text-xl hover:text-[#00a6fb]"></i>
+            </a>
+            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
+              <i className="fab fa-linkedin-in text-xl hover:text-[#00a6fb]"></i>
+            </a>
+            <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+              <i className="fab fa-github text-xl hover:text-[#00a6fb]"></i>
+            </a>
+          </div>
+        </div>
+
+        <div className="mt-8 border-t border-gray-700 pt-4 text-center">
+          <p className="text-sm">© 2024 DevDisplay. All Rights Reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
 const Home = () => {
   return (
     <div className="background-wrapper bg-gray-400">
@@ -180,6 +233,7 @@ const Home = () => {
       <Hero />
       <TechFeatures />
       <SupportedBy />
+      <Footer />
     </div>
   );
 };
diff --git a/src/index.css b/src/index.css
index 5d45e52..19fcd82 100644
--- a/src/index.css
+++ b/src/index.css
@@ -94,3 +94,38 @@ code {
 .animate-marquee2 {
   animation: marquee2 25s linear infinite;
 }
+
+.feature-card {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Create the border effect */
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 3px solid transparent;
+  border-radius: 10px;
+  background: conic-gradient(#0ea5e9 20deg, transparent 120deg);
+  background-size: 400% 400%;
+  z-index: -1;
+  animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+.feature-card-inner {
+  position: relative;
+  z-index: 1;
+}