Skip to content

Commit

Permalink
Avdhesh-Varshney#1059 - homepage styled
Browse files Browse the repository at this point in the history
  • Loading branch information
@KajalDeore04
KajalDeore04 committed Jan 11, 2025
1 parent e134e6f commit 472c1e1
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 37 deletions.
37 changes: 37 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,43 @@
animation: neonGlow 1.5s infinite alternate;
}

.scribble {
position: relative;
background-image: none;
background-color: transparent;
color: #ffb34a;
font-size: 2.8rem;

&::after {
content: '';
position: absolute;
bottom: -14%;
left: 0;
height: 30%;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='547' height='22' fill='none'%3E%3Cmask id='a' width='546' height='23' x='0' y='1' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M0 1h246v23H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%2300a661' d='M.225 13.987c40.77-3.247 81.218-6.304 122.486-5.61 40.217.68 80.07 3.493 119.823 8.284 4.828.577 4.966-4.727.193-5.301-40.597-4.886-82.029-7.082-123.059-6.436-39.896.627-80.713 2.548-119.53 8.822-.233.04-.132.263.087.25v-.009z'/%3E%3C/g%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: auto;
width: 300%;
background-image: linear-gradient(
to right,
currentcolor 40%,
transparent 50%
);
background-repeat: no-repeat;
animation: background-size-300 0.4s 1.5s ease-in both;
background-size: 300%
}
}

@keyframes background-size-300 {
from {
background-size: 0%;
}
to {
background-size: 100%;
}
}

