edit home section 5
This commit is contained in:
@@ -59,7 +59,7 @@
|
||||
|
||||
</div>
|
||||
<!-- Home Section 3 -->
|
||||
<section class="relative w-screen h-[600px] mb-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
|
||||
<section class="relative w-screen h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
|
||||
<div class="carousel relative w-full h-[600px]">
|
||||
<div class="carousel-slides absolute inset-0">
|
||||
<div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-3000">
|
||||
@@ -101,31 +101,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Home Section 4 -->
|
||||
<!-- Home Section 4 (Responsive) -->
|
||||
<section class="relative w-screen min-h-[800px] pt-24 pb-24 my-24 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg4_1.webp');">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80"></div>
|
||||
<div class="relative z-10 w-full py-12">
|
||||
|
||||
<!-- Desktop Layout -->
|
||||
<div class="relative z-10 w-full py-12 hidden md:block">
|
||||
<div class="circular-layout">
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
|
||||
<h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-medium">Circl.</span></h1>
|
||||
<h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
|
||||
</div>
|
||||
<!-- Top -->
|
||||
<div class="circular-button" style="top: -15%; left: 50%; transform: translate(-50%, -50%);">
|
||||
<div class="circular-button" style="top: -10%; left: 50%; transform: translate(-50%, -50%);">
|
||||
<button class="pill-button" style="animation-delay: 0ms;">File Drive</button>
|
||||
</div>
|
||||
|
||||
<!-- Top Right -->
|
||||
<div class="circular-button" style="top: 10%; right: -10%; transform: translate(50%, -50%);">
|
||||
<div class="circular-button" style="top: 10%; right: -5%; transform: translate(50%, -50%);">
|
||||
<button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
|
||||
</div>
|
||||
|
||||
<!-- Right -->
|
||||
<div class="circular-button" style="top: 50%; right: -25%; transform: translate(50%, -50%);">
|
||||
<div class="circular-button" style="top: 50%; right: -20%; transform: translate(50%, -50%);">
|
||||
<button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Right -->
|
||||
<div class="circular-button" style="bottom: 5%; right: -10%; transform: translate(50%, 50%);">
|
||||
<div class="circular-button" style="bottom: 10%; right: -10%; transform: translate(50%, 50%);">
|
||||
<button class="pill-button" style="animation-delay: 600ms;">Video Call</button>
|
||||
</div>
|
||||
|
||||
@@ -135,22 +137,57 @@
|
||||
</div>
|
||||
|
||||
<!-- Bottom Left -->
|
||||
<div class="circular-button" style="bottom: 10%; left: -10%; transform: translate(-50%, 50%);">
|
||||
<div class="circular-button" style="bottom: 10%; left: -5%; transform: translate(-50%, 50%);">
|
||||
<button class="pill-button" style="animation-delay: 1000ms;">Calendar</button>
|
||||
</div>
|
||||
|
||||
<!-- Left -->
|
||||
<div class="circular-button" style="top: 50%; left: -25%; transform: translate(-50%, -50%);">
|
||||
<div class="circular-button" style="top: 50%; left: -20%; transform: translate(-50%, -50%);">
|
||||
<button class="pill-button" style="animation-delay: 1200ms;">AI Assistant</button>
|
||||
</div>
|
||||
|
||||
<!-- upper left -->
|
||||
<div class="circular-button" style="top: 10%; left: -15%; transform: translate(-50%, -50%);">
|
||||
<div class="circular-button" style="top: 10%; left: -10%; transform: translate(-50%, -50%);">
|
||||
<button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Layout -->
|
||||
<div class="relative z-10 w-full md:hidden">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="hero-heading-2 fade-up max-w-md mx-4">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-4 px-6 max-w-sm mx-auto">
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 0ms;">File Drive</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 200ms;">Circle Docs</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 400ms;">Secure VPN</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 600ms;">Video Call</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 800ms;">Circl Mail</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 1000ms;">Calendar</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 1200ms;">AI Assistant</button>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<button class="pill-button w-full" style="animation-delay: 1400ms;">Project Board</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
</main>
|
||||
|
||||
|
||||
@@ -61,9 +61,7 @@
|
||||
.main-button {
|
||||
@apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.starry-bg {
|
||||
background-image:
|
||||
radial-gradient(circle at center, transparent 0%, black 100%),
|
||||
@@ -80,26 +78,60 @@
|
||||
}
|
||||
|
||||
.circular-layout {
|
||||
@apply relative w-[400px] h-[400px] md:w-[500px] md:h-[500px] mx-auto;
|
||||
@apply relative w-[500px] h-[500px] md:w-[600px] md:h-[600px] mx-auto;
|
||||
}
|
||||
|
||||
.circular-button {
|
||||
@apply absolute opacity-0 z-20;
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.circular-button {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.circular-button[style*="right"] {
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.circular-button[style*="bottom"] {
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.circular-button[style*="bottom"][style*="right"] {
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bg-black\/80 {
|
||||
@apply bg-none;
|
||||
}
|
||||
|
||||
.circular-layout {
|
||||
@apply flex flex-col justify-center items-center w-full max-w-full h-auto;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
@apply relative top-0 mb-5;
|
||||
}
|
||||
|
||||
.pill-button-container {
|
||||
@apply mb-4 w-full max-w-[350px];
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
@apply w-full px-6 py-3 text-center text-base rounded-[50px];
|
||||
}
|
||||
|
||||
body, html {
|
||||
@apply overflow-x-hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
@apply mx-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
Reference in New Issue
Block a user