@orcado/yoyui 0.0.1

package/pages/team/index.js

@@ -0,0 +1,88 @@
+const TemplatesPage = () => {
+    return (
+        <div>
+            <div className="doc-intro">
+                <h1>Meet the Team</h1>
+                <p>
+                    <a href="https://www.primetek.com.tr" className="text-primary hover:underline font-medium">
+                        PrimeTek
+                    </a>{' '}
+                    is a world renowned vendor of popular UI Component suites including{' '}
+                    <a href="https://primefaces.org" className="text-primary hover:underline font-medium">
+                        PrimeFaces
+                    </a>
+                    ,{' '}
+                    <a href="https://primeng.org" className="text-primary hover:underline font-medium">
+                        PrimeNG
+                    </a>
+                    ,{' '}
+                    <a href="https://primereact.org" className="text-primary hover:underline font-medium">
+                        PrimeReact
+                    </a>{' '}
+                    and{' '}
+                    <a href="https://primevue.org" className="text-primary hover:underline font-medium">
+                        PrimeVue
+                    </a>
+                    . All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries.
+                </p>
+            </div>
+
+            <div className="card p-7">
+                <div className="flex flex-wrap gap-7">
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/cagatay.jpg" className="border-circle mb-4" alt="Cagatay Civici" />
+                        <span className="mb-2 text-xl font-bold">Çağatay Çivici</span>
+                        <span>Founder</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/mert.jpg" className="border-circle mb-4" alt="Mert Sincan" />
+                        <span className="mb-2 text-xl font-bold">Mert Sincan</span>
+                        <span>CTO</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/dilara.jpg" className="border-circle mb-4" alt="Dilara Can" />
+                        <span className="mb-2 text-xl font-bold">Dilara Güngenci</span>
+                        <span>Business Administration</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/cetin.jpg" className="border-circle mb-4" alt="Çetin Çakıroğlu" />
+                        <span className="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/tugce.jpg" className="border-circle mb-4" alt="Tuğçe Küçükoğlu" />
+                        <span className="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/atakan.jpg" className="border-circle mb-4" alt="Atakan Tepe" />
+                        <span className="mb-2 text-xl font-bold">Atakan Tepe</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/mehmet.jpg" className="border-circle mb-4" alt="Mehmet Çetin" />
+                        <span className="mb-2 text-xl font-bold">Mehmet Çetin</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/taner.jpg" className="border-circle mb-4" alt="Taner Engin" />
+                        <span className="mb-2 text-xl font-bold">Taner Engin</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/giray.jpg" className="border-circle mb-4" alt="Giray Maviş" />
+                        <span className="mb-2 text-xl font-bold">Giray Maviş</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/kerem.jpg" className="border-circle mb-4" alt="Kerem Yıldan" />
+                        <span className="mb-2 text-xl font-bold">Kerem Yıldan</span>
+                        <span>Lead Designer</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplatesPage;

package/pages/templates/apollo/ApolloLogo.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" fill="var(--surface-0)" />
+        <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" fill="var(--surface-0)" />
+        <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" fill="var(--surface-0)" />
+        <path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" fill="var(--surface-0)" />
+        <path
+            d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" fill="var(--surface-0)" />
+        <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" fill="var(--surface-0)" />
+        <path
+            d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);

package/pages/templates/apollo/index.js

@@ -0,0 +1,234 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import ApolloLogo from './ApolloLogo';
+
+const apolloFeatures2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-responsive.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Top Notch Quality',
+        description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality-dark.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Apollo ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Apollo Figma file as they are available in <Link href="/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-figma.png'
+    }
+];
+
+const apolloFeatures1Data = [
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature1.png',
+        title: 'Ready to Use Applications',
+        description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature2.png',
+        title: 'E-Commerce Pages',
+        description: 'Apollo offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature3.png',
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light / Dark / Dim Modes',
+        description: 'Apollo has 3 display modes to choose from; Light, Dim and Dark.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Apollo offers 24 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Drawer.png'
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: 'Menu Themes',
+        description: 'Stunning theming for the main menu with 3 alternatives; Color Scheme, Primary Color and Transparent.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-menu-themes.png'
+    }
+];
+
+const license = {
+    documentLink: 'https://apollo.primereact.org/documentation/',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+const templateHeroData = {
+    logo: <ApolloLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-dashboard2.png',
+    description: 'Application template for React based on the popular NextJS framework with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 24 PrimeReact themes.',
+    liveHref: 'https://apollo.primereact.org',
+    docHref: 'https://apollo.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/apollo'
+};
+
+const ApolloSeparator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M22.3576 34.2499L19.6471 28.2974L17.2754 34.2499H22.3576Z" fill="var(--surface-900)" />
+                    <path d="M27.8454 28.2974L30.5559 34.2499H25.4736L27.8454 28.2974Z" fill="var(--surface-900)" />
+                    <path d="M24.0043 10.25L12.001 34.187H16.0501L24.0048 17.1962L31.7995 34.187H36.009L24.0043 10.25Z" fill="var(--surface-900)" />
+                </svg>
+            }
+        />
+    );
+};
+
+const ApolloPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="apollo template">
+            <TemplateHero {...templateHeroData} />
+            <ApolloSeparator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-youtube-screen.png'} />
+                <ApolloSeparator />
+            </div>
+            <TemplateLicense license={license} />
+            <ApolloSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <ApolloSeparator />
+            <TemplateFeatures featuresData={apolloFeatures1Data} displayType="horizontal" />
+            <ApolloSeparator />
+            <TemplateConfiguration title="React based on Next.JS" description="Apollo is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <ApolloSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <ApolloSeparator />
+            <TemplateFeatures featuresData={apolloFeatures2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default ApolloPage;

package/pages/templates/atlantis/AtlantisLogo.js

@@ -0,0 +1,37 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" fill="var(--surface-0)" />
+        <path
+            d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" fill="var(--surface-0)" />
+        <path
+            d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);