@keyframes neonGlow {
from {
box-shadow: 0 0 10px #60A5FA, 0 0 20px #60A5FA, 0 0 30px #60A5FA, 0 0 40px #60A5FA, 0 0 70px #60A5FA;
Expand Down
161 changes: 124 additions & 37 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,46 +44,83 @@ export default function Home() {
<div className="flex flex-col gap-5">
{/* Hero Section */}
<header className="relative bg-gradient-to-r from-blue-500 via-purple-600 to-indigo-700 text-white text-center py-16 px-8 rounded-lg shadow-xl">
<h1 className="text-4xl font-extrabold">Supercharge Your Web Development Journey</h1>
<h1 className="text-4xl font-extrabold">Supercharge Your <span className="scribble ">Web Development</span> Journey</h1>
<p className="mt-4 text-lg">
Explore, learn, and contribute to diverse web development projects. Empower your skills with open-source.
</p>
<Link href="/angular">
<button className="bg-white text-blue-600 mt-6 px-6 py-3 rounded-lg shadow-md font-semibold hover:bg-gray-100 transition-all">
Get Started
</button>

<button
className="relative inline-block mt-5 p-px font-semibold leading-6 text-white bg-gray-800 shadow-2xl cursor-pointer rounded-xl shadow-zinc-900 transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95"
>
<span
className="absolute inset-0 rounded-xl bg-gradient-to-r from-teal-400 via-blue-500 to-purple-500 p-[2px] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
></span>

<span className="relative z-1 block px-6 py-3 rounded-xl bg-gray-950">
<div className="relative z-1 flex items-center space-x-2">
<span className="transition-all duration-500 group-hover:translate-x-1 text-transparent bg-clip-text bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E]"
>Let's get started</span>
<svg
className="w-6 h-6 transition-transform duration-500 group-hover:translate-x-1"
data-slot="icon"
aria-hidden="true"
fill="#FF675E"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
fill-rule="evenodd"
></path>
</svg>
</div>
</span>
</button>

</Link>
</header>

{/* Problem-Solution Showcase */}
<section className="bg-gray-800 text-gray-200 py-16 px-8 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold text-center mb-6 text-white">
Why Web Master Log?
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-all">
<h3 className="text-xl font-semibold mb-3 text-white">Real Projects</h3>
<p className="text-gray-300">
Access a wide range of real-world projects, from beginner-friendly to advanced.
</p>
</div>
<div className="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-all">
<h3 className="text-xl font-semibold mb-3 text-white">Collaborative Learning</h3>
<p className="text-gray-300">
Contribute, learn, and grow by collaborating with a vibrant developer community.
</p>
</div>
<div className="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-all">
<h3 className="text-xl font-semibold mb-3 text-white">Beginner-Friendly</h3>
<p className="text-gray-300">
Start your journey with easy-to-follow documentation and guides.
</p>
</div>
</div>
</section>
<section className="bg-gradient-to-br from-gray-900 to-black text-gray-200 py-16 px-8 rounded-lg shadow-lg relative">
<h2 className="text-3xl font-extrabold text-center mb-10 text-white">
Why Web Master Log?
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
<div className="bg-gradient-to-tr from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg hover:scale-105 transform transition duration-300 relative">
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full shadow-md animate-ping"></div>
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full"></div>
<h3 className="text-2xl font-semibold mb-3 text-white">Real Projects</h3>
<p className="text-gray-400">
Access a wide range of real-world projects, from beginner-friendly to advanced.
</p>
<div className="absolute inset-0 border border-gray-600 rounded-lg"></div>
</div>
<div className="bg-gradient-to-tr from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg hover:scale-105 transform transition duration-300 relative">
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full shadow-md animate-ping"></div>
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full"></div>
<h3 className="text-2xl font-semibold mb-3 text-white">Collaborative Learning</h3>
<p className="text-gray-400">
Contribute, learn, and grow by collaborating with a vibrant developer community.
</p>
<div className="absolute inset-0 border border-gray-600 rounded-lg"></div>
</div>
<div className="bg-gradient-to-tr from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg shadow-lg hover:scale-105 transform transition duration-300 relative">
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full shadow-md animate-ping"></div>
<div className="absolute top-4 right-4 w-3 h-3 bg-white rounded-full"></div>
<h3 className="text-2xl font-semibold mb-3 text-white">Beginner-Friendly</h3>
<p className="text-gray-400">
Start your journey with easy-to-follow documentation and guides.
</p>
<div className="absolute inset-0 border border-gray-600 rounded-lg"></div>
</div>
</div>
</section>


{/* Explore Projects */}
<section className="bg-gradient-to-b from-indigo-700 to-purple-900 text-white py-16 px-8 rounded-lg shadow-xl">
<section className="bg-gradient-to-tr from-gray-900 to-black text-gray-200 py-16 px-8 rounded-lg shadow-xl">
<h2 className="text-3xl font-bold text-center mb-6">Explore Projects</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{randomProjects.map((project, index) => (
Expand All @@ -98,15 +135,40 @@ export default function Home() {
</div>
<div className="text-center mt-8">
<Link href={'/angular'}>
<button className="bg-white text-indigo-700 px-6 py-3 rounded-lg shadow-md font-semibold hover:bg-gray-100 transition-all">
Browse All Projects
</button>
<button
className="relative inline-block mt-5 p-px font-semibold leading-6 text-white bg-gray-800 shadow-2xl cursor-pointer rounded-xl shadow-zinc-900 transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95"
>
<span
className="absolute inset-0 rounded-xl bg-gradient-to-r from-teal-400 via-blue-500 to-purple-500 p-[2px] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
></span>

<span className="relative z-1 block px-6 py-3 rounded-xl bg-gray-950">
<div className="relative z-1 flex items-center space-x-2">
<span className="transition-all duration-500 group-hover:translate-x-1 text-transparent bg-clip-text bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E]"
>Browse All</span>
<svg
className="w-6 h-6 transition-transform duration-500 group-hover:translate-x-1"
data-slot="icon"
aria-hidden="true"
fill="#FF675E"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
fill-rule="evenodd"
></path>
</svg>
</div>
</span>
</button>
</Link>
</div>
</section>

{/* Call to Contribute */}
<section className="bg-gray-800 py-16 px-8 text-gray-200 rounded-lg shadow-lg">
<section className="bg-gradient-to-br from-gray-900 to-black text-gray-200 py-16 px-8 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold text-center mb-6 text-white">
Ready to Contribute?
</h2>
Expand All @@ -115,9 +177,34 @@ export default function Home() {
easy, rewarding, and fun!
</p>
<div className="flex justify-center">
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md font-semibold hover:bg-blue-700 transition-all">
Start Contributing
</button>
<button
className="relative inline-block mt-5 p-px font-semibold leading-6 text-white bg-gray-800 shadow-2xl cursor-pointer rounded-xl shadow-zinc-900 transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95"
>
<span
className="absolute inset-0 rounded-xl bg-gradient-to-r from-teal-400 via-blue-500 to-purple-500 p-[2px] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
></span>

<span className="relative z-1 block px-6 py-3 rounded-xl bg-gray-950">
<div className="relative z-1 flex items-center space-x-2">
<span className="transition-all duration-500 group-hover:translate-x-1 text-transparent bg-clip-text bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E]"
>Start Contributing</span>
<svg
className="w-6 h-6 transition-transform duration-500 group-hover:translate-x-1"
data-slot="icon"
aria-hidden="true"
fill="#FF675E"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
fill-rule="evenodd"
></path>
</svg>
</div>
</span>
</button>
</div>
</section>

Expand Down

0 comments on commit 472c1e1

Please sign in to comment.