Skip to content

Commit

Permalink
added carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
Your Name committed Sep 26, 2024
1 parent a8043ff commit 47a007c
Show file tree
Hide file tree
Showing 9 changed files with 397 additions and 147 deletions.
19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@astrojs/tailwind": "^5.1.0",
"@directus/sdk": "^17.0.1",
"astro": "^4.15.6",
"swiper": "^11.1.14",
"tailwindcss": "^3.4.12",
"typescript": "^5.6.2"
}
Expand Down
3 changes: 3 additions & 0 deletions public/post.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/components/slider/Circle.astro
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>
25 changes: 25 additions & 0 deletions src/components/slider/MainContent.astro
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>
17 changes: 17 additions & 0 deletions src/components/slider/Slide.astro
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>
115 changes: 115 additions & 0 deletions src/components/slider/Swiper.astro
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>
10 changes: 6 additions & 4 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ const { title } = Astro.props;
<!doctype html>
<html lang="en">
<head>
<title>{title}</title>
<meta charset="UTF-8" />
<meta name="description" content="Social media analyzing tool" />
<meta name="description" content="All-in-one social media analytics tool for businesses. Explore. Analyze. Discover new opportunities."/>
<meta name="viewport" content="width=device-width" />

<!-- Open graph -->
<meta property="og:title" content="Try IONKOL" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ionkol.com" />
Expand All @@ -26,16 +27,17 @@ const { title } = Astro.props;
/>
<meta property="og:site_name" content="IONKOL" />
<meta property="og:locale" content="en_US" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>

<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<link rel="apple-touch-icon" href="/favicon.ico" />

<meta name="generator" content={Astro.generator} />
Expand Down
Loading

0 comments on commit 47a007c

Please sign in to comment.