diff --git a/README.md b/README.md index b012a8b..1663a40 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,10 @@ Any static assets, like images, can be placed in the `public/` directory. TailwindCSS & Alpine.js are already configured in this repo, so you can start using them without any installation. +## Credits + +[Hero Illustration](https://www.figma.com/community/file/1108400791662599811) by [Streamline](https://www.streamlinehq.com/) + ## 👀 Want to learn more? Feel free to check out [Astro Documentation](https://docs.astro.build) or jump into our [Discord Chat](https://web3templates.com/discord). diff --git a/src/assets/hero-alt.png b/src/assets/hero-alt.png new file mode 100644 index 0000000..c92012e Binary files /dev/null and b/src/assets/hero-alt.png differ diff --git a/src/assets/hero-source.svg b/src/assets/hero-source.svg new file mode 100644 index 0000000..1a680dc --- /dev/null +++ b/src/assets/hero-source.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/hero.avif b/src/assets/hero.avif deleted file mode 100644 index 634d3fd..0000000 Binary files a/src/assets/hero.avif and /dev/null differ diff --git a/src/assets/hero.png b/src/assets/hero.png index c92012e..4c8cdf0 100644 Binary files a/src/assets/hero.png and b/src/assets/hero.png differ diff --git a/src/components/features.astro b/src/components/features.astro index 45b46f1..fe3a094 100644 --- a/src/components/features.astro +++ b/src/components/features.astro @@ -18,19 +18,19 @@ const features = [ { title: "On-Demand Components", description: - "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.", + "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. ", icon: "bx:bxs-data", }, { title: "Broad Integration", description: - "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.", + "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any other npm packages.", icon: "bx:bxs-bot", }, { title: "SEO Enabled", description: - "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.", + "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication. It just works!", icon: "bx:bxs-file-find", }, { @@ -52,7 +52,7 @@ const features = [

