diff --git a/package-lock.json b/package-lock.json index 1525845..b8156d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,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" } @@ -5973,6 +5974,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.1.14", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz", + "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tailwindcss": { "version": "3.4.12", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz", diff --git a/package.json b/package.json index 11c9498..6dcedea 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/public/post.svg b/public/post.svg new file mode 100644 index 0000000..552f679 --- /dev/null +++ b/public/post.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/slider/Circle.astro b/src/components/slider/Circle.astro new file mode 100644 index 0000000..b35facc --- /dev/null +++ b/src/components/slider/Circle.astro @@ -0,0 +1,13 @@ +--- +interface CircleProps { + backgroundColor: string; + topPosition: string; +} + +const { backgroundColor, topPosition } = Astro.props as CircleProps; +--- + +
+ +
diff --git a/src/components/slider/MainContent.astro b/src/components/slider/MainContent.astro new file mode 100644 index 0000000..37643bc --- /dev/null +++ b/src/components/slider/MainContent.astro @@ -0,0 +1,25 @@ +--- +interface MainContentProps { + title: string; + textColor: string; + description: string; + buttonLabel: string; +} + +const { title, textColor, description, buttonLabel } = Astro.props as MainContentProps; +--- + +
+

+ Harness the power of social data with +

+

+ {title} +

+

+ {description} +

+ +
diff --git a/src/components/slider/Slide.astro b/src/components/slider/Slide.astro new file mode 100644 index 0000000..9aae673 --- /dev/null +++ b/src/components/slider/Slide.astro @@ -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; +--- + +
+ + +
diff --git a/src/components/slider/Swiper.astro b/src/components/slider/Swiper.astro new file mode 100644 index 0000000..872b50e --- /dev/null +++ b/src/components/slider/Swiper.astro @@ -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: ` +
+
+
+ Instagram +
+
+ TikTok +
+
+ YouTube +
+
+
Social Media
+
+ ` + }, + { + 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: + ` +
+
+ Mikki Adams + Mikki Adams +
+
+ Jakie Town + Jakie Town +
+
Influencers
+
+ ` + }, + + { + 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: ( + ` +
+ Bars chart +
+ ` + ), + }, + // 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: ( + ` +
+
+ Send icon + Contact Influencer +
+
+ ` + ), + } +]; +--- + +
+
+ {slides.map((slide) => ( + + + + + + ))} +
+
+
+
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index c328826..e0d90c4 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -9,10 +9,11 @@ const { title } = Astro.props; - {title} - + + + @@ -26,16 +27,17 @@ const { title } = Astro.props; /> - + + + - diff --git a/src/pages/index.astro b/src/pages/index.astro index e852ece..522f9ce 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,4 @@ --- -title: "The Ultimate Guide to Baking Sourdough Bread" -description: "Learn the secrets to creating delicious and authentic sourdough bread at home with this comprehensive guide." import Layout from "../layouts/Layout.astro"; import directus from "../../lib/directus"; import { readItems } from "@directus/sdk"; @@ -14,11 +12,13 @@ import "./_index.css"; import PriceCard from "../components/PriceCard.astro"; import Footer from "../components/Footer.astro"; import Button from "../components/ui/Button.astro"; +import "swiper/css"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import Swiper from "../components/slider/Swiper.astro"; const priceCards = await directus.request(readItems("priceCards")); -priceCards.sort( - (a, b) => a.price_monthly - b.price_monthly -); +priceCards.sort((a, b) => a.price_monthly - b.price_monthly); const benefits = [ { @@ -90,6 +90,33 @@ const whyIonkol = [ ]; --- + + +