edit home section 5
This commit is contained in:
parent
ea2b94bf65
commit
a8a91f15b2
113
dist/output.css
vendored
113
dist/output.css
vendored
@ -841,14 +841,14 @@ body:is(.dark *) {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.circular-layout {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -872,6 +872,55 @@ body:is(.dark *) {
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bg-black\/80 {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.circular-layout {
|
||||
display: flex;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.pill-button-container {
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
width: 100%;
|
||||
border-radius: 50px;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
body, html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
@ -925,6 +974,11 @@ body:is(.dark *) {
|
||||
margin-right: -50vw;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -967,6 +1021,10 @@ body:is(.dark *) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
@ -1027,6 +1085,10 @@ body:is(.dark *) {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-xl {
|
||||
max-width: 36rem;
|
||||
}
|
||||
@ -1079,6 +1141,12 @@ body:is(.dark *) {
|
||||
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1150,37 +1218,24 @@ body:is(.dark *) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-24 {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.py-32 {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
||||
.py-48 {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 12rem;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 3rem;
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-24 {
|
||||
@ -1310,6 +1365,14 @@ body:is(.dark *) {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user