Skip to content

Commit

Permalink
Added Footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Smitkhobragade
Smitkhobragade committed Nov 18, 2024
1 parent 7002d34 commit c407ceb
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 10 deletions.
74 changes: 64 additions & 10 deletions src/Page/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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) => (
Expand All @@ -173,13 +174,66 @@ 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">
<Navbar />
<Hero />
<TechFeatures />
<SupportedBy />
<Footer />
</div>
);
};
Expand Down
35 changes: 35 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit c407ceb

Please sign in to comment.