Add composable marketing page

docusaurus.config.js

@@ -262,7 +262,7 @@ const config = {
             position: "right",
           },
           {
-            label: "Get in Touch",
+            label: "Get in Touch Today",
             href: "https://www.elasticpath.com/get-in-touch",
             position: "right",
             className: "navbar-book-demo",

package.json

@@ -34,6 +34,7 @@
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@fluentui/react-icons": "^2.0.230",
     "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.1.5",
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -53,10 +54,13 @@
     "prism-react-renderer": "^1.3.5",
     "raw-loader": "^4.0.2",
     "react": "^18.0.2",
+    "react-countup": "^6.5.3",
     "react-dom": "^18.0.2",
     "react-feather": "^2.0.10",
     "react-highlight": "^0.15.0",
     "react-parallax-tilt": "^1.7.227",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.8",
     "tailwindcss": "^3.4.1",
     "webpack": "^5.89.0"

src/components/composable/Architecture.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Architecture = () => {
+  return (
+    <div className="mt-0 mb-0">
+      <div className="mx-auto flex flex-col md:flex-row items-center max-w-7xl gap-6 justify-between">
+        <div className="md:w-6/12 mt-0">
+          <h2 className="font-extrabold text-3xl mb-4">Composable, API-First, Headless Architecture</h2>
+          <p className="">
+            Flexible. Secure. Performant. Open.  Our composable architecture gives you the control and confidence to build exceptional experiences.
+          </p>
+        </div>
+        <div className="md:w-6/12 mb-0">
+          <img
+            src="https://elastic-path.transforms.svdcdn.com/production/images/Composable-Commerce_1494x-1088_W-Padding.png?w=1536&h=1140&q=90&fm=webp&fit=crop&dm=1692376726&s=1907bf37b600776ce1c047f2725d5649"
+            alt="Placeholder"
+            className="max-h-[500px] max-w-[500px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Architecture;

src/components/composable/DeveloperGrid.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { BoltIcon, PuzzlePieceIcon, CircleStackIcon, ShieldCheckIcon, CodeBracketIcon, LockClosedIcon, CloudIcon } from '@heroicons/react/24/outline';
+
+const DeveloperGrid = () => {
+  const capabilities = [
+    { icon: <CircleStackIcon className="h-10 w-10 mb-2 mx-auto" />, title: 'Data Freedom', description: 'Leverage a flexible data model to gain complete control over your commerce data. Connect any data source, create custom data structures, utilize our Custom API builder / Database-as-a-Service (DBaaS), and unlock powerful insights to drive business growth.', cta: '' },
+    { icon: <CodeBracketIcon className="h-10 w-10 mb-2 mx-auto" />, title: 'Developer-Friendly', description: 'Empower your development team with tech-agnostic tools. Choose the best technologies for your needs and accelerate time-to-market with our low-code/no-code framework. Used our JS-SDK, Next.js App and Command Line Interface (CLI) to get up and running quickly.', cta: '' },
+    { icon: <LockClosedIcon className="h-10 w-10 mb-2 mx-auto" />, title: 'Unwavering Security', description: 'Rest easy with enterprise-grade security features built into the core of our platform. Protect your business and your customers with robust security protocols and industry-leading compliance certifications including GDPR Compliance, SOC2 and HIPPA Certification.', cta: '' },
+  ];
+
+  return (
+    <div className="p-8 bg-gray-900 text-white">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-3 gap-6 content-center">
+          {capabilities.map((capability, index) => (
+            <div key={index} className="p-4 rounded-lg flex flex-col items-center text-center">
+              {capability.icon}
+              <h2 className="font-bold mb-2 text-center">{capability.title}</h2>
+              <p className="mb-4 text-center">{capability.description}</p>
+              {capability.cta && (<button className="border-2 border-gray-900 border-solid text-white py-2 px-4 rounded-md bg-transparent hover:bg-green-500 hover:text-white transition duration-300">{capability.cta}</button>)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeveloperGrid;

src/components/composable/HeroSection.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const HeroSection = () => {
+  return (
+    // Hero section container with black background and gradient
+    <section
+      className="h-[500px]"
+      style={{ background:'#2BCC7E' }}
+    >
+      <div className="mx-auto flex flex-col md:flex-row items-center max-w-7xl gap-6 justify-between">
+        <div className="md:w-7/12">
+          <h1 className="text-6xl font-bold mb-6 font-jakarta">
+            <span className="text-black">Elastic Path</span>{' '}
+            <span className="text-black">Composable Commerce</span>
+          </h1>
+          <p className="text-xl leading-relaxed text-black">
+            API-first. Limitless potential. Easily tailor and scale your commerce solution to meet your exact
+            requirements, now and in the future.
+          </p>
+          <p className="text-xl text-black">
+            Start building today with a free trial
+          </p>
+          <div className="flex gap-4 mt-4">
+          <button className="border-2 border-white border-solid text-black text-lg text--bold py-4 px-6 rounded-md bg-white hover:bg-green-500 hover:text-black transition duration-300">
+            Try Now
+          </button>
+          <button
+            className="border-2 border-white border-solid text-black text-lg text--bold py-4 px-6 rounded-md bg-transparent hover:bg-green-500 hover:text-white transition duration-300">
+            Get In Touch
+          </button>
+          </div>
+        </div>
+        <div className="md:w-5/12 mt-0">
+          <img
+            src="https://elastic-path.transforms.svdcdn.com/production/images/Stylized-Product-Page-Images/Stylized-product-image_1080x960.png?w=900&h=900&q=90&fm=webp&fit=crop&dm=1691683044&s=4b3b3fdbbe15d5d37f82d76379402b9a"
+            alt="Composable Commerce"
+            className="w-full shadow-lg max-h-[500px]"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

src/components/composable/LogoCarousel.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import './ScrollingLogos.css'; // Import the CSS file for styling
+
+const ScrollingLogos = () => {
+  const logos = [
+    'https://elastic-path.files.svdcdn.com/production/logos/logo_full-color-1_2023-08-11-151836_empf.svg?dm=1704716726',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/SerenaandLily.png?w=145&q=100&auto=format&fit=clip&dm=1692011476&s=e60ad243b3d0aa0ef9683ce90ad5bf9d',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/Orgill.png?w=145&q=100&auto=format&fit=clip&dm=1704716413&s=cc351cc8509524e2b0e74837e9f7d1b4',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/pella-new.png?w=145&q=100&auto=format&fit=clip&dm=1709710124&s=0940c480c4b938710e12ddee5c076f61',
+    'https://elastic-path.files.svdcdn.com/production/logos/logo_full-color-1_2023-08-11-151836_empf.svg?dm=1704716726',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/SerenaandLily.png?w=145&q=100&auto=format&fit=clip&dm=1692011476&s=e60ad243b3d0aa0ef9683ce90ad5bf9d',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/Orgill.png?w=145&q=100&auto=format&fit=clip&dm=1704716413&s=cc351cc8509524e2b0e74837e9f7d1b4',
+    'https://elastic-path.transforms.svdcdn.com/production/logos/pella-new.png?w=145&q=100&auto=format&fit=clip&dm=1709710124&s=0940c480c4b938710e12ddee5c076f61',
+    // Add more logos as needed
+  ];
+
+  return (
+    <div className="scrolling-logos-container">
+      <div className="scrolling-logos-track">
+        {logos.map((logo, index) => (
+          <div key={index} className="logo-item">
+            <img src={logo} alt={`Logo ${index + 1}`} />
+          </div>
+        ))}
+        {logos.map((logo, index) => (
+          <div key={index + logos.length} className="logo-item">
+            <img src={logo} alt={`Logo ${index + 1}`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ScrollingLogos;

src/components/composable/Products.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+const Products = () => {
+  const capabilities = [
+    { title: 'Cart & Checkout', description: 'Integrate our fast cart and checkout with your e-commerce stack, regardless of platform, payment provider, or catalog complexity. Boost conversions and delight customers without the need for a costly replatform.', cta: '' },
+    { title: 'Product Merchandising', description: 'Curate shopping journeys that truly resonate with your customers. Design captivating product pages, craft compelling narratives and merchandise your products together, however you choose.', cta: '' },
+    { title: 'Automated Re-Orders', description: 'Turn everyday purchases into lasting customer relationships. Automated reorders build loyalty and drive recurring revenue. Create "subscribe and save" offers, personalized schedules and curated boxes with ease.', cta: '' },
+    { title: 'Membership Subscriptions', description: 'Unlock a new revenue stream and build lasting customer loyalty with memberships. Create exclusive tiers offering premium content, special deals, and unique product experiences. Turn one-time buyers into loyal members.', cta: '' },
+    { title: 'Custom APIs & DBaaS', description: 'Coordinating data between systems to use on your commerce site is difficult. Create and launch custom APIs with unparalleled flexibility. Leave database management to us with our hosted service and accelerate development time.', cta: '' },
+    { title: 'Bundles & Configurations', description: 'Create fixed or dynamic bundles customized to your merchandisers\' needs. Provide configurable products and assembly options, simplifying the delivery of complex or custom-built items with unmatched flexibility.', cta: ''},
+    { title: 'Complex Catalogs', description: 'Design catalogs that match your complex products and merchandising needs perfectly. Organize with unlimited categories for easy navigation and precise searches. Combine with Price Books for a tailored experience and specialized pricing.', cta: '' },
+    { title: 'Complex Promotions', description: 'Our rules-based promotion service empowers you to craft precisely targeted offers, from simple discounts to complex tiered rewards and beyond. Drive engagement, boost average order value, and incentivize desired behaviors with unparalleled promotional power.', cta: '' },
+    { title: 'Pricing Management', description: 'Pair any price book with any catalog(s), enabling limitless possibilities for omnichannel experiences, targeted flash sales, and tiered pricing. Easily manage complex bundle pricing and adjust strategies dynamically to boost revenue and drive conversions.', cta: '' },
+    { title: 'Orders & Inventory', description: 'Take control over your inventory and offer unparalleled flexibility to your customers.  Maintain precise stock visibility across all locations and empower shoppers with convenient options like "buy online, pick up in store" & "click and collect".', cta: '' },
+    { title: 'B2B2C Management', description: 'Expand your market presence and effortlessly manage complex distribution networks with our powerful B2B2C solution. Whether you work with resellers, franchises, or need to segment data by country, our platform provides the flexibility and control you need.', cta: '' },
+    { title: 'Payment Gateways', description: 'Choose from ten out-of-the-box payment gateways or manual payment options to customize your checkout and optimize transaction flow. Effortlessly integrate your preferred providers which boosts conversions and improves customer satisfaction.', cta: '' },
+  ];
+
+  return (
+    <div className="p-8 text-gray-900 bg-gray-900 text-white">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-3xl font-extrabold mb-4 text-center">Meet the APIs That Power Commerce Innovation</h1>
+        <p className="text-md mb-8 text-center">
+          Our modular approach empowers you to create unique and engaging shopping journeys across all channels, enhancing customer experiences and drive business growth. With Elastic Path, you can accelerate your time-to-market, adapt to changing demands with ease, and future-proof your commerce solution.
+        </p>
+        <p className={"text-md mb-8 text-center"}>
+
+        </p>
+        <div className="grid grid-cols-3 gap-6 content-center">
+          {capabilities.map((capability, index) => (
+            <div key={index} className="p-4 rounded-lg flex flex-col items-center text-center">
+              <h1 className="text-xl font-bold hover:underline hover:underline-offset-4 hover:text-green-700 relative group cursor-pointer">
+                {capability.title}
+                <span
+                  className="absolute opacity-0 text-green-700 group-hover:opacity-100 transition-opacity duration-300 transform translate-x-2 group-hover:translate-x-4">
+                  &rarr;
+                </span>
+              </h1>
+              <p className="mb-4 text-center text-md">{capability.description}</p>
+              {capability.cta && (<button
+                className="border-2 border-gray-900 border-solid text-white py-2 px-4 rounded-md bg-transparent hover:bg-green-500 hover:text-white transition duration-300">{capability.cta}</button>)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Products;

src/components/composable/ScrollingLogos.css

@@ -0,0 +1,50 @@
+.scrolling-logos-container {
+    overflow: hidden;
+    width: 100%; /* Ensure it spans full width of the page */
+    padding: 20px 0;
+    background-color: #f8f8f8;
+}
+
+.scrolling-logos-track {
+    display: flex;
+    gap: 40px; /* Set space between logos */
+    animation: scroll 30s linear infinite; /* Continuous scrolling */
+}
+
+.logo-item {
+    display: inline-block;
+    justify-content: center; /* Center the track horizontally */
+    align-items: center;
+}
+
+.logo-item img {
+    max-height: 80px; /* Set max height */
+    height: auto;
+    width: auto; /* Ensure aspect ratio is maintained */
+    filter: grayscale(100%); /* Apply grayscale */
+    justify-content: center;
+    align-items: center;
+    transition: filter 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.logo-item img:hover {
+    filter: grayscale(0%); /* Restore original color on hover */
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+/* Duplicate the logos to make the scrolling seamless */
+.scrolling-logos-track::after {
+    content: "";
+    display: block;
+    position: absolute;
+    white-space: nowrap;
+    transform: translateX(100%); /* Start where the original logos end */
+}

src/components/composable/StatsComponent.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CheckCircleIcon, CubeIcon, ChartBarIcon, GlobeAltIcon } from '@heroicons/react/24/solid';
+import CountUp from 'react-countup';
+
+const StatsComponent = () => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center p-10 justfy-center items-center">
+      {/* First Column */}
+      <div className="flex flex-col items-center">
+        <CheckCircleIcon className="h-12 w-12 text-green-700 mb-4" />
+        <h2 className="text-4xl font-bold">
+          <CountUp end={99.999} decimals={3} duration={6} />
+          %
+        </h2>
+        <p className="text-lg mt-2">Unprecedented Uptime</p>
+      </div>
+
+      {/* Second Column */}
+      <div className="flex flex-col items-center">
+        <CubeIcon className="h-12 w-12  mb-4 text-green-700" />
+        <h2 className="text-4xl font-bold">
+          <CountUp end={3} duration={10} />
+        </h2>
+        <p className="text-lg mt-0">Months to Launch</p>
+      </div>
+
+      {/* Third Column */}
+      <div className="flex flex-col items-center">
+        <ChartBarIcon className="h-12 w-12 text-green-700 mb-4" />
+        <h2 className="text-4xl font-bold">
+          <CountUp end={40} duration={10} />
+          %
+        </h2>
+        <p className="text-lg mt-2">TCO Reduction</p>
+      </div>
+
+      {/* Fourth Column */}
+      <div className="flex flex-col items-center">
+        <GlobeAltIcon className="h-12 w-12 text-green-700 mb-4" />
+        <h2 className="text-4xl font-bold">
+          $<CountUp end={1200000000000} duration={10} separator="," />
+        </h2>
+        <p className="text-lg mt-2">Transactions Processed</p>
+      </div>
+    </div>
+  );
+};
+
+export default StatsComponent;

src/components/composable/TwoColumnLeft.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const TwoColumnRight = () => {
+  return (
+    <div className="mt-0 mb-0">
+      <div className="mx-auto flex flex-col md:flex-row items-center max-w-7xl gap-6 justify-between">
+        <div className="md:w-7/12 mt-0">
+          <h2 className="font-extrabold text-3xl mb-4">Escape Rigid Commerce and Empower Your Merchandisers</h2>
+          <p className="">
+            Traditional commerce platforms confine merchandisers with rigid product and catalog management, stifling creativity and hindering the ability to craft truly unique shopping experiences.
+          </p>
+          <h2>
+            Elastic Path breaks the mold.
+          </h2>
+          <p>
+            We've reimagined commerce at the core, empowering your merchandisers with complete and unfettered flexibility. With Elastic Path, your merchandisers gain the flexibility to build the exact product experiences they envision, driving engagement, conversions, and customer loyalty.
+          </p>
+        </div>
+        <div className="md:w-5/12 mb-0">
+          <img
+            src="https://elastic-path.transforms.svdcdn.com/production/images/Stylized-Product-Page-Images/Fendi-PDP.png?w=900&h=900&q=90&fm=webp&fit=crop&dm=1691707283&s=d50937651a7c5a0aca64f0b9b009162b"
+            alt="Placeholder"
+            className="max-h-[500px] max-w-[500px]"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TwoColumnRight;

src/components/composable/TwoColumnRight.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const TwoColumnRight = () => {
+  return (
+    <div className="mt-0 mb-0">
+      <div className="mx-auto flex flex-col md:flex-row items-center max-w-7xl gap-6 justify-between">
+        <div className="md:w-5/12">
+          <img
+            src="https://elastic-path.transforms.svdcdn.com/production/images/Stylized-Product-Page-Images/integrations-hub_2023-08-10-160744_byek.png?w=900&h=900&q=90&fm=webp&fit=crop&dm=1691683664&s=c2ed775b9f4457eaeb22b678a3f27f6e"
+            alt="Placeholder"
+            className="max-h-[500px] max-w-[500px]"
+          />
+        </div>
+        <div className="md:w-7/12 mt-0">
+          <h2 className="font-extrabold text-3xl mb-4">One Platform, Endless Possibilities</h2>
+          <p className="">
+            Elastic Path is more than just a commerce platform – it's a comprehensive ecosystem designed to empower your business at every level.  From seamless backend integrations to a flexible core and a truly composable frontend, we provide everything you need to create exceptional omnichannel customer experiences.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TwoColumnRight;

src/components/composable/Uptime.jsx

@@ -0,0 +1,19 @@
+import { CloudIcon } from "@heroicons/react/24/outline";
+import React from "react";
+
+const Uptime = () => {
+  return (
+    <div className="mt-0 mb-0">
+      <div className="mx-auto flex flex-col md:flex-row items-center max-w-7xl gap-6 justify-between">
+        <div className="mt-10">
+          <h2 className="font-extrabold text-3xl mb-4 text-green-700">Unprecedented Uptime - 99.999%</h2>
+          <p className="text-gray-700">
+            100% Update during Black Friday and all major holiday sales events. Experience best-in-class resiliency that keeps your commerce operations running smoothly, even during peak traffic or unexpected disruptions.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Uptime;