-
+
{ features.map((item) => (
diff --git a/src/components/footer.astro b/src/components/footer.astro index b8226fe..4667235 100644 --- a/src/components/footer.astro +++ b/src/components/footer.astro @@ -2,6 +2,11 @@

Copyright © {new Date().getFullYear()} Astroship. All rights reserved.

+

Made by

- Get Started + Get Started View Repo diff --git a/src/components/pricing.astro b/src/components/pricing.astro new file mode 100644 index 0000000..ccdf8e8 --- /dev/null +++ b/src/components/pricing.astro @@ -0,0 +1,45 @@ +--- +import { Tick } from "@components/ui/icons"; +import Link from "@components/ui/link.astro"; + +const { plan } = Astro.props; +--- + +
+
+
+

{plan.name}

+ { + plan.price && typeof plan.price === "object" + ? plan.price.monthly + : plan.price + } +

+ +
    + { + plan.features.map((item) => ( +
  • + + {item} +
    • + )) + } +
+ + {plan.button.text || "Get Started"} + +
+
+
diff --git a/src/components/ui/button.astro b/src/components/ui/button.astro index 8987c79..53f9339 100644 --- a/src/components/ui/button.astro +++ b/src/components/ui/button.astro @@ -1,6 +1,7 @@ --- interface Props { size?: "md" | "lg"; + block?: boolean; style?: "outline" | "primary" | "inverted"; class?: string; [x: string]: any; diff --git a/src/components/ui/icons/index.js b/src/components/ui/icons/index.js new file mode 100644 index 0000000..98449ea --- /dev/null +++ b/src/components/ui/icons/index.js @@ -0,0 +1 @@ +export { default as Tick } from "./tick.astro"; diff --git a/src/components/ui/icons/tick.astro b/src/components/ui/icons/tick.astro new file mode 100644 index 0000000..bf83b8c --- /dev/null +++ b/src/components/ui/icons/tick.astro @@ -0,0 +1,16 @@ +--- +const { class: className } = Astro.props; +--- + + + diff --git a/src/components/ui/link.astro b/src/components/ui/link.astro index cddf4f2..1c61443 100644 --- a/src/components/ui/link.astro +++ b/src/components/ui/link.astro @@ -1,7 +1,8 @@ --- interface Props { href: string; - size?: string; + size?: "md" | "lg"; + block?: boolean; style?: "outline" | "primary" | "inverted"; class?: string; [x: string]: any; @@ -9,6 +10,7 @@ interface Props { const { href, + block, size = "lg", style = "primary", class: className, @@ -21,9 +23,8 @@ const sizes = { }; const styles = { - outline: "border-2 border-black hover:bg-black text-black hover:text-white", - primary: - "bg-black text-white hover:bg-slate-900 border-2 border-transparent", + outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ", + primary: "bg-black text-white hover:bg-gray-800 border-2 border-transparent", inverted: "bg-white text-black border-2 border-transparent", }; --- @@ -32,7 +33,8 @@ const styles = { href={href} {...rest} class:list={[ - " rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200", + "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200", + block && "w-full", sizes[size], styles[style], className, diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index 68f5ee7..848135e 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -13,7 +13,8 @@ const { frontmatter } = Astro.props; {frontmatter.category} -

+

{frontmatter.title}

diff --git a/src/pages/blog/complete-guide-fullstack-development.md b/src/pages/blog/complete-guide-fullstack-development.md new file mode 100644 index 0000000..a8e3896 --- /dev/null +++ b/src/pages/blog/complete-guide-fullstack-development.md @@ -0,0 +1,34 @@ +--- +title: "The Complete Guide to Full Stack Web Development" +excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." +publishDate: "2022-11-08T11:39:36.050Z" +image: "https://source.unsplash.com/eYpcLDXHVb0" +category: "Tutorials" +author: "Janette Lynch" +layout: "@layouts/BlogLayout.astro" +tags: [webdev, tailwindcss, frontend] +--- + +Lorem ipsum dolor sit amet consectetur adipiscing elit euismod rutrum, consequat fringilla ultricies nullam curae mollis semper conubia viverra, orci aenean dapibus pharetra nec tortor tellus cubilia. Ullamcorper mi lectus eu malesuada tempor massa praesent magna mattis posuere, lobortis vulputate ut duis magnis parturient habitant nibh id tristique, quis suspendisse donec nisl penatibus sem non feugiat taciti. Mollis per ridiculus integer cursus semper vestibulum fermentum penatibus cubilia blandit scelerisque, tempus platea leo posuere ac pharetra volutpat aliquet euismod id ullamcorper lobortis, urna est magna mus rhoncus massa curae libero praesent eget. Mattis malesuada vestibulum quis ac nam phasellus suscipit facilisis libero diam posuere, cursus massa vehicula neque imperdiet tincidunt dui egestas lacinia mollis aliquet orci, nisl curabitur dapibus litora dis cum nostra montes ligula praesent. Facilisi aliquam convallis molestie tempor blandit ultricies bibendum parturient cubilia quam, porttitor morbi torquent tempus taciti nec faucibus elementum phasellus, quis inceptos vestibulum gravida augue potenti eget nunc maecenas. Tempor facilisis ligula volutpat habitant consequat inceptos orci per potenti blandit platea, mus sapien eget vel libero vestibulum augue cubilia ut ultrices fringilla lectus, imperdiet pellentesque cum ridiculus convallis sollicitudin nisl interdum semper felis. + +Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti augue nulla vivamus senectus odio, quisque curabitur enim consequat class sociis feugiat ullamcorper, felis dis imperdiet cubilia commodo sed massa phasellus. Viverra purus mus nisi condimentum dui vehicula facilisis turpis, habitant nascetur lectus tempor quisque habitasse urna scelerisque, nibh nullam vestibulum luctus aenean mollis metus. Suscipit gravida duis nec aliquet natoque molestie a ridiculus scelerisque cum, justo cursus sapien sodales purus dignissim vel facilisi magnis, inceptos rutrum ut integer auctor commodo sollicitudin fames et. Faucibus ligula nibh sagittis mauris auctor posuere habitant, scelerisque phasellus accumsan egestas gravida viverra nam, sed etiam eleifend proin massa dictumst. Porttitor risus luctus per aenean tellus primis fringilla vitae fames lacinia mauris metus, nec pulvinar quisque commodo sodales ac nibh natoque phasellus semper placerat. Lectus aenean potenti leo sollicitudin tristique eros quam ligula, vestibulum diam consequat enim torquent nec tempus, blandit viverra dapibus eleifend dis nunc nascetur. + +## Sodales hendrerit malesuada et vestibulum + +- Luctus euismod pretium nisi et, est dui enim. + +- Curae eget inceptos malesuada, fermentum class. + +- Porttitor vestibulum aliquam porta feugiat velit, potenti eu placerat. + +- Ligula lacus tempus ac porta, vel litora. + +Torquent non nisi lacinia faucibus nibh tortor taciti commodo porttitor, mus hendrerit id leo scelerisque mollis habitasse orci tristique aptent, lacus at molestie cubilia facilisis porta accumsan condimentum. Metus lacus suscipit porttitor integer facilisi torquent, nostra nulla platea at natoque varius venenatis, id quam pharetra aliquam leo. Dictum orci himenaeos quam mi fusce lacinia maecenas ac magna eleifend laoreet, vivamus enim curabitur ullamcorper est ultrices convallis suscipit nascetur. Ornare fames pretium ante ac eget nisi tellus vivamus, convallis mauris sapien imperdiet sollicitudin aliquet taciti quam, lacinia tempor primis magna iaculis at eu. Est facilisi proin risus eleifend orci torquent ultricies platea, quisque nullam vel porttitor euismod sociis non, maecenas sociosqu interdum arcu sed pharetra potenti. Aliquet risus tempus hendrerit sapien tellus eget cursus enim etiam dui, lobortis nostra pellentesque odio posuere morbi ad neque senectus arcu eu, turpis proin ac felis purus fames magnis dis dignissim. + +Orci volutpat augue viverra scelerisque dictumst ut condimentum vivamus, accumsan cum sem sollicitudin aliquet vehicula porta pretium placerat, malesuada euismod primis cubilia rutrum tempus parturient. Urna mauris in nibh morbi hendrerit vulputate condimentum, iaculis consequat porttitor dui dis euismod eros, arcu elementum venenatis varius lectus nisi. Nibh arcu ultrices semper morbi quam aptent quisque porta posuere iaculis, vestibulum cum vitae primis varius natoque conubia eu. Placerat sociis sagittis sociosqu morbi purus lobortis convallis, bibendum tortor ridiculus orci habitasse viverra dictum, quis rutrum fusce potenti volutpat vehicula. Curae porta inceptos lectus mus urna litora semper aliquam libero rutrum sem dui maecenas ligula quis, eget risus non imperdiet cum morbi magnis suspendisse etiam augue porttitor placerat facilisi hendrerit. Et eleifend eget augue duis fringilla sagittis erat est habitasse commodo tristique quisque pretium, suspendisse imperdiet inceptos mollis blandit magna mus elementum molestie sed vestibulum. Euismod morbi hendrerit suscipit felis ornare libero ligula, mus tortor urna interdum blandit nisi netus posuere, purus fermentum magnis nam primis nulla. + +## Elementum nisi urna cursus nisl quam ante tristique blandit ultricies eget + +Netus at rutrum taciti vestibulum molestie conubia semper class potenti lobortis, hendrerit donec vitae ad libero natoque parturient litora congue. Torquent rhoncus odio cursus iaculis molestie arcu leo condimentum accumsan, laoreet congue duis libero justo tortor commodo fusce, massa eros hac euismod netus sodales mi magnis. Aenean nullam sollicitudin ad velit nulla venenatis suspendisse iaculis, aliquet senectus mollis aptent fringilla volutpat nascetur, nec urna vehicula lacinia neque augue orci. Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur, platea tincidunt ut sollicitudin purus libero lobortis ad nisi diam quam. + +Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur. diff --git a/src/pages/blog/essential-data-structures-algorithms.md b/src/pages/blog/essential-data-structures-algorithms.md new file mode 100644 index 0000000..511aefa --- /dev/null +++ b/src/pages/blog/essential-data-structures-algorithms.md @@ -0,0 +1,34 @@ +--- +title: " Introduction to the Essential Data Structures & Algorithms" +excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." +publishDate: "2022-11-09T16:39:36.050Z" +image: "https://source.unsplash.com/R5A_YlcSJwA" +category: "Courses" +author: "Marcell Ziemann" +layout: "@layouts/BlogLayout.astro" +tags: [webdev, tailwindcss, frontend] +--- + +Lorem ipsum dolor sit amet consectetur adipiscing elit euismod rutrum, consequat fringilla ultricies nullam curae mollis semper conubia viverra, orci aenean dapibus pharetra nec tortor tellus cubilia. Ullamcorper mi lectus eu malesuada tempor massa praesent magna mattis posuere, lobortis vulputate ut duis magnis parturient habitant nibh id tristique, quis suspendisse donec nisl penatibus sem non feugiat taciti. Mollis per ridiculus integer cursus semper vestibulum fermentum penatibus cubilia blandit scelerisque, tempus platea leo posuere ac pharetra volutpat aliquet euismod id ullamcorper lobortis, urna est magna mus rhoncus massa curae libero praesent eget. Mattis malesuada vestibulum quis ac nam phasellus suscipit facilisis libero diam posuere, cursus massa vehicula neque imperdiet tincidunt dui egestas lacinia mollis aliquet orci, nisl curabitur dapibus litora dis cum nostra montes ligula praesent. Facilisi aliquam convallis molestie tempor blandit ultricies bibendum parturient cubilia quam, porttitor morbi torquent tempus taciti nec faucibus elementum phasellus, quis inceptos vestibulum gravida augue potenti eget nunc maecenas. Tempor facilisis ligula volutpat habitant consequat inceptos orci per potenti blandit platea, mus sapien eget vel libero vestibulum augue cubilia ut ultrices fringilla lectus, imperdiet pellentesque cum ridiculus convallis sollicitudin nisl interdum semper felis. + +Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti augue nulla vivamus senectus odio, quisque curabitur enim consequat class sociis feugiat ullamcorper, felis dis imperdiet cubilia commodo sed massa phasellus. Viverra purus mus nisi condimentum dui vehicula facilisis turpis, habitant nascetur lectus tempor quisque habitasse urna scelerisque, nibh nullam vestibulum luctus aenean mollis metus. Suscipit gravida duis nec aliquet natoque molestie a ridiculus scelerisque cum, justo cursus sapien sodales purus dignissim vel facilisi magnis, inceptos rutrum ut integer auctor commodo sollicitudin fames et. Faucibus ligula nibh sagittis mauris auctor posuere habitant, scelerisque phasellus accumsan egestas gravida viverra nam, sed etiam eleifend proin massa dictumst. Porttitor risus luctus per aenean tellus primis fringilla vitae fames lacinia mauris metus, nec pulvinar quisque commodo sodales ac nibh natoque phasellus semper placerat. Lectus aenean potenti leo sollicitudin tristique eros quam ligula, vestibulum diam consequat enim torquent nec tempus, blandit viverra dapibus eleifend dis nunc nascetur. + +## Sodales hendrerit malesuada et vestibulum + +- Luctus euismod pretium nisi et, est dui enim. + +- Curae eget inceptos malesuada, fermentum class. + +- Porttitor vestibulum aliquam porta feugiat velit, potenti eu placerat. + +- Ligula lacus tempus ac porta, vel litora. + +Torquent non nisi lacinia faucibus nibh tortor taciti commodo porttitor, mus hendrerit id leo scelerisque mollis habitasse orci tristique aptent, lacus at molestie cubilia facilisis porta accumsan condimentum. Metus lacus suscipit porttitor integer facilisi torquent, nostra nulla platea at natoque varius venenatis, id quam pharetra aliquam leo. Dictum orci himenaeos quam mi fusce lacinia maecenas ac magna eleifend laoreet, vivamus enim curabitur ullamcorper est ultrices convallis suscipit nascetur. Ornare fames pretium ante ac eget nisi tellus vivamus, convallis mauris sapien imperdiet sollicitudin aliquet taciti quam, lacinia tempor primis magna iaculis at eu. Est facilisi proin risus eleifend orci torquent ultricies platea, quisque nullam vel porttitor euismod sociis non, maecenas sociosqu interdum arcu sed pharetra potenti. Aliquet risus tempus hendrerit sapien tellus eget cursus enim etiam dui, lobortis nostra pellentesque odio posuere morbi ad neque senectus arcu eu, turpis proin ac felis purus fames magnis dis dignissim. + +Orci volutpat augue viverra scelerisque dictumst ut condimentum vivamus, accumsan cum sem sollicitudin aliquet vehicula porta pretium placerat, malesuada euismod primis cubilia rutrum tempus parturient. Urna mauris in nibh morbi hendrerit vulputate condimentum, iaculis consequat porttitor dui dis euismod eros, arcu elementum venenatis varius lectus nisi. Nibh arcu ultrices semper morbi quam aptent quisque porta posuere iaculis, vestibulum cum vitae primis varius natoque conubia eu. Placerat sociis sagittis sociosqu morbi purus lobortis convallis, bibendum tortor ridiculus orci habitasse viverra dictum, quis rutrum fusce potenti volutpat vehicula. Curae porta inceptos lectus mus urna litora semper aliquam libero rutrum sem dui maecenas ligula quis, eget risus non imperdiet cum morbi magnis suspendisse etiam augue porttitor placerat facilisi hendrerit. Et eleifend eget augue duis fringilla sagittis erat est habitasse commodo tristique quisque pretium, suspendisse imperdiet inceptos mollis blandit magna mus elementum molestie sed vestibulum. Euismod morbi hendrerit suscipit felis ornare libero ligula, mus tortor urna interdum blandit nisi netus posuere, purus fermentum magnis nam primis nulla. + +## Elementum nisi urna cursus nisl quam ante tristique blandit ultricies eget + +Netus at rutrum taciti vestibulum molestie conubia semper class potenti lobortis, hendrerit donec vitae ad libero natoque parturient litora congue. Torquent rhoncus odio cursus iaculis molestie arcu leo condimentum accumsan, laoreet congue duis libero justo tortor commodo fusce, massa eros hac euismod netus sodales mi magnis. Aenean nullam sollicitudin ad velit nulla venenatis suspendisse iaculis, aliquet senectus mollis aptent fringilla volutpat nascetur, nec urna vehicula lacinia neque augue orci. Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur, platea tincidunt ut sollicitudin purus libero lobortis ad nisi diam quam. + +Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur. diff --git a/src/pages/blog/kitchensink.mdx b/src/pages/blog/kitchensink.mdx index 50365f4..3e704dd 100644 --- a/src/pages/blog/kitchensink.mdx +++ b/src/pages/blog/kitchensink.mdx @@ -4,7 +4,7 @@ excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum ani publishDate: "2022-11-05T15:36:19.399Z" category: "Technology" layout: "@layouts/BlogLayout.astro" -image: "https://source.unsplash.com/W_ZYCEUapF0" +image: "https://images.unsplash.com/photo-1542393545-10f5cde2c810?&fit=crop&w=430&h=240" author: "Charles North" tags: [mdx, astro, blog] --- diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro new file mode 100644 index 0000000..7227658 --- /dev/null +++ b/src/pages/pricing.astro @@ -0,0 +1,80 @@ +--- +import Layout from "@layouts/Layout.astro"; +import Container from "@components/container.astro"; +import Sectionhead from "@components/sectionhead.astro"; +import Pricing from "@components/pricing.astro"; + +const pricing = [ + { + name: "Personal", + price: "Free", + popular: false, + features: [ + "Lifetime free", + "Up to 3 users", + "Unlimited Pages", + "Astro Sub domain", + "Basic Integrations", + "Community Support", + ], + button: { + text: "Get Started", + link: "/", + }, + }, + { + name: "Startup", + price: { + monthly: "$19", + annual: "$16", + discount: "10%", + original: "$24", + }, + popular: true, + features: [ + "All Free Features", + "Up to 20 users", + "20 Custom domains", + "Unlimited Collaborators", + "Advanced Integrations", + "Priority Support", + ], + button: { + text: "Get Started", + link: "#", + }, + }, + { + name: "Enterprise", + price: "Custom", + popular: false, + features: [ + "All Pro Features", + "Unlimited Custom domains", + "99.99% Uptime SLA", + "SAML & SSO Integration", + "Dedicated Account Manager", + "24/7 Phone Support", + ], + button: { + text: "Contact us", + link: "/contact", + }, + }, +]; +--- + + + + + Pricing + Simple & Predictable pricing. No Surprises. + + +
+ {pricing.map((item) => )} +
+ +