package/pages/templates/atlantis/index.js

@@ -0,0 +1,211 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import AtlantisLogo from './AtlantisLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Full SaSS Support',
+        description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Atlantis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Atlantis Figma file as they are available in <Link href="/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'The stunning dark and light modes will impress your users.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Drawer.png'
+            }
+        ]
+    }
+];
+
+const license = {
+    documentLink: 'https://atlantis.primereact.org/documentation',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const templateHeroData = {
+    logo: <AtlantisLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-dashboard2.png',
+    description: 'Prepare to be amazed by the remastered Atlantis for PrimeReact featuring a new gorgeous dark mode for the entire layout, 7 menu modes, reusable css widgets, utilities, modern icons and many more.',
+    liveHref: 'https://atlantis.primereact.org/',
+    docHref: 'https://atlantis.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/atlantis'
+};
+
+const AtlantisSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M17.736 16.7144C18.5426 24.1391 29.4206 24.1338 30.2244 16.7144C27.4389 16.4579 25.0833 14.6946 23.9802 12.25C22.8772 14.6946 20.5216 16.4579 17.736 16.7144ZM23.2804 23.6609C23.0374 26.3486 20.8981 28.6944 18.2461 29.186C14.6619 29.9314 11.1098 27.2517 10.792 23.6609C13.5776 23.4044 15.9332 21.6411 17.0362 19.1965C18.1312 21.6598 20.591 23.4338 23.2804 23.6609ZM30.2244 30.6073C29.904 33.7706 27.2252 36.25 23.9802 36.25C20.7353 36.25 18.0565 33.7706 17.736 30.6073C20.4255 30.3802 22.8852 28.6062 23.9802 26.1429C25.0752 28.6062 27.535 30.3802 30.2244 30.6073ZM37.1683 23.6609C36.8478 27.0219 33.7737 29.6108 30.3525 29.2768C27.436 29.0551 24.9362 26.5757 24.6798 23.6609C27.3693 23.4338 29.829 21.6598 30.924 19.1965C32.0271 21.6411 34.3827 23.4044 37.1683 23.6609Z"
+                        fill="var(--surface-900)"
+                    />
+                </svg>
+            }
+        />
+    );
+};
+
+const AtlantisPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="atlantis template">
+            <TemplateHero {...templateHeroData} />
+            <AtlantisSeperator />
+            <TemplateLicense license={license} />
+            <AtlantisSeperator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-youtube-screen.png'} />
+                <AtlantisSeperator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <AtlantisSeperator />
+            <TemplateConfiguration title="React based on Next.JS" description="Atlantis is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <AtlantisSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <AtlantisSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default AtlantisPage;

package/pages/templates/avalon/AvalonLogo.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
+        <path d="M6.33333 0.555555H14.6111L20.9444 39.4444H14.8333L13.7222 31.7222V31.8333H6.77778L5.66667 39.4444H0L6.33333 0.555555ZM13 26.5556L10.2778 7.33334H10.1667L7.5 26.5556H13Z" fill="var(--surface-0)" />
+        <path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" fill="var(--surface-0)" />
+        <path d="M46.6978 0.555555H54.9756L61.3091 39.4444H55.1978L54.0867 31.7222V31.8333H47.1423L46.0311 39.4444H40.3645L46.6978 0.555555ZM53.3645 26.5556L50.6422 7.33334H50.5311L47.8645 26.5556H53.3645Z" fill="var(--surface-0)" />
+        <path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" fill="var(--surface-0)" />
+        <path
+            d="M91.9875 40C88.9875 40 86.691 39.1482 85.0986 37.4444C83.5059 35.7407 82.7097 33.3333 82.7097 30.2222V9.77779C82.7097 6.66667 83.5059 4.25925 85.0986 2.55556C86.691 0.851853 88.9875 0 91.9875 0C94.9875 0 97.2837 0.851853 98.8764 2.55556C100.469 4.25925 101.265 6.66667 101.265 9.77779V30.2222C101.265 33.3333 100.469 35.7407 98.8764 37.4444C97.2837 39.1482 94.9875 40 91.9875 40ZM91.9875 34.4444C94.0986 34.4444 95.1541 33.1667 95.1541 30.6111V9.3889C95.1541 6.83334 94.0986 5.55556 91.9875 5.55556C89.8764 5.55556 88.8208 6.83334 88.8208 9.3889V30.6111C88.8208 33.1667 89.8764 34.4444 91.9875 34.4444Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" fill="var(--surface-0)" />
+    </svg>
+);