-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Your Name
committed
Sep 26, 2024
1 parent
a8043ff
commit 47a007c
Showing
9 changed files
with
397 additions
and
147 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
interface CircleProps { | ||
backgroundColor: string; | ||
topPosition: string; | ||
} | ||
const { backgroundColor, topPosition } = Astro.props as CircleProps; | ||
--- | ||
|
||
<div | ||
class={`hidden sm:flex absolute z-0 w-[202px] h-[202px] lg:w-[405px] lg:h-[405px] ${backgroundColor} rounded-full right-[10%] ${topPosition} flex justify-center items-center`}> | ||
<slot /> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
--- | ||
interface MainContentProps { | ||
title: string; | ||
textColor: string; | ||
description: string; | ||
buttonLabel: string; | ||
} | ||
const { title, textColor, description, buttonLabel } = Astro.props as MainContentProps; | ||
--- | ||
|
||
<div class="flex flex-col relative items-center justify-center z-10 text-center px-4"> | ||
<p class="text-[#0d0c22] text-lg font-medium font-['Mulish'] tracking-tight mb-10 lg:text-2xl"> | ||
Harness the power of social data with | ||
</p> | ||
<h1 class={`text-[${textColor}] text-5xl font-extrabold font-['Urbanist'] tracking-[2.6px] mb-8 lg:text-[130px]`}> | ||
{title} | ||
</h1> | ||
<p class="text-[#9e9ea7] text-base font-normal font-['Mulish'] tracking-wide mb-14 lg:text-lg"> | ||
{description} | ||
</p> | ||
<button class="h-10 px-10 py-2 bg-[#0d0c22] rounded-lg text-white text-base font-medium font-['Urbanist'] leading-normal tracking-wide hover:bg-[#1a1a2e] active:bg-[#33334d] transition-colors duration-300"> | ||
{buttonLabel} | ||
</button> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
--- | ||
import MainContent from './MainContent.astro'; | ||
interface SlideProps { | ||
title: string; | ||
textColor: string; | ||
description: string; | ||
buttonLabel: string; | ||
} | ||
const { title, textColor, description, buttonLabel } = Astro.props as SlideProps; | ||
--- | ||
|
||
<div class="swiper-slide flex items-center relative"> | ||
<slot /> | ||
<MainContent title={title} textColor={textColor} description={description} buttonLabel={buttonLabel} /> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
--- | ||
import Slide from "./Slide.astro"; | ||
import Circle from "./Circle.astro"; | ||
const slides = [ | ||
{ | ||
title: 'ION Explore', | ||
textColor: '#ed707e', | ||
description: 'Driving business growth with data through influencer marketing', | ||
buttonLabel: 'Book a Demo', | ||
circleBackgroundColor: 'bg-[#feeff1]', | ||
circleTopPosition: '-top-[18%] lg:-top-[35%]', | ||
circleContent: ` | ||
<div class=" scale-75 lg:scale-100 h-[90px] rotate-[7.77deg] px-6 py-3 bg-white rounded-xl shadow flex flex-col justify-center items-center"> | ||
<div class="flex gap-3 mb-2"> | ||
<div class="p-2 bg-[#fea598] rounded-full"> | ||
<img src="/instagram-icon.svg" alt="Instagram" width="16" height="16" /> | ||
</div> | ||
<div class="p-2 bg-[#fea598] rounded-full"> | ||
<img src="/tiktok-icon.svg" alt="TikTok" width="16" height="16" /> | ||
</div> | ||
<div class="p-2 bg-[#fea598] rounded-full"> | ||
<img src="/youtube-icon.svg" alt="YouTube" width="16" height="16" /> | ||
</div> | ||
</div> | ||
<div class="text-center">Social Media</div> | ||
</div> | ||
` | ||
}, | ||
{ | ||
title: 'ION Discover', | ||
textColor: '#FFD572', | ||
description: 'Driving business growth with data through influencer marketing', | ||
buttonLabel: 'Book a Demo', | ||
circleBackgroundColor: 'bg-[#FEF5F0]', | ||
circleTopPosition: '-top-[18%] lg:-top-[35%]', | ||
circleContent: | ||
` | ||
<div | ||
class="scale-75 lg:scale-100 rotate-[7.77deg] px-6 py-3 bg-white rounded-xl shadow flex flex-col justify-center items-start gap-3" | ||
style={{ | ||
"box-shadow": "0px 4px 16px 0px rgba(203, 186, 176, 0.25)", | ||
}}> | ||
<div class="flex gap-2 items-center"> | ||
<img src="/girl-placeholder-2.png" alt="Mikki Adams" width="32" height="32" /> | ||
<span>Mikki Adams</span> | ||
</div> | ||
<div class="flex gap-2 items-center mb-2"> | ||
<img src="/girl-placeholder-3.png" alt="Jakie Town" width="32" height="32" /> | ||
<span>Jakie Town</span> | ||
</div> | ||
<div class="text-center w-full">Influencers</div> | ||
</div> | ||
` | ||
}, | ||
{ | ||
title: 'ION Analyze', | ||
textColor: '#F9679A', | ||
description: 'Driving business growth with data through influencer marketing', | ||
buttonLabel: 'Book a Demo', | ||
circleBackgroundColor: 'bg-[#FFE9EF]', | ||
circleTopPosition: '-top-[18%] lg:-top-[35%]', | ||
circleContent: ( | ||
` | ||
<div | ||
class="scale-75 lg:scale-100 rotate-[7.77deg] px-6 py-3 bg-white rounded-xl shadow flex flex-col justify-center items-center gap-3" | ||
style={{ | ||
"box-shadow": "0px 4px 16px 0px rgba(203, 186, 176, 0.25)", | ||
}}> | ||
<img src="/Bars.svg" alt="Bars chart" width="198" height="128" /> | ||
</div> | ||
` | ||
), | ||
}, | ||
// New slide 2: ION Connect | ||
{ | ||
title: 'ION Connect', | ||
textColor: '#BB6DCF', | ||
description: 'Driving business growth with data through influencer marketing', | ||
buttonLabel: 'Book a Demo', | ||
circleBackgroundColor: 'bg-[#FFE9EF]', | ||
circleTopPosition: '-top-[18%] lg:-top-[35%]', | ||
circleContent: ( | ||
` | ||
<div | ||
class="scale-75 lg:scale-100 rotate-[7.77deg] px-6 py-3 bg-white rounded-xl shadow flex flex-col justify-center items-center gap-3" | ||
style={{ | ||
"box-shadow": "0px 4px 16px 0px rgba(203, 186, 176, 0.25)", | ||
}}> | ||
<div class="flex justify-center items-center gap-3"> | ||
<img src='/post.svg' alt='Send icon' width={28} height={28} /> | ||
<span class='text-sm font-inter whitespace-nowrap'>Contact Influencer</span> | ||
</div> | ||
</div> | ||
` | ||
), | ||
} | ||
]; | ||
--- | ||
|
||
<div class="swiper flex justify-center items-center"> | ||
<div class="swiper-wrapper min-h-screen flex items-center"> | ||
{slides.map((slide) => ( | ||
<Slide title={slide.title} textColor={slide.textColor} description={slide.description} buttonLabel={slide.buttonLabel}> | ||
<Circle backgroundColor={slide.circleBackgroundColor} topPosition={slide.circleTopPosition}> | ||
<Fragment set:html={slide.circleContent} /> | ||
</Circle> | ||
</Slide> | ||
))} | ||
</div> | ||
<div class="swiper-pagination"></div> | ||
<div class="!hidden md:!flex swiper-button-next"></div> | ||
<div class="!hidden md:!flex swiper-button-prev"></div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.