diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js index 573197d516..a97879fd18 100644 --- a/components/templates/TemplateConfiguration.js +++ b/components/templates/TemplateConfiguration.js @@ -1,6 +1,9 @@ -import React from 'react'; +import React from 'react' -const TemplateConfiguration = ({ title = '', description = '' }) => { +const TemplateConfiguration = ({ + title = "", + description = "", +}) => { return (
@@ -27,6 +30,6 @@ const TemplateConfiguration = ({ title = '', description = '' }) => {
); -}; +} -export default TemplateConfiguration; +export default TemplateConfiguration \ No newline at end of file diff --git a/components/templates/TemplateFeatures.js b/components/templates/TemplateFeatures.js index 8bb3c8423a..d96f9720eb 100644 --- a/components/templates/TemplateFeatures.js +++ b/components/templates/TemplateFeatures.js @@ -1,14 +1,18 @@ -import React from 'react'; -import { ObjectUtils } from '../lib/utils/Utils'; +import React, { useContext } from 'react'; +import AppContentContext from '../layout/appcontentcontext'; const TemplateFeatures = ({ featuresData, displayType }) => { + const { darkMode } = useContext(AppContentContext); + const renderHorizontalFeatures = () => { return (
{featuresData.map((data, i) => (
-
{ObjectUtils.getJSXElement(data.template) || {data.title}}
+
+ {data.title} +
{data.title}

{data.description}

@@ -33,7 +37,9 @@ const TemplateFeatures = ({ featuresData, displayType }) => {
{(i === 0 ? firstColumnData : secondColumnData).map((data, j) => (
-
{ObjectUtils.getJSXElement(data.template) || {data.title}}
+
+ {data.title} +

{data.title}

{data.description}

diff --git a/components/templates/TemplateIntro.js b/components/templates/TemplateIntro.js new file mode 100644 index 0000000000..aeed502a18 --- /dev/null +++ b/components/templates/TemplateIntro.js @@ -0,0 +1,19 @@ +import React from 'react' + +const TemplateIntro = ({ + title, + description, + imageURL +}) => { + return ( +
+

{title}

+

{description}

+
+ Template Hero Image +
+
+ ) +} + +export default TemplateIntro \ No newline at end of file diff --git a/components/templates/TemplateLicense.js b/components/templates/TemplateLicense.js new file mode 100644 index 0000000000..cbd802deca --- /dev/null +++ b/components/templates/TemplateLicense.js @@ -0,0 +1,28 @@ +import React from 'react' + +const TemplateLicense = ({ license }) => { + return ( +
+
+
+ {license.licenseDetails.map(({ title, price, included }, i) => ( +
+ {title} +

{price}

+
+ {included.map((txt, j) => ( +

{txt}

+ ))} +
+ +
+ ))} +
+

{license.description}

+

Visit the official documentation for more information.

+
+
+ ) +} + +export default TemplateLicense \ No newline at end of file diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js index 1c2f400e3d..232599a93d 100644 --- a/components/templates/TemplateRelated.js +++ b/components/templates/TemplateRelated.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from 'react' const TemplateRelated = ({ relatedData }) => { return ( @@ -7,7 +7,7 @@ const TemplateRelated = ({ relatedData }) => {

Related Layouts

{relatedData.map((data, i) => ( - + {'Related ))} @@ -15,6 +15,6 @@ const TemplateRelated = ({ relatedData }) => {
); -}; +} -export default TemplateRelated; +export default TemplateRelated \ No newline at end of file diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js index d5fe83afd0..f7ae188d82 100644 --- a/components/templates/TemplateSeparator.js +++ b/components/templates/TemplateSeparator.js @@ -1,11 +1,11 @@ -import React from 'react'; +import React from 'react' const TemplateSeparator = ({ separatorLogo }) => { return ( -
- {separatorLogo} +
+ {separatorLogo}
); -}; +} -export default TemplateSeparator; +export default TemplateSeparator \ No newline at end of file diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js index e6fee4aa95..ec44e47de9 100644 --- a/components/templates/TemplateYoutube.js +++ b/components/templates/TemplateYoutube.js @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { Dialog } from '../lib/primereact.all'; +import React, { useState } from 'react' +import { Dialog } from '../lib/primereact.all' const PlayIcon = React.memo(() => ( @@ -61,4 +61,4 @@ const TemplateYoutube = ({ ); }; -export default TemplateYoutube; +export default TemplateYoutube \ No newline at end of file diff --git a/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js index 84ff60c135..7aeb1f9627 100644 --- a/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js +++ b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js @@ -1,29 +1,39 @@ -import React, { useRef } from 'react'; +import React, { useRef } from 'react' import useAnimatedFeatures from './useAnimatedFeatures'; -const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentID, inlineSeconds = 1000 }) => { - const animationInlineRef = useRef(null); - const { selectedID, handleClick } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds); +const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentHandleHover, parentID, inlineSeconds = 1000 }) => { + const animationInlineRef = useRef(null) + const { selectedID, setHoveredID, handleClick, handleHover } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds); const handleBtnClick = (id) => { - handleClick(id); - parentHandleClick(parentID); - }; + handleClick(id) + parentHandleClick(parentID) + } + + const enterCardArea = (id) => { + setHoveredID(id); + handleHover(id, 'onMouseEnter'); + parentHandleHover(parentID, 'onMouseEnter'); + } + + const leaveCardArea = (id) => { + setHoveredID(null); + handleHover(id, 'onMouseLeave'); + parentHandleHover(parentID, 'onMouseLeave'); + } return ( -
-
+
+
{inlineFeaturesData.map((data, i) => ( - + ))}
-
- Animation Inline Feature Image +
+ Animation Inline Feature Image
- ); -}; + ) +} -export default TemplateFeaturesAnimationInline; +export default TemplateFeaturesAnimationInline \ No newline at end of file diff --git a/components/templates/templateFeaturesAnimation/index.js b/components/templates/templateFeaturesAnimation/index.js index 7c88af6684..c19ed60f89 100644 --- a/components/templates/templateFeaturesAnimation/index.js +++ b/components/templates/templateFeaturesAnimation/index.js @@ -1,10 +1,20 @@ -import React, { useRef } from 'react'; +import React, { useRef } from 'react' import useAnimatedFeatures from './useAnimatedFeatures'; import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline'; const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 5000 }) => { const animationRef = useRef(null); - const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds); + const { selectedID, setHoveredID , handleClick,handleHover } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds); + + const enterCardArea = (id) => { + setHoveredID(id) + handleHover(id, 'onMouseEnter'); + } + + const leaveCardArea = (id) => { + setHoveredID(null) + handleHover(id, 'onMouseLeave'); + } return (
@@ -15,7 +25,7 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500 const orderNumber = (i + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }); return ( -
handleClick(data.id)}> +
enterCardArea(data.id)} onMouseLeave={() => leaveCardArea(data.id)} className={`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`} onClick={() => handleClick(data.id)}>
{orderNumber}
{orderNumber}
@@ -34,6 +44,7 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500 @@ -44,6 +55,6 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500
); -}; +} -export default TemplateFeaturesAnimation; +export default TemplateFeaturesAnimation \ No newline at end of file diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js index 3a3ac17f79..a7b1cac85f 100644 --- a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js +++ b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js @@ -1,45 +1,61 @@ // useAnimatedFeatures.js -import { useEffect, useState } from 'react'; -import useVisible from './useVisible'; +import React, { useEffect, useState } from "react"; +import useVisible from "./useVisible"; -const useAnimatedFeatures = (animationRef, arrayLength, seconds = 5000) => { +const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => { const [selectedID, setSelectedID] = useState(1); const [intervalIds, setIntervalIds] = useState([]); + const [cancelInterval, setCancelInterval] = useState(false); + const [hoveredID, setHoveredID] = useState(null); const isVisible = useVisible(animationRef); const clearAllIntervals = () => { if (intervalIds.length <= 0) return; - intervalIds.forEach((intervalId) => window.clearInterval(intervalId)); + intervalIds.forEach(intervalId => window.clearInterval(intervalId)); setIntervalIds([]); }; const createInterval = () => { const interval = setInterval(() => { - setSelectedID((prev) => (prev === arrayLength ? 1 : prev + 1)); + setSelectedID(prev => (prev === arrayLength ? 1 : prev + 1)); }, seconds); - setIntervalIds((prev) => [...prev, interval]); - }; + setIntervalIds(prev => [...prev, interval]); + } - const handleClick = (cardId) => { + const handleClick = cardId => { clearAllIntervals(); setSelectedID(cardId); - createInterval(); + setCancelInterval(true) + }; + + const handleHover = (cardId, type) => { + if (cancelInterval || cardId !== selectedID) return; + clearAllIntervals(); + + if (type === "onMouseLeave") { + setSelectedID(cardId); + createInterval() + } }; useEffect(() => { clearAllIntervals(); if (isVisible) { - createInterval(); + createInterval() } else { clearAllIntervals(); - setSelectedID(1); + setSelectedID(1) } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isVisible]); + }, [animationRef, isVisible]); + + useEffect(() => { + if (!hoveredID) null; + handleHover(hoveredID, "onMouseEnter"); + }, [selectedID]) - return { selectedID, handleClick }; + return { selectedID, setHoveredID, handleClick, handleHover }; }; export default useAnimatedFeatures; diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js index 368e1314cd..7ff3ac7b8f 100644 --- a/components/templates/templateFeaturesAnimation/useVisible.js +++ b/components/templates/templateFeaturesAnimation/useVisible.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React, { useState, useEffect } from 'react'; const useVisible = (element, rootMargin = 0.2) => { const [isVisible, setIsVisible] = useState(false); @@ -8,7 +8,7 @@ const useVisible = (element, rootMargin = 0.2) => { ([entry]) => { setIsVisible(entry.isIntersecting); }, - { threshold: rootMargin } + { threshold: rootMargin }, ); if (element.current) { @@ -17,13 +17,13 @@ const useVisible = (element, rootMargin = 0.2) => { return () => { if (observer && element.current) { - // eslint-disable-next-line react-hooks/exhaustive-deps - observer.unobserve(element.current); + observer.unobserve(element.current) } - }; - }); + } + + }, []); return isVisible; }; -export default useVisible; +export default useVisible; \ No newline at end of file diff --git a/components/templates/templateHero/TemplateHero.js b/components/templates/templateHero/TemplateHero.js index 0f8b6a5336..a3ed3e0739 100644 --- a/components/templates/templateHero/TemplateHero.js +++ b/components/templates/templateHero/TemplateHero.js @@ -1,8 +1,8 @@ -import React from 'react'; -import TemplateHeroRectangle from './TemplateHeroRectangle'; -import TemplateHeroLight from './TemplateHeroLight'; +import React from 'react' +import TemplateHeroRectangle from './TemplateHeroRectangle' +import TemplateHeroLight from './TemplateHeroLight' -const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, description, liveHref, docHref }) => { +const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, description, liveHref, docHref, supportHref, storeHref, free }) => { return (
{!!pattern && Template Hero Pattern} @@ -15,14 +15,14 @@ const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, Live Demo - - Buy Now + + {free ? 'Source Code' : 'Buy Now'}
- + - Get Support + {free ? 'Open Issues' : 'Get Support'} @@ -36,4 +36,4 @@ const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, ); }; -export default TemplateHero; +export default TemplateHero \ No newline at end of file diff --git a/components/templates/templateHero/TemplateHeroLight.js b/components/templates/templateHero/TemplateHeroLight.js index a015619c57..ce658d66eb 100644 --- a/components/templates/templateHero/TemplateHeroLight.js +++ b/components/templates/templateHero/TemplateHeroLight.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React from 'react' const TemplateHeroLight = () => { return ( - + @@ -58,7 +58,7 @@ const TemplateHeroLight = () => { - ); -}; + ) +} -export default TemplateHeroLight; +export default TemplateHeroLight \ No newline at end of file diff --git a/components/templates/templateHero/TemplateHeroRectangle.js b/components/templates/templateHero/TemplateHeroRectangle.js index 7822e916d2..9564097ac1 100644 --- a/components/templates/templateHero/TemplateHeroRectangle.js +++ b/components/templates/templateHero/TemplateHeroRectangle.js @@ -1,10 +1,10 @@ -import React from 'react'; +import React from 'react' const TemplateHeroRectangle = () => { return ( <> - - + + @@ -19,8 +19,9 @@ const TemplateHeroRectangle = () => { + - ); -}; + ) +} -export default TemplateHeroRectangle; +export default TemplateHeroRectangle \ No newline at end of file diff --git a/pages/templates/apollo/ApolloLogo.js b/pages/templates/apollo/ApolloLogo.js index 5c9a9deb30..67f8ffccb0 100644 --- a/pages/templates/apollo/ApolloLogo.js +++ b/pages/templates/apollo/ApolloLogo.js @@ -1,23 +1,23 @@ // eslint-disable-next-line import/no-anonymous-default-export export default () => ( - - - - + + + + - - + + ); diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js index 8c4cfd223c..b301a3dccb 100644 --- a/pages/templates/apollo/index.js +++ b/pages/templates/apollo/index.js @@ -1,28 +1,62 @@ -import React, { useContext } from 'react'; -import AppContentContext from '@/components/layout/appcontentcontext'; +import React from 'react'; import TemplateYoutube from '@/components/templates/TemplateYoutube'; import TemplateFeatures from '@/components/templates/TemplateFeatures'; import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; import TemplateRelated from '@/components/templates/TemplateRelated'; -import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import ApolloLogo from './ApolloLogo'; - -import Compatible from '../../../public/images/templates/apollo/apollo-features2-compatible.svg'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import TemplateLicense from '@/components/templates/TemplateLicense'; const apolloRelatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '' + src: '/images/templates/diamond-react.jpg', + href: '/templates/diamond' + }, + { + src: '/images/templates/avalon-react.jpg', + href: '/templates/avalon' + }, + { + src: '/images/templates/babylon-react.jpg', + href: '/templates/babylon' + } +]; + +const apolloFeatures2Data = [ + { + title: 'Fully Responsive', + description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/apollo/apollo-features2-responsive.png' }, { - src: '/images/templates/related-avalon.png', - href: '' + title: 'Lifetime Support', + description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/images/templates/apollo/apollo-features2-lifetime.png' }, { - src: '/images/templates/related-diamond.png', - href: '' + title: 'Top Notch Quality', + description: 'Superior standards with 100% compatibility for strict mode and linting tools.', + src: '/images/templates/apollo/apollo-features2-quality.png', + darkSrc: '/images/templates/apollo/apollo-features2-quality-dark.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Customizable Design', + description: 'Fully customizable with a mixture of Sass and CSS variables.', + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/apollo/apollo-features2-mobile.png' } ]; @@ -36,7 +70,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -49,7 +85,9 @@ const animationFeaturesData1 = [ 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 preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Apollo Figma file as they are available in PrimeOne for Figma only.', + <> + Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Apollo Figma file as they are available in PrimeOne for Figma only. + , src: '/images/templates/apollo/features-animation-figma.png' } ]; @@ -137,14 +175,38 @@ const animationFeaturesData2 = [ } ]; +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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} const templateHeroData = { logo: , pattern: '/images/templates/apollo/apollo-hero-pattern.png', - rectangle: '/images/templates/apollo/apollo-hero-rectangle1.png', - light: '/images/templates/apollo/apollo-hero-light.png', dashboard1: '/images/templates/apollo/apollo-hero-dashboard1.png', dashboard2: '/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.', + 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' }; @@ -164,47 +226,9 @@ const ApolloSeparator = () => { }; const ApolloPage = () => { - const { darkMode } = useContext(AppContentContext); - const imgPathDark = darkMode ? '-dark' : ''; - - const apolloFeatures2Data = [ - { - title: 'Fully Responsive', - description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.', - src: '/images/templates/apollo/apollo-features2-responsive.png' - }, - { - title: 'Lifetime Support', - description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', - src: '/images/templates/apollo/apollo-features2-lifetime.png' - }, - { - title: 'Top Notch Quality', - description: 'Superior standards with 100% compatibility for strict mode and linting tools.', - src: `/images/templates/apollo/apollo-features2-quality${imgPathDark}.svg` - }, - { - title: 'Cross Browser Compatible', - description: 'First class support for Firefox, Safari, Chrome and Edge.', - template: - }, - { - title: 'Customizable Design', - description: 'Fully customizable with a mixture of Sass and CSS variables.', - src: `/images/templates/apollo/apollo-features2-customizable${imgPathDark}.svg` - }, - { - title: 'Mobile Experience', - description: 'Touch optimized enhanced mobile experience with responsive design.', - src: '/images/templates/apollo/apollo-features2-mobile.png' - } - ]; - const featuresAnimationTitle = (

- Features that the -
- Apollo template gives you + Features

); @@ -216,11 +240,13 @@ const ApolloPage = () => {
+ + - + diff --git a/pages/templates/atlantis/AtlantisLogo.js b/pages/templates/atlantis/AtlantisLogo.js index c1657ffed9..3bcb20c368 100644 --- a/pages/templates/atlantis/AtlantisLogo.js +++ b/pages/templates/atlantis/AtlantisLogo.js @@ -1,37 +1,37 @@ // eslint-disable-next-line import/no-anonymous-default-export export default () => ( - + - + ); diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js index 8f8e7978d4..a54a400491 100644 --- a/pages/templates/atlantis/index.js +++ b/pages/templates/atlantis/index.js @@ -3,12 +3,13 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube'; import TemplateFeatures from '@/components/templates/TemplateFeatures'; import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; import TemplateRelated from '@/components/templates/TemplateRelated'; -import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import AtlantisLogo from './AtlantisLogo'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import TemplateLicense from '@/components/templates/TemplateLicense'; -const apolloFeatures2Data = [ +const features2Data = [ { title: 'Fully Responsive', description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.', @@ -17,7 +18,8 @@ const apolloFeatures2Data = [ { title: 'Cross Browser Compatible', description: 'First class support for Firefox, Safari, Chrome and Edge.', - src: '/images/templates/apollo/apollo-features2-compatible.png' + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', }, { title: 'Lifetime Support', @@ -27,7 +29,8 @@ const apolloFeatures2Data = [ { title: 'Full SaSS Support', description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.', - src: '/images/templates/apollo/apollo-features2-customizable.png' + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' }, { title: 'Ready to Use Pages', @@ -41,18 +44,18 @@ const apolloFeatures2Data = [ } ]; -const apolloRelatedData = [ +const relatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '/templates/atlantis' + src: '/images/templates/freya-react.jpg', + href: '/templates/freya' }, { - src: '/images/templates/related-avalon.png', - href: '' + src: '/images/templates/ultima-react.jpg', + href: '/templates/ultima' }, { - src: '/images/templates/related-diamond.png', - href: '/templates/diamond' + src: '/images/templates/roma-react.jpg', + href: '/templates/roma' } ]; @@ -66,7 +69,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -79,8 +84,10 @@ const animationFeaturesData1 = [ 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 preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Atlantis Figma file as they are available in PrimeOne for Figma only.', - src: '/images/templates/apollo/features-animation-figma.png' + <> + Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Atlantis Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/atlantis/features-animation-figma.png' } ]; @@ -143,14 +150,39 @@ const animationFeaturesData2 = [ } ]; +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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + const templateHeroData = { logo: , pattern: '/images/templates/atlantis/atlantis-hero-pattern.png', - rectangle: '/images/templates/atlantis/atlantis-hero-rectangle1.png', - light: '/images/templates/atlantis/atlantis-hero-light.png', dashboard1: '/images/templates/atlantis/atlantis-hero-dashboard1.png', dashboard2: '/images/templates/atlantis/atlantis-hero-dashboard2.png', - description: 'Atlantis is a beautiful React.js admin template with a modern look and feel optimized for creating React apps.', + description: 'Prepare to be amazed by the remastered Atlantis for PrimeReact featuring a new gorgeous dark mode for the entire layout, 5 menu modes, reusable css widgets, utilities, modern icons and many more.', liveHref: 'https://www.primefaces.org/atlantis-react/', docHref: 'https://www.primefaces.org/atlantis-react/documentation/' }; @@ -175,8 +207,7 @@ const AtlantisSeperator = () => { const AtlantisPage = () => { const featuresAnimationTitle = (

- Features that the
- Atlantis template gives you + Features

); @@ -184,20 +215,24 @@ const AtlantisPage = () => {
- + + - + - +
); }; diff --git a/pages/templates/avalon/AvalonLogo.js b/pages/templates/avalon/AvalonLogo.js new file mode 100644 index 0000000000..efa7953947 --- /dev/null +++ b/pages/templates/avalon/AvalonLogo.js @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + +); diff --git a/pages/templates/avalon/AvalonSeparator.js b/pages/templates/avalon/AvalonSeparator.js new file mode 100644 index 0000000000..5731d3f27e --- /dev/null +++ b/pages/templates/avalon/AvalonSeparator.js @@ -0,0 +1,283 @@ +import React from 'react'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + +const AvalonSeparator = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + /> + ); +}; + +export default AvalonSeparator; \ No newline at end of file diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js new file mode 100644 index 0000000000..37a555c056 --- /dev/null +++ b/pages/templates/avalon/index.js @@ -0,0 +1,247 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import AvalonLogo from './AvalonLogo'; +import AvalonSeparator from './AvalonSeparator'; +import TemplateLicense from '@/components/templates/TemplateLicense'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Avalon is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/avalon/avalon-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Lifetime Support', + description: 'Diamond has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/images/templates/apollo/apollo-features2-lifetime.png' + }, + { + title: 'Customizable Design', + description: 'Fully customizable with a mixture of Sass and CSS variables.', + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' + }, + { + title: 'Top Notch Quality', + description: 'Superior standards with 100% compatibility for strict mode and linting tools.', + src: '/images/templates/apollo/apollo-features2-quality.png', + darkSrc: '/images/templates/apollo/apollo-features2-quality-dark.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/avalon/avalon-features2-mobile.png' + } +]; + +const relatedData = [ + { + src: '/images/templates/babylon-react.jpg', + href: '/templates/babylon' + }, + { + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' + }, + { + src: '/images/templates/roma-react.jpg', + href: '/templates/roma' + } +]; + +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: '/images/templates/apollo/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/apollo/features-animation-blocks.png' + }, + { + id: 3, + title: 'PrimeIcons', + description: 'Avalon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.', + src: '/images/templates/apollo/features-animation-icons.png' + }, + { + id: 4, + title: 'Figma File', + description: + <> + Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Avalon Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/avalon/features-animation-figma.png' + } +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: 'Light and Dark Modes', + description: 'Avalon offers you 2 uniquely designed layout modes to choose from; Light and Dark.', + src: '/images/templates/avalon/features-animation-darkmode.png' + }, + { + id: 2, + title: 'Component 10 Beautiful Themes', + description: 'Avalon offers 10 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.', + src: '/images/templates/avalon/features-animation-component-themes.png' + }, + { + id: 3, + title: '7 Menu Orientations', + description: 'Avalon has 7 menu layouts to choose from; Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal with Light and Dark options.', + src: '/images/templates/diamond/features-animation-orientations.png', + type: 'inline-animation', + inlineFeaturesData: [ + { + id: 1, + title: 'Static', + src: '/images/templates/avalon/Static.png' + }, + { + id: 2, + title: 'Slim', + src: '/images/templates/avalon/Slim.png' + }, + { + id: 3, + title: 'Reveal', + src: '/images/templates/avalon/Reveal.png' + }, + { + id: 4, + title: 'Horizontal', + src: '/images/templates/avalon/Horizontal.png' + }, + { + id: 5, + title: 'Overlay', + src: '/images/templates/avalon/Overlay.png' + }, + { + id: 6, + title: 'Slim+', + src: '/images/templates/avalon/Slim+.png' + }, + { + id: 7, + title: 'Drawer', + src: '/images/templates/avalon/Drawer.png' + }, + ] + }, + { + id: 4, + title: 'Topbar Themes', + description: 'Avalon comes with 11 topbar themes guaranteeing an enviable design.', + src: '/images/templates/avalon/features-animation-menu-themes.png' + } +]; + +const features1Data = [ + { + src: '/images/templates/avalon/avalon-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: '/images/templates/avalon/avalon-features1-feature2.png', + title: 'E-Commerce Pages', + description: 'Avalon offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.' + }, + { + src: '/images/templates/avalon/avalon-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 license = { + documentLink: 'https://avalon.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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$49', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$490', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + +const templateHeroData = { + logo: , + pattern: '/images/templates/avalon/avalon-hero-pattern.png', + light: true, + rectangle:true, + dashboard1: '/images/templates/avalon/avalon-hero-dashboard1.png', + dashboard2: '/images/templates/avalon/avalon-hero-dashboard2.png', + description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.', + liveHref: 'https://avalon.primereact.org/', + docHref: 'https://avalon.primereact.org/documentation' +}; + +const AvalonPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + + + + + +
+ ); +}; + +export default AvalonPage; diff --git a/pages/templates/babylon/BabylonLogo.js b/pages/templates/babylon/BabylonLogo.js new file mode 100644 index 0000000000..fb0cb9e898 --- /dev/null +++ b/pages/templates/babylon/BabylonLogo.js @@ -0,0 +1,21 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + + + + + + + + + + + +); diff --git a/pages/templates/babylon/index.js b/pages/templates/babylon/index.js new file mode 100644 index 0000000000..ca23d836fb --- /dev/null +++ b/pages/templates/babylon/index.js @@ -0,0 +1,221 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import BabylonLogo from './BabylonLogo'; +import TemplateLicense from '@/components/templates/TemplateLicense'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Babylon is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/babylon/babylon-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Lifetime Support', + description: 'Babylon has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/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: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/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: '/images/templates/babylon/babylon-features2-ready.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/babylon/babylon-features2-mobile.png' + } +]; + +const relatedData = [ + { + src: '/images/templates/ultima-react.jpg', + href: '/templates/ultima' + }, + { + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' + }, + { + src: '/images/templates/diamond-react.jpg', + href: '/templates/diamond' + } +]; + +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: '/images/templates/babylon/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/babylon/features-animation-blocks.png' + }, + { + id: 3, + title: 'PrimeIcons', + description: 'Babylon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.', + src: '/images/templates/babylon/features-animation-icons.png' + }, +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: '4 Menu Orientations, Light and Dark Menus', + description: 'Babylon has 4 menu modes; Static, Overlay, Horizontal and Slim with Light and Dark color alternatives.', + src: '/images/templates/atlantis/features-animation-orientations.png', + type: 'inline-animation', + inlineFeaturesData: [ + { + id: 1, + title: 'Static', + src: '/images/templates/babylon/Static.png' + }, + { + id: 2, + title: 'Overlay', + src: '/images/templates/babylon/Overlay.png' + }, + { + id: 3, + title: 'Horizontal', + src: '/images/templates/babylon/Horizontal.png' + }, + { + id: 4, + title: 'Slim', + src: '/images/templates/babylon/Slim.png' + }, + ] + }, + { + id: 2, + title: '17 Beautiful Themes', + description: 'Babylon offers 17 built-in themes and creating your own theme is a matter of defining couple of sass variables.', + src: '/images/templates/babylon/features-animation-component-themes.png' + }, + + { + id: 3, + title: '2 Profile Modes', + description: 'User profile menu can either be placed inside the main menu or topbar.', + src: '/images/templates/babylon/features-animation-profile.png' + }, +]; + + +const license = { + documentLink: 'https://www.primefaces.org/babylon-react/#/documentation', + description:'Download package is an create-react-app project that contains all the resources including css, scss, images, fonts, login, promotion, error pages and sample demos.', + licenseDetails: [ + { + title: 'Basic License', + price: '$19', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$190', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + +const templateHeroData = { + logo: , + pattern: '/images/templates/babylon/babylon-hero-pattern.png', + dashboard1: '/images/templates/babylon/babylon-hero-dashboard1.png', + dashboard2: '/images/templates/babylon/babylon-hero-dashboard2.png', + description: 'An elegant premium application template with a beautiful design. Fully customizable with SASS variables and optimized for all devices with responsive design.', + liveHref: 'https://www.primefaces.org/babylon-react/', + docHref: 'https://www.primefaces.org/babylon-react/#/documentation' +}; + +const BabylonSeparator = () => { + return ( + + + + + + + + + + + + + + + + + } + /> + ); +}; + +const BabylonPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + + + +
+ ); +}; + +export default BabylonPage; diff --git a/pages/templates/california/CaliforniaLogo.js b/pages/templates/california/CaliforniaLogo.js new file mode 100644 index 0000000000..a3e629e392 --- /dev/null +++ b/pages/templates/california/CaliforniaLogo.js @@ -0,0 +1,51 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/pages/templates/california/index.js b/pages/templates/california/index.js new file mode 100644 index 0000000000..d72b262b22 --- /dev/null +++ b/pages/templates/california/index.js @@ -0,0 +1,223 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import CaliforniaLogo from './CaliforniaLogo'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; +import TemplateIntro from '@/components/templates/TemplateIntro'; +import TemplateLicense from '@/components/templates/TemplateLicense'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Diamond is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/california/california-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png' + }, + { + title: 'Lifetime Support', + description: 'Diamond has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/images/templates/apollo/apollo-features2-lifetime.png' + }, + { + title: 'Customizable Design', + description: 'Fully customizable with a mixture of Sass and CSS variables.', + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/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: '/images/templates/california/california-features2-ready.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/california/california-features2-mobile.png' + } +]; + +const relatedData = [ + { + src: '/images/templates/babylon-react.jpg', + href: 'https://www.primefaces.org/layouts/babylon-react' + }, + { + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' + }, + { + src: '/images/templates/roma-react.jpg', + href: 'https://www.primefaces.org/layouts/roma-react' + } +]; + +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: '/images/templates/california/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/california/features-animation-blocks.png' + }, + { + id: 3, + title: 'PrimeIcons', + description: 'Diamond ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.', + src: '/images/templates/california/features-animation-icons.png' + }, +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: 'Mega Menu', + description: 'California offers a new mega option as an intuitive way to enhance the user experience across different devices.', + src: '/images/templates/california/features-animation-mega.png' + }, + { + id: 2, + title: 'Special and Solid Themes', + description: 'California Theme is highly customizable, there are 20 built-in themes and creating your own theme is a matter of defining couple of sass variables.', + src: '/images/templates/california/features-animation-theme.png' + }, + { + id: 3, + title: '3 Different Menu Color ', + description: 'Choose from Static and Slim menu orientations.', + src: '/images/templates/california/features-animation-color.png' + } +]; + +const license = { + documentLink: 'https://www.primefaces.org/babylon-react/#/documentation', + description:'Download package is an create-react-app project that contains all the resources including css, scss, images, fonts, login, promotion, error pages and sample demos.', + licenseDetails: [ + { + title: 'Basic License', + price: '$19', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$190', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + +const templateHeroData = { + logo: , + pattern: '/images/templates/california/california-hero-pattern.png', + dashboard1: '/images/templates/california/california-hero-dashboard1.png', + dashboard2: '/images/templates/california/california-hero-dashboard2.png', + description: 'A modern and easy to use premium application template with various color schemes.Based on flat design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.', + liveHref: 'https://diamond.primereact.org', + docHref: 'https://diamond.primereact.org/documentation' +}; + +const CaliforniaSeparator = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + /> + ); +}; + +const CaliforniaPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + + + + + +
+ ); +}; + +export default CaliforniaPage; diff --git a/pages/templates/diamond/DiamondLogo.js b/pages/templates/diamond/DiamondLogo.js index 73d8fdb1d6..b7c0c4a0b7 100644 --- a/pages/templates/diamond/DiamondLogo.js +++ b/pages/templates/diamond/DiamondLogo.js @@ -4,16 +4,16 @@ export default () => ( - + diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js index ebec7b63cf..47e2b50752 100644 --- a/pages/templates/diamond/index.js +++ b/pages/templates/diamond/index.js @@ -3,12 +3,13 @@ import TemplateYoutube from '@/components/templates/TemplateYoutube'; import TemplateFeatures from '@/components/templates/TemplateFeatures'; import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; import TemplateRelated from '@/components/templates/TemplateRelated'; -import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import DiamondLogo from './DiamondLogo'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import TemplateLicense from '@/components/templates/TemplateLicense'; -const apolloFeatures2Data = [ +const features2Data = [ { title: 'Fully Responsive', description: 'Diamond is crafted to provide optimal viewing and interaction experience for a wide range of devices.', @@ -17,7 +18,8 @@ const apolloFeatures2Data = [ { title: 'Cross Browser Compatible', description: 'First class support for Firefox, Safari, Chrome and Edge.', - src: '/images/templates/apollo/apollo-features2-compatible.png' + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', }, { title: 'Lifetime Support', @@ -27,7 +29,8 @@ const apolloFeatures2Data = [ { title: 'Customizable Design', description: 'Fully customizable with a mixture of Sass and CSS variables.', - src: '/images/templates/apollo/apollo-features2-customizable.png' + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' }, { title: 'Ready to Use Pages', @@ -41,18 +44,18 @@ const apolloFeatures2Data = [ } ]; -const apolloRelatedData = [ +const relatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '' + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' }, { - src: '/images/templates/related-avalon.png', - href: '' + src: '/images/templates/avalon-react.jpg', + href: '/templates/avalon' }, { - src: '/images/templates/related-diamond.png', - href: '' + src: '/images/templates/roma-react.jpg', + href: '/templates/roma' } ]; @@ -66,7 +69,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -79,28 +84,30 @@ const animationFeaturesData1 = [ id: 4, title: 'Figma File', description: - 'Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they are available in PrimeOne for Figma only.', - src: '/images/templates/apollo/features-animation-figma.png' + <> + Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Diamond Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/diamond/features-animation-figma.png' } ]; const animationFeaturesData2 = [ { id: 1, - title: 'Light and Dark Modes', - description: 'The stunning dark and light modes will impress your users.', + title: 'Light / Dark / Dim Modes', + description: 'Diamond has 3 display modes to choose from; Light, Dim and Dark.', src: '/images/templates/diamond/features-animation-darkmode.png' }, { id: 2, title: 'Component Themes', - description: 'Verona offers 20 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.', + description: 'Diamond offers 30 built-in component themes and creating your own theme is a matter of defining couple of sass variables.', src: '/images/templates/diamond/features-animation-component-themes.png' }, { id: 3, title: '7 Menu Orientations', - description: 'Choose from Static and Slim menu orientations.', + description: 'Static, Overlay, Slim, Compact, Horizontal, Reveal and Drawer are the available menu layouts depending on your preference.', src: '/images/templates/diamond/features-animation-orientations.png', type: 'inline-animation', inlineFeaturesData: [ @@ -143,12 +150,39 @@ const animationFeaturesData2 = [ }, { id: 4, - title: 'Layout Themes', - description: 'Verona offers 23 special layout themes featuring gorgeous gradients.', + title: 'Menu Themes', + description: 'Stunning theming options for the main menu in light color scheme.', src: '/images/templates/diamond/features-animation-orientations.png' } ]; +const license = { + documentLink: 'https://diamond.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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + const DiamondSeperator = () => { return ( { const featuresAnimationTitle = (

- Features that the
- Diamond template gives you + Features

); @@ -193,20 +226,24 @@ const DiamondPage = () => {
- + + - + - +
); }; diff --git a/pages/templates/freya/FreyaLogo.js b/pages/templates/freya/FreyaLogo.js index 90fb0a0581..9311a2f845 100644 --- a/pages/templates/freya/FreyaLogo.js +++ b/pages/templates/freya/FreyaLogo.js @@ -1,20 +1,20 @@ // eslint-disable-next-line import/no-anonymous-default-export export default () => ( - + - + - + ); diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js index 36942827e7..634f0add17 100644 --- a/pages/templates/freya/index.js +++ b/pages/templates/freya/index.js @@ -7,8 +7,9 @@ import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAn import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import FreyaLogo from './FreyaLogo'; +import TemplateLicense from '@/components/templates/TemplateLicense'; -const apolloFeatures2Data = [ +const features2Data = [ { title: 'Fully Responsive', description: 'Freya is crafted to provide optimal viewing and interaction experience for a wide range of devices.', @@ -17,7 +18,8 @@ const apolloFeatures2Data = [ { title: 'Cross Browser Compatible', description: 'First class support for Firefox, Safari, Chrome and Edge.', - src: '/images/templates/apollo/apollo-features2-compatible.png' + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', }, { title: 'Lifetime Support', @@ -27,7 +29,8 @@ const apolloFeatures2Data = [ { title: 'Customizable Design', description: 'Fully customizable with a mixture of Sass and CSS variables.', - src: '/images/templates/apollo/apollo-features2-customizable.png' + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' }, { title: 'Ready to Use Pages', @@ -41,18 +44,18 @@ const apolloFeatures2Data = [ } ]; -const apolloRelatedData = [ +const relatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '' + src: '/images/templates/diamond-react.jpg', + href: '/templates/diamond' }, { - src: '/images/templates/related-avalon.png', - href: '' + src: '/images/templates/babylon-react.jpg', + href: '/templates/babylon' }, { - src: '/images/templates/related-diamond.png', - href: '' + src: '/images/templates/ultima-react.jpg', + href: '/templates/ultima' } ]; @@ -66,7 +69,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -79,8 +84,10 @@ const animationFeaturesData1 = [ id: 4, title: 'Figma File', description: - 'Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma file as they are available in PrimeOne for Figma only.', - src: '/images/templates/apollo/features-animation-figma.png' + <> + Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Freya Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/freya/features-animation-figma.png' } ]; @@ -88,13 +95,13 @@ const animationFeaturesData2 = [ { id: 1, title: 'Light and Dark Modes', - description: 'The stunning dark and light modes will impress your users.', + description: 'Impress your users with the Light and Dark modes.', src: '/images/templates/freya/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.', + description: 'Freya offers 16 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.', src: '/images/templates/freya/features-animation-component-themes.png' }, { @@ -143,16 +150,41 @@ const animationFeaturesData2 = [ } ]; +const license = { + documentLink: 'https://freya.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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + const templateHeroData = { pattern: '/images/templates/freya/freya-hero-pattern.png', - rectangle: '/images/templates/freya/freya-hero-rectangle1.png', - light: '/images/templates/freya/freya-hero-light.png', logo: , dashboard1: '/images/templates/freya/freya-hero-dashboard1.png', dashboard2: '/images/templates/freya/freya-hero-dashboard2.png', description: 'Freya is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.', liveHref: 'https://www.primefaces.org/freya-react/', - docHref: 'https://www.primefaces.org/freya-react/documentation/' + docHref: 'https://freya.primereact.org/documentation' }; const FreyaSeparator = () => { @@ -170,8 +202,7 @@ const FreyaSeparator = () => { const FreyaPage = () => { const featuresAnimationTitle = (

- Features that the
- Freya template gives you + Features

); @@ -179,20 +210,24 @@ const FreyaPage = () => {
- + + - + - +
); }; diff --git a/pages/templates/index.js b/pages/templates/index.js index 70e64a0d97..f7514eae5c 100644 --- a/pages/templates/index.js +++ b/pages/templates/index.js @@ -18,7 +18,7 @@ const TemplatesPage = () => { Preview - + Learn More
@@ -33,8 +33,8 @@ const TemplatesPage = () => { Preview - - Download + + Learn More
@@ -48,7 +48,22 @@ const TemplatesPage = () => { Preview - + + Learn More + +
+
+
+
+
+ + Verona + + @@ -63,7 +78,7 @@ const TemplatesPage = () => { Preview - + Learn More
@@ -78,7 +93,7 @@ const TemplatesPage = () => { Preview - + Learn More
@@ -93,7 +108,37 @@ const TemplatesPage = () => { Preview - + + Learn More + +
+
+
+ + @@ -138,12 +183,13 @@ const TemplatesPage = () => { Preview - + Learn More
+ ); diff --git a/pages/templates/poseidon/PoseidonLogo.js b/pages/templates/poseidon/PoseidonLogo.js new file mode 100644 index 0000000000..d8ed385474 --- /dev/null +++ b/pages/templates/poseidon/PoseidonLogo.js @@ -0,0 +1,21 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + + + + + + + + + + + +); diff --git a/pages/templates/poseidon/index.js b/pages/templates/poseidon/index.js new file mode 100644 index 0000000000..668b838a9e --- /dev/null +++ b/pages/templates/poseidon/index.js @@ -0,0 +1,207 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import PoseidonLogo from './PoseidonLogo'; +import TemplateLicense from '@/components/templates/TemplateLicense'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/poseidon/poseidon-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Lifetime Support', + description: 'Atlantis has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/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: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/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: '/images/templates/poseidon/poseidon-features2-ready.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/poseidon/poseidon-features2-mobile.png' + } +]; + +const relatedData = [ + { + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' + }, + { + src: '/images/templates/avalon-react.jpg', + href: '/templates/avalon' + }, + { + src: '/images/templates/roma-react.jpg', + href: '/templates/roma' + } +]; + +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: '/images/templates/babylon/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/babylon/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: '/images/templates/babylon/features-animation-icons.png' + }, +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: 'Light / Dim / Dark Modes', + description: 'Poseidon offers you 3 uniquely designed layout modes to choose from; Light, Dim, and Dark.', + src: '/images/templates/poseidon/features-animation-darkmode.png' + }, + { + id: 2, + title: 'Component Themes', + description: 'Poseidon offers 12 built-in component themes with dark, light and dim options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.', + src: '/images/templates/poseidon/features-animation-component-themes.png' + }, + { + id: 3, + title: '3 Menu Orientations', + description: 'Poseidon has 3 menu layouts to choose from; Static, Overlay and Horizontal', + src: '/images/templates/poseidon/features-animation-orientations.png', + type: 'inline-animation', + inlineFeaturesData: [ + { + id: 1, + title: 'Static', + src: '/images/templates/poseidon/Static.png' + }, + { + id: 2, + title: 'Overlay', + src: '/images/templates/poseidon/Overlay.png' + }, + { + id: 3, + title: 'Horizontal', + src: '/images/templates/poseidon/Horizontal.png' + }, + ] + }, +]; + +const license = { + documentLink: 'https://primefaces.org/freya-react/#/start/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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + +const PoseidonSeparator = () => { + return ( + + + + + + + + + + } + /> + ); +}; + +const templateHeroData = { + logo: , + pattern: '/images/templates/poseidon/poseidon-hero-pattern.png', + dashboard1: '/images/templates/poseidon/poseidon-hero-dashboard1.png', + dashboard2: '/images/templates/poseidon/poseidon-hero-dashboard2.png', + description: 'A modern and easy to use premium application template with various color schemes.Based on flat design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.', + liveHref: 'https://diamond.primereact.org', + docHref: 'https://diamond.primereact.org/documentation' +}; + +const PoseidonPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + + + +
+ ); +}; + +export default PoseidonPage; diff --git a/pages/templates/roma/RomaLogo.js b/pages/templates/roma/RomaLogo.js new file mode 100644 index 0000000000..18d3f2a0ad --- /dev/null +++ b/pages/templates/roma/RomaLogo.js @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + +); diff --git a/pages/templates/roma/RomaSeparator.js b/pages/templates/roma/RomaSeparator.js new file mode 100644 index 0000000000..72deaa7f37 --- /dev/null +++ b/pages/templates/roma/RomaSeparator.js @@ -0,0 +1,21 @@ +import TemplateSeparator from '@/components/templates/TemplateSeparator' +import React from 'react' + +const RomaSeparator = () => { + return ( + + + + + + + } + /> + ) +} + +export default RomaSeparator + + diff --git a/pages/templates/roma/index.js b/pages/templates/roma/index.js new file mode 100644 index 0000000000..b447463a7d --- /dev/null +++ b/pages/templates/roma/index.js @@ -0,0 +1,194 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import RomaLogo from './RomaLogo'; +import RomaSeparator from './RomaSeparator'; +import TemplateLicense from '@/components/templates/TemplateLicense'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Roma is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/roma/roma-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Lifetime Support', + description: 'Roma has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.', + src: '/images/templates/apollo/apollo-features2-lifetime.png' + }, + { + title: 'Customizable Design', + description: 'Fully customizable with a mixture of Sass and CSS variables.', + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' + }, + { + title: 'Ready to Use Applications', + description: 'Landing, login and error pages are provided as template pages to get started with building your app in no time.', + src: '/images/templates/roma/roma-features2-ready.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/roma/roma-features2-mobile.png' + } +]; + +const apolloRelatedData = [ + { + src: '/images/templates/avalon-react.jpg', + href: '/templates/avalon' + }, + { + src: '/images/templates/babylon-react.jpg', + href: '/templates/babylon' + }, + { + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' + } +]; + +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: '/images/templates/babylon/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/babylon/features-animation-blocks.png' + }, + { + id: 3, + title: 'PrimeIcons', + description: 'Roma ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.', + src: '/images/templates/babylon/features-animation-icons.png' + }, +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: 'Light and Dark Menus', + description: 'Roma offers you 2 menu modes to choose from; Light and Dark.', + src: '/images/templates/roma/features-animation-darkmode.png' + }, + { + id: 2, + title: '15 Beautiful Themes', + description: 'Roma offers 15 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.', + src: '/images/templates/roma/features-animation-component-themes.png' + }, + { + id: 3, + title: '4 Menu Orientations', + description: 'Roma has 4 menu layouts to choose from; Static, Overlay, Horizontal and Slim with Light and Dark options.', + src: '/images/templates/diamond/features-animation-orientations.png', + type: 'inline-animation', + inlineFeaturesData: [ + { + id: 1, + title: 'Static', + src: '/images/templates/roma/Static.png' + }, + { + id: 2, + title: 'Overlay', + src: '/images/templates/roma/Overlay.png' + }, + { + id: 3, + title: 'Horizontal', + src: '/images/templates/roma/Horizontal.png' + }, + { + id: 4, + title: 'Slim', + src: '/images/templates/roma/Slim.png' + }, + ] + }, +]; + +const license = { + documentLink: 'https://www.primefaces.org/roma-react/#/documentation', + description:'Download package is an create-react-app project that contains all the resources including css, scss, images, fonts, login, promotion, error pages and sample demos.', + licenseDetails: [ + { + title: 'Basic License', + price: '$19', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$190', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + +const templateHeroData = { + logo: , + pattern: '/images/templates/roma/roma-hero-pattern.png', + dashboard1: '/images/templates/roma/roma-hero-dashboard1.png', + dashboard2: '/images/templates/roma/roma-hero-dashboard2.png', + description: 'A minimalist premium application template with a clean and simple design. Fully customizable with SASS variables and optimized for all devices with responsive design.', + liveHref: 'https://www.primefaces.org/roma-react/', + docHref: 'https://www.primefaces.org/roma-react/#/documentation' +}; + +const AvalonPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + + + +
+ ); +}; + +export default AvalonPage; diff --git a/pages/templates/sakai/SakaiLogo.js b/pages/templates/sakai/SakaiLogo.js new file mode 100644 index 0000000000..d8b2302f6b --- /dev/null +++ b/pages/templates/sakai/SakaiLogo.js @@ -0,0 +1,20 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + + + + + + + + + + +); diff --git a/pages/templates/sakai/index.js b/pages/templates/sakai/index.js new file mode 100644 index 0000000000..f0679e72ee --- /dev/null +++ b/pages/templates/sakai/index.js @@ -0,0 +1,158 @@ +import React from 'react'; +import TemplateFeatures from '@/components/templates/TemplateFeatures'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; +import TemplateHero from '@/components/templates/templateHero/TemplateHero'; +import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation'; +import SakaiLogo from './SakaiLogo'; + +const features2Data = [ + { + title: 'Fully Responsive', + description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.', + src: '/images/templates/sakai/sakai-features2-responsive.png' + }, + { + title: 'Cross Browser Compatible', + description: 'First class support for Firefox, Safari, Chrome and Edge.', + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', + }, + { + title: 'Full SaSS Support', + description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.', + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' + }, + { + title: 'Mobile Experience', + description: 'Touch optimized enhanced mobile experience with responsive design.', + src: '/images/templates/sakai/sakai-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: '/images/templates/babylon/features-animation-utilities.png' + }, + { + id: 2, + title: 'PrimeBlocks', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , + src: '/images/templates/babylon/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: '/images/templates/babylon/features-animation-icons.png' + }, +]; + +const animationFeaturesData2 = [ + { + id: 1, + title: 'Various Free Themes', + description: 'Sakai has various free themes to choose from; PrimeOne Design, Bootstrap, Material Design with light and dark options.', + src: '/images/templates/sakai/features-animation-darkmode.png' + }, + { + id: 2, + title: '2 Menu Orientations', + description: 'Sakai has 2 menu modes; Static and Overlay', + src: '/images/templates/atlantis/features-animation-orientations.png', + type: 'inline-animation', + inlineFeaturesData: [ + { + id: 1, + title: 'Static', + src: '/images/templates/sakai/Static.png' + }, + { + id: 2, + title: 'Overlay', + src: '/images/templates/sakai/Overlay.png' + }, + ] + }, +]; + +const features1Data = [ + { + src: '/images/templates/sakai/sakai-github.png', + title: 'Open Source and Free to Use', + description: 'Explore Sakai, our versatile, open-source React application template. It\'s free for your every innovation.' + }, + { + src: '/images/templates/sakai/sakai-ready.png', + title: 'Ready to Use Pages', + description: 'Landing, login and error pages are provided as template pages to get started with building your app in no time.' + }, +]; + +const templateHeroData = { + logo: , + pattern: '/images/templates/sakai/sakai-hero-pattern.png', + dashboard1: '/images/templates/sakai/sakai-hero-dashboard1.png', + dashboard2: '/images/templates/sakai/sakai-hero-dashboard2.png', + description: 'Sakai is a free application template for React based on the popular Next.js framework with new App Router.', + liveHref: 'https://sakai.primereact.org/', + docHref: 'https://sakai.primereact.org/documentation', + free: true, + storeHref: 'https://github.com/primefaces/sakai-react', + supportHref: 'https://github.com/primefaces/sakai-react/issues' +}; + +const SakaiSeparator = () => { + return ( + + + + + + + + + + + + } + /> + ); +}; + +const BabylonPage = () => { + const featuresAnimationTitle = ( +

+ Features +

+ ); + + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default BabylonPage; diff --git a/pages/templates/ultima/UltimaLogo.js b/pages/templates/ultima/UltimaLogo.js index 5d1140e1f2..2930c7fbdb 100644 --- a/pages/templates/ultima/UltimaLogo.js +++ b/pages/templates/ultima/UltimaLogo.js @@ -1,26 +1,26 @@ // eslint-disable-next-line import/no-anonymous-default-export export default () => ( - + - - - - - + + + + + - + diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js index 3616e33c83..4c74684861 100644 --- a/pages/templates/ultima/index.js +++ b/pages/templates/ultima/index.js @@ -7,8 +7,9 @@ import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAn import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import UltimaLogo from './UltimaLogo'; +import TemplateLicense from '@/components/templates/TemplateLicense'; -const apolloFeatures2Data = [ +const features2Data = [ { title: 'Fully Responsive', description: 'Ultima is crafted to provide optimal viewing and interaction experience for a wide range of devices.', @@ -17,7 +18,8 @@ const apolloFeatures2Data = [ { title: 'Cross Browser Compatible', description: 'First class support for Firefox, Safari, Chrome and Edge.', - src: '/images/templates/apollo/apollo-features2-compatible.png' + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', }, { title: 'Lifetime Support', @@ -27,11 +29,12 @@ const apolloFeatures2Data = [ { title: 'Customizable Design', description: 'Fully customizable with a mixture of Sass and CSS variables.', - src: '/images/templates/apollo/apollo-features2-customizable.png' + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/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.', + description: 'Everything is ready for you to start and build your app in no time. Landing, login, invoice, help, and error pages are provided as template pages.', src: '/images/templates/ultima/ultima-features2-ready.png' }, { @@ -41,18 +44,18 @@ const apolloFeatures2Data = [ } ]; -const apolloRelatedData = [ +const relatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '' + src: '/images/templates/diamond-react.jpg', + href: '/templates/diamond' }, { - src: '/images/templates/related-avalon.png', - href: '' + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' }, { - src: '/images/templates/related-diamond.png', - href: '' + src: '/images/templates/babylon-react.jpg', + href: '/templates/babylon' } ]; @@ -66,7 +69,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -79,8 +84,10 @@ const animationFeaturesData1 = [ id: 4, title: 'Figma File', description: - 'Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Ultima Figma file as they are available in PrimeOne for Figma only.', - src: '/images/templates/apollo/features-animation-figma.png' + <> + Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Ultima Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/ultima/features-animation-figma.png' } ]; @@ -88,13 +95,13 @@ const animationFeaturesData2 = [ { id: 1, title: 'Light and Dark Modes', - description: 'The stunning dark and light modes will impress your users.', + description: 'Ultima offers you 2 uniquely designed layout modes to choose from; Light and Dark.', src: '/images/templates/ultima/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.', + description: 'Ultima offers 17 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.', src: '/images/templates/ultima/features-animation-component-themes.png' }, { @@ -143,6 +150,33 @@ const animationFeaturesData2 = [ } ]; +const license = { + documentLink: 'https://ultima.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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$59', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$590', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + const UltimaSeperator = () => { return ( { const UltimaPage = () => { const featuresAnimationTitle = (

- Features that the
- Ultima template gives you + Features

); @@ -172,28 +205,32 @@ const UltimaPage = () => {
} + description={'A highly customizable premium application template featuring 4 menu modes, 13 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.'} dashboard1={'/images/templates/ultima/ultima-hero-dashboard1.png'} dashboard2={'/images/templates/ultima/ultima-hero-dashboard2.png'} liveHref={'https://ultima.primereact.org'} + docHref={'https://ultima.primereact.org/documentation'} /> - + + - + - +
); }; diff --git a/pages/templates/verona/VeronaLogo.js b/pages/templates/verona/VeronaLogo.js index 1856469c3b..b0d49535f7 100644 --- a/pages/templates/verona/VeronaLogo.js +++ b/pages/templates/verona/VeronaLogo.js @@ -1,32 +1,32 @@ // eslint-disable-next-line import/no-anonymous-default-export export default () => ( - - - - - - - - - - - - + + + + + + + + + + + + - + diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js index 85a31ab5c7..1ed37e29f4 100644 --- a/pages/templates/verona/index.js +++ b/pages/templates/verona/index.js @@ -7,8 +7,9 @@ import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAn import TemplateSeparator from '@/components/templates/TemplateSeparator'; import TemplateHero from '@/components/templates/templateHero/TemplateHero'; import VeronaLogo from './VeronaLogo'; +import TemplateLicense from '@/components/templates/TemplateLicense'; -const apolloFeatures2Data = [ +const features2Data = [ { title: 'Fully Responsive', description: 'Verona is crafted to provide optimal viewing and interaction experience for a wide range of devices.', @@ -17,7 +18,8 @@ const apolloFeatures2Data = [ { title: 'Cross Browser Compatible', description: 'First class support for Firefox, Safari, Chrome and Edge.', - src: '/images/templates/apollo/apollo-features2-compatible.png' + src: '/images/templates/apollo/apollo-features2-compatible.png', + darkSrc: '/images/templates/apollo/apollo-features2-compatible-dark.png', }, { title: 'Lifetime Support', @@ -27,7 +29,8 @@ const apolloFeatures2Data = [ { title: 'Customizable Design', description: 'Fully customizable with a mixture of Sass and CSS variables.', - src: '/images/templates/apollo/apollo-features2-customizable.png' + src: '/images/templates/apollo/apollo-features2-customizable.png', + darkSrc: '/images/templates/apollo/apollo-features2-customizable-dark.png' }, { title: 'Ready to Use Pages', @@ -41,18 +44,18 @@ const apolloFeatures2Data = [ } ]; -const apolloRelatedData = [ +const relatedData = [ { - src: '/images/templates/related-atlantis.png', - href: '' + src: '/images/templates/freya-react.jpg', + href: '/templates/freya' }, { - src: '/images/templates/related-avalon.png', - href: '' + src: '/images/templates/apollo-react.jpg', + href: '/templates/apollo' }, { - src: '/images/templates/related-diamond.png', - href: '' + src: '/images/templates/atlantis-react.jpg', + href: '/templates/atlantis' } ]; @@ -66,7 +69,9 @@ const animationFeaturesData1 = [ { id: 2, title: 'PrimeBlocks', - description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.', + description: <> + Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase. + , src: '/images/templates/apollo/features-animation-blocks.png' }, { @@ -79,8 +84,10 @@ const animationFeaturesData1 = [ id: 4, title: 'Figma File', description: - 'Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they are available in PrimeOne for Figma only.', - src: '/images/templates/apollo/features-animation-figma.png' + <> + Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can preview the Figma file before the purchase. Note that PrimeReact UI components are excluded from the Verona Figma file as they are available in PrimeOne for Figma only. + , + src: '/images/templates/verona/features-animation-figma.png' } ]; @@ -94,13 +101,13 @@ const animationFeaturesData2 = [ { id: 2, title: 'Component Themes', - description: 'Verona offers 20 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.', + description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.', src: '/images/templates/verona/features-animation-component-themes.png' }, { id: 3, - title: '7 Menu Orientations', - description: 'Choose from Static and Slim menu orientations.', + title: '4 Menu Orientations', + description: 'Choose from Static, Overlay, Slim and Slim+ menu orientations.', src: '/images/templates/verona/features-animation-orientations.png', type: 'inline-animation', inlineFeaturesData: [ @@ -128,8 +135,8 @@ const animationFeaturesData2 = [ }, { id: 4, - title: 'Layout Themes', - description: 'Verona offers 23 special layout themes featuring gorgeous gradients.', + title: 'Menu Themes', + description: 'Verona offers 10 special layout themes featuring gorgeous gradients.', src: '/images/templates/verona/features-animation-orientations.png' } ]; @@ -172,11 +179,37 @@ const VeronaSeperator = () => { ); }; +const license = { + documentLink: 'https://verona.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.', + licenseDetails: [ + { + title: 'Basic License', + price: '$49', + included: [ + 'Non Commercial Usage', + 'Single End Product, No Multi-Use', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + { + title: 'Extended License', + price: '$490', + included: [ + 'Commercial Usage', + 'Multiple End Products', + 'Lifetime Support', + 'Unlimited Updates', + ], + }, + ] +} + const VeronaPage = () => { const featuresAnimationTitle = (

- Features that the
- Verona template gives you + Features

); @@ -184,28 +217,32 @@ const VeronaPage = () => {
} dashboard1={'/images/templates/verona/verona-hero-dashboard1.png'} dashboard2={'/images/templates/verona/verona-hero-dashboard2.png'} - liveHref={''} + liveHref={'https://verona.primereact.org/'} + docHref={'https://verona.primereact.org/documentation'} /> - + + - + - +
); }; diff --git a/public/images/templates/apollo-react.jpg b/public/images/templates/apollo-react.jpg new file mode 100644 index 0000000000..b126f422f1 Binary files /dev/null and b/public/images/templates/apollo-react.jpg differ diff --git a/public/images/templates/apollo/Drawer.png b/public/images/templates/apollo/Drawer.png index 29521e44d6..38917f0798 100644 Binary files a/public/images/templates/apollo/Drawer.png and b/public/images/templates/apollo/Drawer.png differ diff --git a/public/images/templates/apollo/Horizontal.png b/public/images/templates/apollo/Horizontal.png index 4f835d52c9..b9c90c3656 100644 Binary files a/public/images/templates/apollo/Horizontal.png and b/public/images/templates/apollo/Horizontal.png differ diff --git a/public/images/templates/apollo/Overlay.png b/public/images/templates/apollo/Overlay.png index 52f2633f7b..1584fb9e03 100644 Binary files a/public/images/templates/apollo/Overlay.png and b/public/images/templates/apollo/Overlay.png differ diff --git a/public/images/templates/apollo/Reveal.png b/public/images/templates/apollo/Reveal.png index fa797a6d78..6d79c055eb 100644 Binary files a/public/images/templates/apollo/Reveal.png and b/public/images/templates/apollo/Reveal.png differ diff --git a/public/images/templates/apollo/Slim+.png b/public/images/templates/apollo/Slim+.png index 359181da80..44ce077e13 100644 Binary files a/public/images/templates/apollo/Slim+.png and b/public/images/templates/apollo/Slim+.png differ diff --git a/public/images/templates/apollo/Slim.png b/public/images/templates/apollo/Slim.png index a808a24838..75b45635e3 100644 Binary files a/public/images/templates/apollo/Slim.png and b/public/images/templates/apollo/Slim.png differ diff --git a/public/images/templates/apollo/Vector1.png b/public/images/templates/apollo/Vector1.png deleted file mode 100644 index 85e370df6a..0000000000 Binary files a/public/images/templates/apollo/Vector1.png and /dev/null differ diff --git a/public/images/templates/apollo/Vector2.png b/public/images/templates/apollo/Vector2.png deleted file mode 100644 index 78f4f2fc68..0000000000 Binary files a/public/images/templates/apollo/Vector2.png and /dev/null differ diff --git a/public/images/templates/apollo/Vector3.png b/public/images/templates/apollo/Vector3.png deleted file mode 100644 index ae76c14ca1..0000000000 Binary files a/public/images/templates/apollo/Vector3.png and /dev/null differ diff --git a/public/images/templates/apollo/Vector4.png b/public/images/templates/apollo/Vector4.png deleted file mode 100644 index 6cbf25acd7..0000000000 Binary files a/public/images/templates/apollo/Vector4.png and /dev/null differ diff --git a/public/images/templates/apollo/apollo-features1-feature1.png b/public/images/templates/apollo/apollo-features1-feature1.png index 60e51ef52e..f587cba47c 100644 Binary files a/public/images/templates/apollo/apollo-features1-feature1.png and b/public/images/templates/apollo/apollo-features1-feature1.png differ diff --git a/public/images/templates/apollo/apollo-features1-feature2.png b/public/images/templates/apollo/apollo-features1-feature2.png index fc319d3229..a3f2db27e0 100644 Binary files a/public/images/templates/apollo/apollo-features1-feature2.png and b/public/images/templates/apollo/apollo-features1-feature2.png differ diff --git a/public/images/templates/apollo/apollo-features1-feature3.png b/public/images/templates/apollo/apollo-features1-feature3.png index 108df0a6bf..8a9718d43a 100644 Binary files a/public/images/templates/apollo/apollo-features1-feature3.png and b/public/images/templates/apollo/apollo-features1-feature3.png differ diff --git a/public/images/templates/apollo/apollo-features2-compatible-dark.png b/public/images/templates/apollo/apollo-features2-compatible-dark.png new file mode 100644 index 0000000000..f314bd979d Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-compatible-dark.png differ diff --git a/public/images/templates/apollo/apollo-features2-compatible.png b/public/images/templates/apollo/apollo-features2-compatible.png new file mode 100644 index 0000000000..d5970d956a Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-compatible.png differ diff --git a/public/images/templates/apollo/apollo-features2-compatible.svg b/public/images/templates/apollo/apollo-features2-compatible.svg deleted file mode 100644 index 41fdf339bc..0000000000 --- a/public/images/templates/apollo/apollo-features2-compatible.svg +++ /dev/null @@ -1,358 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/apollo/apollo-features2-customizable-dark.png b/public/images/templates/apollo/apollo-features2-customizable-dark.png new file mode 100644 index 0000000000..290fc39e19 Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-customizable-dark.png differ diff --git a/public/images/templates/apollo/apollo-features2-customizable-dark.svg b/public/images/templates/apollo/apollo-features2-customizable-dark.svg deleted file mode 100644 index a8fada8d7b..0000000000 --- a/public/images/templates/apollo/apollo-features2-customizable-dark.svg +++ /dev/null @@ -1,237 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/apollo/apollo-features2-customizable.png b/public/images/templates/apollo/apollo-features2-customizable.png new file mode 100644 index 0000000000..41bcdacddc Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-customizable.png differ diff --git a/public/images/templates/apollo/apollo-features2-customizable.svg b/public/images/templates/apollo/apollo-features2-customizable.svg deleted file mode 100644 index 726a290a27..0000000000 --- a/public/images/templates/apollo/apollo-features2-customizable.svg +++ /dev/null @@ -1,318 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/apollo/apollo-features2-lifetime.png b/public/images/templates/apollo/apollo-features2-lifetime.png index 8e68e8a108..bb3ea0c7d0 100644 Binary files a/public/images/templates/apollo/apollo-features2-lifetime.png and b/public/images/templates/apollo/apollo-features2-lifetime.png differ diff --git a/public/images/templates/apollo/apollo-features2-mobile.png b/public/images/templates/apollo/apollo-features2-mobile.png index 65f5327059..354b8ce81c 100644 Binary files a/public/images/templates/apollo/apollo-features2-mobile.png and b/public/images/templates/apollo/apollo-features2-mobile.png differ diff --git a/public/images/templates/apollo/apollo-features2-quality-dark.png b/public/images/templates/apollo/apollo-features2-quality-dark.png new file mode 100644 index 0000000000..4b8e13be63 Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-quality-dark.png differ diff --git a/public/images/templates/apollo/apollo-features2-quality-dark.svg b/public/images/templates/apollo/apollo-features2-quality-dark.svg deleted file mode 100644 index 87ce3d6763..0000000000 --- a/public/images/templates/apollo/apollo-features2-quality-dark.svg +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/apollo/apollo-features2-quality.png b/public/images/templates/apollo/apollo-features2-quality.png new file mode 100644 index 0000000000..4adf9dc377 Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-quality.png differ diff --git a/public/images/templates/apollo/apollo-features2-quality.svg b/public/images/templates/apollo/apollo-features2-quality.svg deleted file mode 100644 index f1803a9d20..0000000000 --- a/public/images/templates/apollo/apollo-features2-quality.svg +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/apollo/apollo-features2-responsive.png b/public/images/templates/apollo/apollo-features2-responsive.png index 5b0e549820..94d32165e3 100644 Binary files a/public/images/templates/apollo/apollo-features2-responsive.png and b/public/images/templates/apollo/apollo-features2-responsive.png differ diff --git a/public/images/templates/apollo/apollo-hero-dashboard1.png b/public/images/templates/apollo/apollo-hero-dashboard1.png index 5bd021c2c7..d1e0922b01 100644 Binary files a/public/images/templates/apollo/apollo-hero-dashboard1.png and b/public/images/templates/apollo/apollo-hero-dashboard1.png differ diff --git a/public/images/templates/apollo/apollo-hero-dashboard2.png b/public/images/templates/apollo/apollo-hero-dashboard2.png index 5e3b66f255..6c1b0d1028 100644 Binary files a/public/images/templates/apollo/apollo-hero-dashboard2.png and b/public/images/templates/apollo/apollo-hero-dashboard2.png differ diff --git a/public/images/templates/apollo/apollo-hero-light.png b/public/images/templates/apollo/apollo-hero-light.png deleted file mode 100644 index f548ab5469..0000000000 Binary files a/public/images/templates/apollo/apollo-hero-light.png and /dev/null differ diff --git a/public/images/templates/apollo/apollo-hero-rectangle1-mobile.png b/public/images/templates/apollo/apollo-hero-rectangle1-mobile.png deleted file mode 100644 index bd34261531..0000000000 Binary files a/public/images/templates/apollo/apollo-hero-rectangle1-mobile.png and /dev/null differ diff --git a/public/images/templates/apollo/apollo-hero-rectangle1.png b/public/images/templates/apollo/apollo-hero-rectangle1.png deleted file mode 100644 index b0a109f415..0000000000 Binary files a/public/images/templates/apollo/apollo-hero-rectangle1.png and /dev/null differ diff --git a/public/images/templates/apollo/apollo-hero-rectangle2.png b/public/images/templates/apollo/apollo-hero-rectangle2.png deleted file mode 100644 index 6e0c0d5461..0000000000 Binary files a/public/images/templates/apollo/apollo-hero-rectangle2.png and /dev/null differ diff --git a/public/images/templates/apollo/features-animation-blocks.png b/public/images/templates/apollo/features-animation-blocks.png index d9d43268f1..b955742e5c 100644 Binary files a/public/images/templates/apollo/features-animation-blocks.png and b/public/images/templates/apollo/features-animation-blocks.png differ diff --git a/public/images/templates/apollo/features-animation-component-themes.png b/public/images/templates/apollo/features-animation-component-themes.png index 87049001d7..ae12509a4a 100644 Binary files a/public/images/templates/apollo/features-animation-component-themes.png and b/public/images/templates/apollo/features-animation-component-themes.png differ diff --git a/public/images/templates/apollo/features-animation-darkmode.png b/public/images/templates/apollo/features-animation-darkmode.png index 5ba6974cf3..fe01b929a9 100644 Binary files a/public/images/templates/apollo/features-animation-darkmode.png and b/public/images/templates/apollo/features-animation-darkmode.png differ diff --git a/public/images/templates/apollo/features-animation-figma.png b/public/images/templates/apollo/features-animation-figma.png index 8a1006a459..c56f1ba9d4 100644 Binary files a/public/images/templates/apollo/features-animation-figma.png and b/public/images/templates/apollo/features-animation-figma.png differ diff --git a/public/images/templates/apollo/features-animation-icons.png b/public/images/templates/apollo/features-animation-icons.png index c3e667053d..9c248d0562 100644 Binary files a/public/images/templates/apollo/features-animation-icons.png and b/public/images/templates/apollo/features-animation-icons.png differ diff --git a/public/images/templates/apollo/features-animation-menu-themes.png b/public/images/templates/apollo/features-animation-menu-themes.png index f8bcd6a84e..8dc7ac1deb 100644 Binary files a/public/images/templates/apollo/features-animation-menu-themes.png and b/public/images/templates/apollo/features-animation-menu-themes.png differ diff --git a/public/images/templates/apollo/features-animation-utilities.png b/public/images/templates/apollo/features-animation-utilities.png index 62c75bc844..44b40a79ba 100644 Binary files a/public/images/templates/apollo/features-animation-utilities.png and b/public/images/templates/apollo/features-animation-utilities.png differ diff --git a/public/images/templates/atlantis-react.jpg b/public/images/templates/atlantis-react.jpg new file mode 100644 index 0000000000..28f7264a40 Binary files /dev/null and b/public/images/templates/atlantis-react.jpg differ diff --git a/public/images/templates/atlantis/Drawer.png b/public/images/templates/atlantis/Drawer.png index 58b383d62f..47d761756c 100644 Binary files a/public/images/templates/atlantis/Drawer.png and b/public/images/templates/atlantis/Drawer.png differ diff --git a/public/images/templates/atlantis/Horizontal.png b/public/images/templates/atlantis/Horizontal.png index 26607b4a04..535573a931 100644 Binary files a/public/images/templates/atlantis/Horizontal.png and b/public/images/templates/atlantis/Horizontal.png differ diff --git a/public/images/templates/atlantis/Overlay.png b/public/images/templates/atlantis/Overlay.png index ca69186d96..d26814080d 100644 Binary files a/public/images/templates/atlantis/Overlay.png and b/public/images/templates/atlantis/Overlay.png differ diff --git a/public/images/templates/atlantis/Reveal.png b/public/images/templates/atlantis/Reveal.png index 5ff7e51599..06b18c23e6 100644 Binary files a/public/images/templates/atlantis/Reveal.png and b/public/images/templates/atlantis/Reveal.png differ diff --git a/public/images/templates/atlantis/Slim+.png b/public/images/templates/atlantis/Slim+.png index eac70faa2b..25bac60ffc 100644 Binary files a/public/images/templates/atlantis/Slim+.png and b/public/images/templates/atlantis/Slim+.png differ diff --git a/public/images/templates/atlantis/Slim.png b/public/images/templates/atlantis/Slim.png index 21af81aae9..26f7a7acf7 100644 Binary files a/public/images/templates/atlantis/Slim.png and b/public/images/templates/atlantis/Slim.png differ diff --git a/public/images/templates/atlantis/Static.png b/public/images/templates/atlantis/Static.png index 81bb943876..a7dfd6d485 100644 Binary files a/public/images/templates/atlantis/Static.png and b/public/images/templates/atlantis/Static.png differ diff --git a/public/images/templates/atlantis/atlantis-features2-mobile.png b/public/images/templates/atlantis/atlantis-features2-mobile.png index ea50c70ee9..76977183d5 100644 Binary files a/public/images/templates/atlantis/atlantis-features2-mobile.png and b/public/images/templates/atlantis/atlantis-features2-mobile.png differ diff --git a/public/images/templates/atlantis/atlantis-features2-ready.png b/public/images/templates/atlantis/atlantis-features2-ready.png index 580af17b04..593b52e713 100644 Binary files a/public/images/templates/atlantis/atlantis-features2-ready.png and b/public/images/templates/atlantis/atlantis-features2-ready.png differ diff --git a/public/images/templates/atlantis/atlantis-features2-responsive.png b/public/images/templates/atlantis/atlantis-features2-responsive.png index 3a0a23db4c..faaa170e15 100644 Binary files a/public/images/templates/atlantis/atlantis-features2-responsive.png and b/public/images/templates/atlantis/atlantis-features2-responsive.png differ diff --git a/public/images/templates/atlantis/atlantis-hero-dashboard1.png b/public/images/templates/atlantis/atlantis-hero-dashboard1.png index 43508d3566..fe1158a2af 100644 Binary files a/public/images/templates/atlantis/atlantis-hero-dashboard1.png and b/public/images/templates/atlantis/atlantis-hero-dashboard1.png differ diff --git a/public/images/templates/atlantis/atlantis-hero-dashboard2.png b/public/images/templates/atlantis/atlantis-hero-dashboard2.png index bf9a259113..f6f3bc3446 100644 Binary files a/public/images/templates/atlantis/atlantis-hero-dashboard2.png and b/public/images/templates/atlantis/atlantis-hero-dashboard2.png differ diff --git a/public/images/templates/atlantis/atlantis-hero-light.png b/public/images/templates/atlantis/atlantis-hero-light.png deleted file mode 100644 index 2b7555bc00..0000000000 Binary files a/public/images/templates/atlantis/atlantis-hero-light.png and /dev/null differ diff --git a/public/images/templates/atlantis/atlantis-hero-pattern.png b/public/images/templates/atlantis/atlantis-hero-pattern.png index b7aff91bdd..d525c82f5e 100644 Binary files a/public/images/templates/atlantis/atlantis-hero-pattern.png and b/public/images/templates/atlantis/atlantis-hero-pattern.png differ diff --git a/public/images/templates/atlantis/atlantis-hero-rectangle1.png b/public/images/templates/atlantis/atlantis-hero-rectangle1.png deleted file mode 100644 index 9076208971..0000000000 Binary files a/public/images/templates/atlantis/atlantis-hero-rectangle1.png and /dev/null differ diff --git a/public/images/templates/atlantis/features-animation-component-themes.png b/public/images/templates/atlantis/features-animation-component-themes.png index 95da241a71..195c0565f7 100644 Binary files a/public/images/templates/atlantis/features-animation-component-themes.png and b/public/images/templates/atlantis/features-animation-component-themes.png differ diff --git a/public/images/templates/atlantis/features-animation-darkmode.png b/public/images/templates/atlantis/features-animation-darkmode.png index 1aaec42e0f..a750d7fb9e 100644 Binary files a/public/images/templates/atlantis/features-animation-darkmode.png and b/public/images/templates/atlantis/features-animation-darkmode.png differ diff --git a/public/images/templates/atlantis/features-animation-figma.png b/public/images/templates/atlantis/features-animation-figma.png new file mode 100644 index 0000000000..db476b62b7 Binary files /dev/null and b/public/images/templates/atlantis/features-animation-figma.png differ diff --git a/public/images/templates/avalon-react.jpg b/public/images/templates/avalon-react.jpg new file mode 100644 index 0000000000..8dfaaa2d25 Binary files /dev/null and b/public/images/templates/avalon-react.jpg differ diff --git a/public/images/templates/avalon/Drawer.png b/public/images/templates/avalon/Drawer.png new file mode 100644 index 0000000000..3e9728ffab Binary files /dev/null and b/public/images/templates/avalon/Drawer.png differ diff --git a/public/images/templates/avalon/Horizontal.png b/public/images/templates/avalon/Horizontal.png new file mode 100644 index 0000000000..8844b0e738 Binary files /dev/null and b/public/images/templates/avalon/Horizontal.png differ diff --git a/public/images/templates/avalon/Overlay.png b/public/images/templates/avalon/Overlay.png new file mode 100644 index 0000000000..3e99da9915 Binary files /dev/null and b/public/images/templates/avalon/Overlay.png differ diff --git a/public/images/templates/avalon/Reveal.png b/public/images/templates/avalon/Reveal.png new file mode 100644 index 0000000000..a80d05d254 Binary files /dev/null and b/public/images/templates/avalon/Reveal.png differ diff --git a/public/images/templates/avalon/Slim+.png b/public/images/templates/avalon/Slim+.png new file mode 100644 index 0000000000..b3aea995bf Binary files /dev/null and b/public/images/templates/avalon/Slim+.png differ diff --git a/public/images/templates/avalon/Slim.png b/public/images/templates/avalon/Slim.png new file mode 100644 index 0000000000..ab7843720c Binary files /dev/null and b/public/images/templates/avalon/Slim.png differ diff --git a/public/images/templates/avalon/Static.png b/public/images/templates/avalon/Static.png new file mode 100644 index 0000000000..11e024fcb9 Binary files /dev/null and b/public/images/templates/avalon/Static.png differ diff --git a/public/images/templates/avalon/avalon-features1-feature1.png b/public/images/templates/avalon/avalon-features1-feature1.png new file mode 100644 index 0000000000..b3dd86f734 Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature1.png differ diff --git a/public/images/templates/avalon/avalon-features1-feature2.png b/public/images/templates/avalon/avalon-features1-feature2.png new file mode 100644 index 0000000000..f63e6927a1 Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature2.png differ diff --git a/public/images/templates/avalon/avalon-features1-feature3.png b/public/images/templates/avalon/avalon-features1-feature3.png new file mode 100644 index 0000000000..bc8989ce55 Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature3.png differ diff --git a/public/images/templates/avalon/avalon-features2-mobile.png b/public/images/templates/avalon/avalon-features2-mobile.png new file mode 100644 index 0000000000..f8e1e60f66 Binary files /dev/null and b/public/images/templates/avalon/avalon-features2-mobile.png differ diff --git a/public/images/templates/avalon/avalon-features2-responsive.png b/public/images/templates/avalon/avalon-features2-responsive.png new file mode 100644 index 0000000000..101173e60f Binary files /dev/null and b/public/images/templates/avalon/avalon-features2-responsive.png differ diff --git a/public/images/templates/avalon/avalon-hero-dashboard1.png b/public/images/templates/avalon/avalon-hero-dashboard1.png new file mode 100644 index 0000000000..da3610612c Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-dashboard1.png differ diff --git a/public/images/templates/avalon/avalon-hero-dashboard2.png b/public/images/templates/avalon/avalon-hero-dashboard2.png new file mode 100644 index 0000000000..ed91cbfdb6 Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-dashboard2.png differ diff --git a/public/images/templates/avalon/avalon-hero-pattern.png b/public/images/templates/avalon/avalon-hero-pattern.png new file mode 100644 index 0000000000..91cce8cdb1 Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-pattern.png differ diff --git a/public/images/templates/avalon/features-animation-component-themes.png b/public/images/templates/avalon/features-animation-component-themes.png new file mode 100644 index 0000000000..01d2c032f4 Binary files /dev/null and b/public/images/templates/avalon/features-animation-component-themes.png differ diff --git a/public/images/templates/avalon/features-animation-darkmode.png b/public/images/templates/avalon/features-animation-darkmode.png new file mode 100644 index 0000000000..035b688132 Binary files /dev/null and b/public/images/templates/avalon/features-animation-darkmode.png differ diff --git a/public/images/templates/avalon/features-animation-figma.png b/public/images/templates/avalon/features-animation-figma.png new file mode 100644 index 0000000000..30ac3af96c Binary files /dev/null and b/public/images/templates/avalon/features-animation-figma.png differ diff --git a/public/images/templates/avalon/features-animation-menu-themes.png b/public/images/templates/avalon/features-animation-menu-themes.png new file mode 100644 index 0000000000..f912f7a71a Binary files /dev/null and b/public/images/templates/avalon/features-animation-menu-themes.png differ diff --git a/public/images/templates/babylon-react.jpg b/public/images/templates/babylon-react.jpg new file mode 100644 index 0000000000..cd0402d322 Binary files /dev/null and b/public/images/templates/babylon-react.jpg differ diff --git a/public/images/templates/babylon/Horizontal.png b/public/images/templates/babylon/Horizontal.png new file mode 100644 index 0000000000..3666c643e9 Binary files /dev/null and b/public/images/templates/babylon/Horizontal.png differ diff --git a/public/images/templates/babylon/Overlay.png b/public/images/templates/babylon/Overlay.png new file mode 100644 index 0000000000..0ef12b2aa4 Binary files /dev/null and b/public/images/templates/babylon/Overlay.png differ diff --git a/public/images/templates/babylon/Slim.png b/public/images/templates/babylon/Slim.png new file mode 100644 index 0000000000..468fb33b1a Binary files /dev/null and b/public/images/templates/babylon/Slim.png differ diff --git a/public/images/templates/babylon/Static.png b/public/images/templates/babylon/Static.png new file mode 100644 index 0000000000..de3180c1d5 Binary files /dev/null and b/public/images/templates/babylon/Static.png differ diff --git a/public/images/templates/babylon/babylon-features2-mobile.png b/public/images/templates/babylon/babylon-features2-mobile.png new file mode 100644 index 0000000000..f49a6a996e Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-mobile.png differ diff --git a/public/images/templates/babylon/babylon-features2-ready.png b/public/images/templates/babylon/babylon-features2-ready.png new file mode 100644 index 0000000000..2aa9058273 Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-ready.png differ diff --git a/public/images/templates/babylon/babylon-features2-responsive.png b/public/images/templates/babylon/babylon-features2-responsive.png new file mode 100644 index 0000000000..2d0effbd46 Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-responsive.png differ diff --git a/public/images/templates/babylon/babylon-hero-dashboard1.png b/public/images/templates/babylon/babylon-hero-dashboard1.png new file mode 100644 index 0000000000..aff4e0d555 Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-dashboard1.png differ diff --git a/public/images/templates/babylon/babylon-hero-dashboard2.png b/public/images/templates/babylon/babylon-hero-dashboard2.png new file mode 100644 index 0000000000..2fb2b5a24f Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-dashboard2.png differ diff --git a/public/images/templates/babylon/babylon-hero-pattern.png b/public/images/templates/babylon/babylon-hero-pattern.png new file mode 100644 index 0000000000..649656d159 Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-pattern.png differ diff --git a/public/images/templates/babylon/features-animation-blocks.png b/public/images/templates/babylon/features-animation-blocks.png new file mode 100644 index 0000000000..996d9c493a Binary files /dev/null and b/public/images/templates/babylon/features-animation-blocks.png differ diff --git a/public/images/templates/babylon/features-animation-component-themes.png b/public/images/templates/babylon/features-animation-component-themes.png new file mode 100644 index 0000000000..cc3dc03773 Binary files /dev/null and b/public/images/templates/babylon/features-animation-component-themes.png differ diff --git a/public/images/templates/babylon/features-animation-darkmode.png b/public/images/templates/babylon/features-animation-darkmode.png new file mode 100644 index 0000000000..8bd83a41db Binary files /dev/null and b/public/images/templates/babylon/features-animation-darkmode.png differ diff --git a/public/images/templates/babylon/features-animation-icons.png b/public/images/templates/babylon/features-animation-icons.png new file mode 100644 index 0000000000..4f71da26eb Binary files /dev/null and b/public/images/templates/babylon/features-animation-icons.png differ diff --git a/public/images/templates/babylon/features-animation-profile.png b/public/images/templates/babylon/features-animation-profile.png new file mode 100644 index 0000000000..f724a042e4 Binary files /dev/null and b/public/images/templates/babylon/features-animation-profile.png differ diff --git a/public/images/templates/babylon/features-animation-utilities.png b/public/images/templates/babylon/features-animation-utilities.png new file mode 100644 index 0000000000..fc4554906e Binary files /dev/null and b/public/images/templates/babylon/features-animation-utilities.png differ diff --git a/public/images/templates/california/california-features2-mobile.png b/public/images/templates/california/california-features2-mobile.png new file mode 100644 index 0000000000..457690e966 Binary files /dev/null and b/public/images/templates/california/california-features2-mobile.png differ diff --git a/public/images/templates/california/california-features2-ready.png b/public/images/templates/california/california-features2-ready.png new file mode 100644 index 0000000000..2e1a595113 Binary files /dev/null and b/public/images/templates/california/california-features2-ready.png differ diff --git a/public/images/templates/california/california-features2-responsive.png b/public/images/templates/california/california-features2-responsive.png new file mode 100644 index 0000000000..ac949ccbc2 Binary files /dev/null and b/public/images/templates/california/california-features2-responsive.png differ diff --git a/public/images/templates/california/california-hero-dashboard1.png b/public/images/templates/california/california-hero-dashboard1.png new file mode 100644 index 0000000000..1118ddfe71 Binary files /dev/null and b/public/images/templates/california/california-hero-dashboard1.png differ diff --git a/public/images/templates/california/california-hero-dashboard2.png b/public/images/templates/california/california-hero-dashboard2.png new file mode 100644 index 0000000000..c194f5dd32 Binary files /dev/null and b/public/images/templates/california/california-hero-dashboard2.png differ diff --git a/public/images/templates/california/california-hero-pattern.png b/public/images/templates/california/california-hero-pattern.png new file mode 100644 index 0000000000..c3699d395b Binary files /dev/null and b/public/images/templates/california/california-hero-pattern.png differ diff --git a/public/images/templates/california/california-intro.png b/public/images/templates/california/california-intro.png new file mode 100644 index 0000000000..cd5b61674e Binary files /dev/null and b/public/images/templates/california/california-intro.png differ diff --git a/public/images/templates/california/features-animation-blocks.png b/public/images/templates/california/features-animation-blocks.png new file mode 100644 index 0000000000..24445b5416 Binary files /dev/null and b/public/images/templates/california/features-animation-blocks.png differ diff --git a/public/images/templates/california/features-animation-color.png b/public/images/templates/california/features-animation-color.png new file mode 100644 index 0000000000..be020e69fb Binary files /dev/null and b/public/images/templates/california/features-animation-color.png differ diff --git a/public/images/templates/california/features-animation-icons.png b/public/images/templates/california/features-animation-icons.png new file mode 100644 index 0000000000..01e5f815f8 Binary files /dev/null and b/public/images/templates/california/features-animation-icons.png differ diff --git a/public/images/templates/california/features-animation-mega.png b/public/images/templates/california/features-animation-mega.png new file mode 100644 index 0000000000..479b561039 Binary files /dev/null and b/public/images/templates/california/features-animation-mega.png differ diff --git a/public/images/templates/california/features-animation-theme.png b/public/images/templates/california/features-animation-theme.png new file mode 100644 index 0000000000..36d9e608b8 Binary files /dev/null and b/public/images/templates/california/features-animation-theme.png differ diff --git a/public/images/templates/california/features-animation-utilities.png b/public/images/templates/california/features-animation-utilities.png new file mode 100644 index 0000000000..831485cf50 Binary files /dev/null and b/public/images/templates/california/features-animation-utilities.png differ diff --git a/public/images/templates/diamond-react.jpg b/public/images/templates/diamond-react.jpg new file mode 100644 index 0000000000..fc8d4fbf8f Binary files /dev/null and b/public/images/templates/diamond-react.jpg differ diff --git a/public/images/templates/diamond/Compact.png b/public/images/templates/diamond/Compact.png index ce9bed25e3..d5e561df95 100644 Binary files a/public/images/templates/diamond/Compact.png and b/public/images/templates/diamond/Compact.png differ diff --git a/public/images/templates/diamond/Drawer.png b/public/images/templates/diamond/Drawer.png index 791e2ca1f4..1e7525c60b 100644 Binary files a/public/images/templates/diamond/Drawer.png and b/public/images/templates/diamond/Drawer.png differ diff --git a/public/images/templates/diamond/Horizontal.png b/public/images/templates/diamond/Horizontal.png index 1cddc058d1..8d755d753d 100644 Binary files a/public/images/templates/diamond/Horizontal.png and b/public/images/templates/diamond/Horizontal.png differ diff --git a/public/images/templates/diamond/Overlay.png b/public/images/templates/diamond/Overlay.png index 778cccad93..1ca0633457 100644 Binary files a/public/images/templates/diamond/Overlay.png and b/public/images/templates/diamond/Overlay.png differ diff --git a/public/images/templates/diamond/Reveal.png b/public/images/templates/diamond/Reveal.png index eba15cee61..75481aa508 100644 Binary files a/public/images/templates/diamond/Reveal.png and b/public/images/templates/diamond/Reveal.png differ diff --git a/public/images/templates/diamond/Slim.png b/public/images/templates/diamond/Slim.png index a5927f4841..db908ffa08 100644 Binary files a/public/images/templates/diamond/Slim.png and b/public/images/templates/diamond/Slim.png differ diff --git a/public/images/templates/diamond/Static.png b/public/images/templates/diamond/Static.png index b114fae01f..1ab370c7b4 100644 Binary files a/public/images/templates/diamond/Static.png and b/public/images/templates/diamond/Static.png differ diff --git a/public/images/templates/diamond/diamond-features2-mobile.png b/public/images/templates/diamond/diamond-features2-mobile.png index efea01b8a8..104f113633 100644 Binary files a/public/images/templates/diamond/diamond-features2-mobile.png and b/public/images/templates/diamond/diamond-features2-mobile.png differ diff --git a/public/images/templates/diamond/diamond-features2-ready.png b/public/images/templates/diamond/diamond-features2-ready.png index 35713b7089..85167b59c6 100644 Binary files a/public/images/templates/diamond/diamond-features2-ready.png and b/public/images/templates/diamond/diamond-features2-ready.png differ diff --git a/public/images/templates/diamond/diamond-features2-responsive.png b/public/images/templates/diamond/diamond-features2-responsive.png index 87f09f1917..92d6f941fc 100644 Binary files a/public/images/templates/diamond/diamond-features2-responsive.png and b/public/images/templates/diamond/diamond-features2-responsive.png differ diff --git a/public/images/templates/diamond/diamond-hero-dashboard1.png b/public/images/templates/diamond/diamond-hero-dashboard1.png index 4a01e243bc..1fd61cb1df 100644 Binary files a/public/images/templates/diamond/diamond-hero-dashboard1.png and b/public/images/templates/diamond/diamond-hero-dashboard1.png differ diff --git a/public/images/templates/diamond/diamond-hero-dashboard2.png b/public/images/templates/diamond/diamond-hero-dashboard2.png index 2ea9c162f5..c77544929d 100644 Binary files a/public/images/templates/diamond/diamond-hero-dashboard2.png and b/public/images/templates/diamond/diamond-hero-dashboard2.png differ diff --git a/public/images/templates/diamond/features-animation-component-themes.png b/public/images/templates/diamond/features-animation-component-themes.png index 72f6b1d400..f4687fd0b3 100644 Binary files a/public/images/templates/diamond/features-animation-component-themes.png and b/public/images/templates/diamond/features-animation-component-themes.png differ diff --git a/public/images/templates/diamond/features-animation-darkmode.png b/public/images/templates/diamond/features-animation-darkmode.png index de79a6d3de..4e14f1f26f 100644 Binary files a/public/images/templates/diamond/features-animation-darkmode.png and b/public/images/templates/diamond/features-animation-darkmode.png differ diff --git a/public/images/templates/diamond/features-animation-figma.png b/public/images/templates/diamond/features-animation-figma.png new file mode 100644 index 0000000000..86e5554192 Binary files /dev/null and b/public/images/templates/diamond/features-animation-figma.png differ diff --git a/public/images/templates/diamond/features-animation-orientations.png b/public/images/templates/diamond/features-animation-orientations.png index 78adff693f..6666f8d5c6 100644 Binary files a/public/images/templates/diamond/features-animation-orientations.png and b/public/images/templates/diamond/features-animation-orientations.png differ diff --git a/public/images/templates/freya-react.jpg b/public/images/templates/freya-react.jpg new file mode 100644 index 0000000000..6e1ebbb1a3 Binary files /dev/null and b/public/images/templates/freya-react.jpg differ diff --git a/public/images/templates/freya/Drawer.png b/public/images/templates/freya/Drawer.png index 71cb2dc34f..ad70ba3572 100644 Binary files a/public/images/templates/freya/Drawer.png and b/public/images/templates/freya/Drawer.png differ diff --git a/public/images/templates/freya/Horizontal.png b/public/images/templates/freya/Horizontal.png index 7176f403ca..b9f2077e3b 100644 Binary files a/public/images/templates/freya/Horizontal.png and b/public/images/templates/freya/Horizontal.png differ diff --git a/public/images/templates/freya/Overlay.png b/public/images/templates/freya/Overlay.png index a601dc525b..f47b6566d0 100644 Binary files a/public/images/templates/freya/Overlay.png and b/public/images/templates/freya/Overlay.png differ diff --git a/public/images/templates/freya/Reveal.png b/public/images/templates/freya/Reveal.png index 2e2085670f..bd2e65e89b 100644 Binary files a/public/images/templates/freya/Reveal.png and b/public/images/templates/freya/Reveal.png differ diff --git a/public/images/templates/freya/Slim+.png b/public/images/templates/freya/Slim+.png index fc9ec58013..edd89352c4 100644 Binary files a/public/images/templates/freya/Slim+.png and b/public/images/templates/freya/Slim+.png differ diff --git a/public/images/templates/freya/Slim.png b/public/images/templates/freya/Slim.png index 19c32cb369..db9a8792f9 100644 Binary files a/public/images/templates/freya/Slim.png and b/public/images/templates/freya/Slim.png differ diff --git a/public/images/templates/freya/Static.png b/public/images/templates/freya/Static.png index 4f6a6b8736..3a3ed89b30 100644 Binary files a/public/images/templates/freya/Static.png and b/public/images/templates/freya/Static.png differ diff --git a/public/images/templates/freya/features-animation-component-themes.png b/public/images/templates/freya/features-animation-component-themes.png index f17209b6b3..275463880a 100644 Binary files a/public/images/templates/freya/features-animation-component-themes.png and b/public/images/templates/freya/features-animation-component-themes.png differ diff --git a/public/images/templates/freya/features-animation-darkmode.png b/public/images/templates/freya/features-animation-darkmode.png index 1228007fc1..7d868b4edd 100644 Binary files a/public/images/templates/freya/features-animation-darkmode.png and b/public/images/templates/freya/features-animation-darkmode.png differ diff --git a/public/images/templates/freya/features-animation-figma.png b/public/images/templates/freya/features-animation-figma.png new file mode 100644 index 0000000000..cba904893d Binary files /dev/null and b/public/images/templates/freya/features-animation-figma.png differ diff --git a/public/images/templates/freya/freya-features2-mobile.png b/public/images/templates/freya/freya-features2-mobile.png index cba71e5271..89daafc6e1 100644 Binary files a/public/images/templates/freya/freya-features2-mobile.png and b/public/images/templates/freya/freya-features2-mobile.png differ diff --git a/public/images/templates/freya/freya-features2-ready.png b/public/images/templates/freya/freya-features2-ready.png index 51f47eea2d..bc36bfda2b 100644 Binary files a/public/images/templates/freya/freya-features2-ready.png and b/public/images/templates/freya/freya-features2-ready.png differ diff --git a/public/images/templates/freya/freya-features2-responsive.png b/public/images/templates/freya/freya-features2-responsive.png index 3ae0fa8c84..8e4949ba52 100644 Binary files a/public/images/templates/freya/freya-features2-responsive.png and b/public/images/templates/freya/freya-features2-responsive.png differ diff --git a/public/images/templates/freya/freya-hero-dashboard1.png b/public/images/templates/freya/freya-hero-dashboard1.png index 1eabe664c7..22c0b7f187 100644 Binary files a/public/images/templates/freya/freya-hero-dashboard1.png and b/public/images/templates/freya/freya-hero-dashboard1.png differ diff --git a/public/images/templates/freya/freya-hero-dashboard2.png b/public/images/templates/freya/freya-hero-dashboard2.png index 86feeef362..5184f999ae 100644 Binary files a/public/images/templates/freya/freya-hero-dashboard2.png and b/public/images/templates/freya/freya-hero-dashboard2.png differ diff --git a/public/images/templates/freya/freya-hero-light.png b/public/images/templates/freya/freya-hero-light.png deleted file mode 100644 index bd9a79a483..0000000000 Binary files a/public/images/templates/freya/freya-hero-light.png and /dev/null differ diff --git a/public/images/templates/freya/freya-hero-pattern.png b/public/images/templates/freya/freya-hero-pattern.png index 2f2ff8e9dc..300ededbb7 100644 Binary files a/public/images/templates/freya/freya-hero-pattern.png and b/public/images/templates/freya/freya-hero-pattern.png differ diff --git a/public/images/templates/freya/freya-hero-rectangle1.png b/public/images/templates/freya/freya-hero-rectangle1.png deleted file mode 100644 index d13783bcd0..0000000000 Binary files a/public/images/templates/freya/freya-hero-rectangle1.png and /dev/null differ diff --git a/public/images/templates/poseidon/Horizontal.png b/public/images/templates/poseidon/Horizontal.png new file mode 100644 index 0000000000..aaaa728e4f Binary files /dev/null and b/public/images/templates/poseidon/Horizontal.png differ diff --git a/public/images/templates/poseidon/Overlay.png b/public/images/templates/poseidon/Overlay.png new file mode 100644 index 0000000000..8cfea00b55 Binary files /dev/null and b/public/images/templates/poseidon/Overlay.png differ diff --git a/public/images/templates/poseidon/Static.png b/public/images/templates/poseidon/Static.png new file mode 100644 index 0000000000..2538706f51 Binary files /dev/null and b/public/images/templates/poseidon/Static.png differ diff --git a/public/images/templates/poseidon/features-animation-component-themes.png b/public/images/templates/poseidon/features-animation-component-themes.png new file mode 100644 index 0000000000..5c9f275662 Binary files /dev/null and b/public/images/templates/poseidon/features-animation-component-themes.png differ diff --git a/public/images/templates/poseidon/features-animation-darkmode.png b/public/images/templates/poseidon/features-animation-darkmode.png new file mode 100644 index 0000000000..7150392246 Binary files /dev/null and b/public/images/templates/poseidon/features-animation-darkmode.png differ diff --git a/public/images/templates/poseidon/poseidon-features2-mobile.png b/public/images/templates/poseidon/poseidon-features2-mobile.png new file mode 100644 index 0000000000..a7777764b3 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-mobile.png differ diff --git a/public/images/templates/poseidon/poseidon-features2-ready.png b/public/images/templates/poseidon/poseidon-features2-ready.png new file mode 100644 index 0000000000..53c4da8170 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-ready.png differ diff --git a/public/images/templates/poseidon/poseidon-features2-responsive.png b/public/images/templates/poseidon/poseidon-features2-responsive.png new file mode 100644 index 0000000000..720d7f9082 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-responsive.png differ diff --git a/public/images/templates/poseidon/poseidon-hero-dashboard1.png b/public/images/templates/poseidon/poseidon-hero-dashboard1.png new file mode 100644 index 0000000000..d6a84eeba4 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-dashboard1.png differ diff --git a/public/images/templates/poseidon/poseidon-hero-dashboard2.png b/public/images/templates/poseidon/poseidon-hero-dashboard2.png new file mode 100644 index 0000000000..ddbbeb4bc9 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-dashboard2.png differ diff --git a/public/images/templates/poseidon/poseidon-hero-pattern.png b/public/images/templates/poseidon/poseidon-hero-pattern.png new file mode 100644 index 0000000000..6a414cacd3 Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-pattern.png differ diff --git a/public/images/templates/roma-react.jpg b/public/images/templates/roma-react.jpg new file mode 100644 index 0000000000..35140098da Binary files /dev/null and b/public/images/templates/roma-react.jpg differ diff --git a/public/images/templates/roma/Horizontal.png b/public/images/templates/roma/Horizontal.png new file mode 100644 index 0000000000..8ee2903acb Binary files /dev/null and b/public/images/templates/roma/Horizontal.png differ diff --git a/public/images/templates/roma/Overlay.png b/public/images/templates/roma/Overlay.png new file mode 100644 index 0000000000..6335d8b07e Binary files /dev/null and b/public/images/templates/roma/Overlay.png differ diff --git a/public/images/templates/roma/Slim.png b/public/images/templates/roma/Slim.png new file mode 100644 index 0000000000..b02d0de7d4 Binary files /dev/null and b/public/images/templates/roma/Slim.png differ diff --git a/public/images/templates/roma/Static.png b/public/images/templates/roma/Static.png new file mode 100644 index 0000000000..e28aace107 Binary files /dev/null and b/public/images/templates/roma/Static.png differ diff --git a/public/images/templates/roma/features-animation-component-themes.png b/public/images/templates/roma/features-animation-component-themes.png new file mode 100644 index 0000000000..d17e8493fd Binary files /dev/null and b/public/images/templates/roma/features-animation-component-themes.png differ diff --git a/public/images/templates/roma/features-animation-darkmode.png b/public/images/templates/roma/features-animation-darkmode.png new file mode 100644 index 0000000000..0e3e2fac21 Binary files /dev/null and b/public/images/templates/roma/features-animation-darkmode.png differ diff --git a/public/images/templates/roma/features-animation-menu-themes.png b/public/images/templates/roma/features-animation-menu-themes.png new file mode 100644 index 0000000000..61adf3e507 Binary files /dev/null and b/public/images/templates/roma/features-animation-menu-themes.png differ diff --git a/public/images/templates/roma/roma-features2-mobile.png b/public/images/templates/roma/roma-features2-mobile.png new file mode 100644 index 0000000000..8d127b827c Binary files /dev/null and b/public/images/templates/roma/roma-features2-mobile.png differ diff --git a/public/images/templates/roma/roma-features2-ready.png b/public/images/templates/roma/roma-features2-ready.png new file mode 100644 index 0000000000..50fc3039a5 Binary files /dev/null and b/public/images/templates/roma/roma-features2-ready.png differ diff --git a/public/images/templates/roma/roma-features2-responsive.png b/public/images/templates/roma/roma-features2-responsive.png new file mode 100644 index 0000000000..9f05fff748 Binary files /dev/null and b/public/images/templates/roma/roma-features2-responsive.png differ diff --git a/public/images/templates/roma/roma-hero-dashboard1.png b/public/images/templates/roma/roma-hero-dashboard1.png new file mode 100644 index 0000000000..2a52a13ef4 Binary files /dev/null and b/public/images/templates/roma/roma-hero-dashboard1.png differ diff --git a/public/images/templates/roma/roma-hero-dashboard2.png b/public/images/templates/roma/roma-hero-dashboard2.png new file mode 100644 index 0000000000..d5543d6e06 Binary files /dev/null and b/public/images/templates/roma/roma-hero-dashboard2.png differ diff --git a/public/images/templates/roma/roma-hero-pattern.png b/public/images/templates/roma/roma-hero-pattern.png new file mode 100644 index 0000000000..4401e84a99 Binary files /dev/null and b/public/images/templates/roma/roma-hero-pattern.png differ diff --git a/public/images/templates/roma/roma-intro.png b/public/images/templates/roma/roma-intro.png new file mode 100644 index 0000000000..6abe2d0877 Binary files /dev/null and b/public/images/templates/roma/roma-intro.png differ diff --git a/public/images/templates/sakai/Overlay.png b/public/images/templates/sakai/Overlay.png new file mode 100644 index 0000000000..24880f23f1 Binary files /dev/null and b/public/images/templates/sakai/Overlay.png differ diff --git a/public/images/templates/sakai/Static.png b/public/images/templates/sakai/Static.png new file mode 100644 index 0000000000..a297c424f8 Binary files /dev/null and b/public/images/templates/sakai/Static.png differ diff --git a/public/images/templates/sakai/features-animation-component-themes.png b/public/images/templates/sakai/features-animation-component-themes.png new file mode 100644 index 0000000000..00437578f1 Binary files /dev/null and b/public/images/templates/sakai/features-animation-component-themes.png differ diff --git a/public/images/templates/sakai/features-animation-darkmode.png b/public/images/templates/sakai/features-animation-darkmode.png new file mode 100644 index 0000000000..de2f47eecf Binary files /dev/null and b/public/images/templates/sakai/features-animation-darkmode.png differ diff --git a/public/images/templates/sakai/sakai-features2-mobile.png b/public/images/templates/sakai/sakai-features2-mobile.png new file mode 100644 index 0000000000..632c5d2c45 Binary files /dev/null and b/public/images/templates/sakai/sakai-features2-mobile.png differ diff --git a/public/images/templates/sakai/sakai-features2-responsive.png b/public/images/templates/sakai/sakai-features2-responsive.png new file mode 100644 index 0000000000..8ea8bb08e5 Binary files /dev/null and b/public/images/templates/sakai/sakai-features2-responsive.png differ diff --git a/public/images/templates/sakai/sakai-github.png b/public/images/templates/sakai/sakai-github.png new file mode 100644 index 0000000000..3fe3a5385c Binary files /dev/null and b/public/images/templates/sakai/sakai-github.png differ diff --git a/public/images/templates/sakai/sakai-hero-dashboard1.png b/public/images/templates/sakai/sakai-hero-dashboard1.png new file mode 100644 index 0000000000..a15ab4caa6 Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-dashboard1.png differ diff --git a/public/images/templates/sakai/sakai-hero-dashboard2.png b/public/images/templates/sakai/sakai-hero-dashboard2.png new file mode 100644 index 0000000000..2a1f9a5fcc Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-dashboard2.png differ diff --git a/public/images/templates/sakai/sakai-hero-pattern.png b/public/images/templates/sakai/sakai-hero-pattern.png new file mode 100644 index 0000000000..454c92e653 Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-pattern.png differ diff --git a/public/images/templates/sakai/sakai-ready.png b/public/images/templates/sakai/sakai-ready.png new file mode 100644 index 0000000000..3c229e01fc Binary files /dev/null and b/public/images/templates/sakai/sakai-ready.png differ diff --git a/public/images/templates/sapphire-react.jpg b/public/images/templates/sapphire-react.jpg new file mode 100644 index 0000000000..d445330b6c Binary files /dev/null and b/public/images/templates/sapphire-react.jpg differ diff --git a/public/images/templates/serenity-react.jpg b/public/images/templates/serenity-react.jpg new file mode 100644 index 0000000000..be9c35dad0 Binary files /dev/null and b/public/images/templates/serenity-react.jpg differ diff --git a/public/images/templates/ultima-react.jpg b/public/images/templates/ultima-react.jpg new file mode 100644 index 0000000000..d9de5bb902 Binary files /dev/null and b/public/images/templates/ultima-react.jpg differ diff --git a/public/images/templates/ultima/Static.png b/public/images/templates/ultima/Static.png index 426468a45f..d2f88543ee 100644 Binary files a/public/images/templates/ultima/Static.png and b/public/images/templates/ultima/Static.png differ diff --git a/public/images/templates/ultima/features-animation-component-themes.png b/public/images/templates/ultima/features-animation-component-themes.png index afcb15396b..8723047a1c 100644 Binary files a/public/images/templates/ultima/features-animation-component-themes.png and b/public/images/templates/ultima/features-animation-component-themes.png differ diff --git a/public/images/templates/ultima/features-animation-darkmode.png b/public/images/templates/ultima/features-animation-darkmode.png index d7948e9b15..ec36241bd4 100644 Binary files a/public/images/templates/ultima/features-animation-darkmode.png and b/public/images/templates/ultima/features-animation-darkmode.png differ diff --git a/public/images/templates/ultima/features-animation-figma.png b/public/images/templates/ultima/features-animation-figma.png new file mode 100644 index 0000000000..690f5adf46 Binary files /dev/null and b/public/images/templates/ultima/features-animation-figma.png differ diff --git a/public/images/templates/ultima/ultima-features2-mobile.png b/public/images/templates/ultima/ultima-features2-mobile.png index d623acd3d4..e5ceb60a54 100644 Binary files a/public/images/templates/ultima/ultima-features2-mobile.png and b/public/images/templates/ultima/ultima-features2-mobile.png differ diff --git a/public/images/templates/ultima/ultima-features2-ready.png b/public/images/templates/ultima/ultima-features2-ready.png index c832a614f2..6c954cccfd 100644 Binary files a/public/images/templates/ultima/ultima-features2-ready.png and b/public/images/templates/ultima/ultima-features2-ready.png differ diff --git a/public/images/templates/ultima/ultima-features2-responsive.png b/public/images/templates/ultima/ultima-features2-responsive.png index 51106897a6..81e544ea41 100644 Binary files a/public/images/templates/ultima/ultima-features2-responsive.png and b/public/images/templates/ultima/ultima-features2-responsive.png differ diff --git a/public/images/templates/ultima/ultima-hero-dashboard1.png b/public/images/templates/ultima/ultima-hero-dashboard1.png index 42da70c2b2..395caf9464 100644 Binary files a/public/images/templates/ultima/ultima-hero-dashboard1.png and b/public/images/templates/ultima/ultima-hero-dashboard1.png differ diff --git a/public/images/templates/ultima/ultima-hero-dashboard2.png b/public/images/templates/ultima/ultima-hero-dashboard2.png index 15f68f46ad..612ecf180c 100644 Binary files a/public/images/templates/ultima/ultima-hero-dashboard2.png and b/public/images/templates/ultima/ultima-hero-dashboard2.png differ diff --git a/public/images/templates/ultima/ultima-hero-light.png b/public/images/templates/ultima/ultima-hero-light.png deleted file mode 100644 index 750af7199e..0000000000 Binary files a/public/images/templates/ultima/ultima-hero-light.png and /dev/null differ diff --git a/public/images/templates/ultima/ultima-hero-pattern.png b/public/images/templates/ultima/ultima-hero-pattern.png index 1634963e08..99ddbcb760 100644 Binary files a/public/images/templates/ultima/ultima-hero-pattern.png and b/public/images/templates/ultima/ultima-hero-pattern.png differ diff --git a/public/images/templates/ultima/ultima-hero-rectangle1.png b/public/images/templates/ultima/ultima-hero-rectangle1.png deleted file mode 100644 index bf1acf757b..0000000000 Binary files a/public/images/templates/ultima/ultima-hero-rectangle1.png and /dev/null differ diff --git a/public/images/templates/verona.jpg b/public/images/templates/verona.jpg new file mode 100644 index 0000000000..31066ddeab Binary files /dev/null and b/public/images/templates/verona.jpg differ diff --git a/public/images/templates/verona/Overlay.png b/public/images/templates/verona/Overlay.png index 60c44a62dd..3a5cf3a4b5 100644 Binary files a/public/images/templates/verona/Overlay.png and b/public/images/templates/verona/Overlay.png differ diff --git a/public/images/templates/verona/Static.png b/public/images/templates/verona/Static.png index 1dacc63c33..b4b1152d31 100644 Binary files a/public/images/templates/verona/Static.png and b/public/images/templates/verona/Static.png differ diff --git a/public/images/templates/verona/features-animation-component-themes.png b/public/images/templates/verona/features-animation-component-themes.png index c286f42bd1..19d1a340b6 100644 Binary files a/public/images/templates/verona/features-animation-component-themes.png and b/public/images/templates/verona/features-animation-component-themes.png differ diff --git a/public/images/templates/verona/features-animation-darkmode.png b/public/images/templates/verona/features-animation-darkmode.png index ca6c994410..70944cb02e 100644 Binary files a/public/images/templates/verona/features-animation-darkmode.png and b/public/images/templates/verona/features-animation-darkmode.png differ diff --git a/public/images/templates/verona/features-animation-figma.png b/public/images/templates/verona/features-animation-figma.png new file mode 100644 index 0000000000..376dabc910 Binary files /dev/null and b/public/images/templates/verona/features-animation-figma.png differ diff --git a/public/images/templates/verona/features-animation-orientations.png b/public/images/templates/verona/features-animation-orientations.png index 153ebe692d..c998fb57fd 100644 Binary files a/public/images/templates/verona/features-animation-orientations.png and b/public/images/templates/verona/features-animation-orientations.png differ diff --git a/public/images/templates/verona/verona-features2-ready.png b/public/images/templates/verona/verona-features2-ready.png index 0759125461..b8679324da 100644 Binary files a/public/images/templates/verona/verona-features2-ready.png and b/public/images/templates/verona/verona-features2-ready.png differ diff --git a/public/images/templates/verona/verona-features2-responsive.png b/public/images/templates/verona/verona-features2-responsive.png index c08ca01b47..9f8c409b6f 100644 Binary files a/public/images/templates/verona/verona-features2-responsive.png and b/public/images/templates/verona/verona-features2-responsive.png differ diff --git a/public/images/templates/verona/verona-hero-dashboard1.png b/public/images/templates/verona/verona-hero-dashboard1.png index 1fc3d46b02..4707c4d36f 100644 Binary files a/public/images/templates/verona/verona-hero-dashboard1.png and b/public/images/templates/verona/verona-hero-dashboard1.png differ diff --git a/public/images/templates/verona/verona-hero-dashboard2.png b/public/images/templates/verona/verona-hero-dashboard2.png index 169914930d..b8ff66475b 100644 Binary files a/public/images/templates/verona/verona-hero-dashboard2.png and b/public/images/templates/verona/verona-hero-dashboard2.png differ diff --git a/public/images/templates/verona/verona-hero-light.png b/public/images/templates/verona/verona-hero-light.png deleted file mode 100644 index 2e97bd7e19..0000000000 Binary files a/public/images/templates/verona/verona-hero-light.png and /dev/null differ diff --git a/public/images/templates/verona/verona-hero-logo.svg b/public/images/templates/verona/verona-hero-logo.svg deleted file mode 100644 index 2b03efab35..0000000000 --- a/public/images/templates/verona/verona-hero-logo.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/templates/verona/verona-hero-rectangle1.png b/public/images/templates/verona/verona-hero-rectangle1.png deleted file mode 100644 index 8d66852c8d..0000000000 Binary files a/public/images/templates/verona/verona-hero-rectangle1.png and /dev/null differ diff --git a/styles/layout/layout.scss b/styles/layout/layout.scss index 8f1f133f66..0a8ba3e794 100644 --- a/styles/layout/layout.scss +++ b/styles/layout/layout.scss @@ -21,4 +21,10 @@ @import './templates/_freya'; @import './templates/_verona'; @import './templates/_diamond'; +@import './templates/_avalon'; +@import './templates/_poseidon'; +@import './templates/_babylon'; +@import './templates/_california'; +@import './templates/_sakai'; +@import './templates/_roma'; @import './templates/_templates'; \ No newline at end of file diff --git a/styles/layout/templates/_apollo.scss b/styles/layout/templates/_apollo.scss index aaa56a7c7a..f513607b68 100644 --- a/styles/layout/templates/_apollo.scss +++ b/styles/layout/templates/_apollo.scss @@ -22,6 +22,7 @@ &-hero { &-pattern { width: 90rem; + bottom: 20rem; } } diff --git a/styles/layout/templates/_atlantis.scss b/styles/layout/templates/_atlantis.scss index 13134e7513..91cfbdb8c8 100644 --- a/styles/layout/templates/_atlantis.scss +++ b/styles/layout/templates/_atlantis.scss @@ -1,15 +1,17 @@ .atlantis { - .template { &-hero { &-pattern { - width: 98rem; - height: 36rem; + width: 50rem; + height: auto; position: absolute; - bottom: -0.75rem; - left: 2rem; + bottom: -7rem; + left: -7rem; z-index: 6; - mix-blend-mode: overlay; + } + &-dashboard1, + &-dashboard2{ + border-radius: 1.12rem; } } } @@ -21,9 +23,9 @@ .template{ &-hero { &-pattern { - width: 90rem; + width: 45rem; bottom: -5.75rem; - left: 0.5rem; + left: -9.5rem; } } } @@ -36,9 +38,9 @@ .template{ &-hero { &-pattern { - width: 90rem; - bottom: 14.75rem; - left: 0.5rem; + width: 50rem; + bottom: 16.75rem; + left: -10.5rem; } } } diff --git a/styles/layout/templates/_avalon.scss b/styles/layout/templates/_avalon.scss new file mode 100644 index 0000000000..9cd421985b --- /dev/null +++ b/styles/layout/templates/_avalon.scss @@ -0,0 +1,60 @@ +.avalon { + .template { + &-hero { + &-pattern { + width: 56rem; + height: auto; + position: absolute; + bottom: 0px; + left: -3.06; + z-index: 6; + + + } + &-rectangle{ + opacity: 0.5; + } + &-light{ + opacity: 0.75; + } + } + &-separator { + &-icon { + width: 7rem; + height: 3.5rem; + border-radius: 99px; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .avalon { + .template{ + &-hero { + &-pattern { + width: 68rem; + height: auto; + bottom: -8rem; + left: -12rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .avalon { + .template{ + &-hero { + &-pattern { + width: 88rem; + height: auto; + bottom: 0rem; + left: -16rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_babylon.scss b/styles/layout/templates/_babylon.scss new file mode 100644 index 0000000000..a53e9f3dfb --- /dev/null +++ b/styles/layout/templates/_babylon.scss @@ -0,0 +1,49 @@ +.babylon { + .template { + &-hero { + &-pattern { + width: 100.3125rem; + height: auto; + position: absolute; + bottom: -23rem; + left: -15rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 40rem; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .babylon { + .template{ + &-hero { + &-pattern { + width: 72rem; + height: auto; + bottom: -16rem; + left: -20rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .babylon { + .template{ + &-hero { + &-pattern { + width: 100rem; + height: auto; + bottom: -21rem; + left: -24rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_california.scss b/styles/layout/templates/_california.scss new file mode 100644 index 0000000000..43f665a70f --- /dev/null +++ b/styles/layout/templates/_california.scss @@ -0,0 +1,49 @@ +.california { + .template { + &-hero { + &-pattern { + width: 70.3125rem; + height: auto; + position: absolute; + bottom: -1.2rem; + left: -8.65rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 40rem; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .california { + .template{ + &-hero { + &-pattern { + width: 64rem; + height: auto; + bottom: -1.2rem; + left: -10rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .california { + .template{ + &-hero { + &-pattern { + width: 92rem; + height: auto; + bottom: -1.2rem; + left: -16rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_freya.scss b/styles/layout/templates/_freya.scss index 83e2d7b397..8bc3734f64 100644 --- a/styles/layout/templates/_freya.scss +++ b/styles/layout/templates/_freya.scss @@ -3,13 +3,12 @@ &-hero { &-pattern { - height: 26rem; - width: auto; + height: auto; + width: 45rem; position: absolute; - bottom: 0; - left: 0; + bottom: -9rem; + left: 0rem; z-index: 6; - mix-blend-mode: screen; } } } @@ -22,8 +21,10 @@ &-hero { &-pattern { - width: 70rem; - height: 30rem; + width: 55rem; + height: auto; + bottom: -2rem; + left: 0; } } } diff --git a/styles/layout/templates/_poseidon.scss b/styles/layout/templates/_poseidon.scss new file mode 100644 index 0000000000..0434c062e7 --- /dev/null +++ b/styles/layout/templates/_poseidon.scss @@ -0,0 +1,47 @@ +.poseidon { + .template { + &-hero { + &-pattern { + width: 102.3125rem; + height: auto; + position: absolute; + bottom: 0rem; + left: -26rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 45rem; + } + } + } + +} +@media only screen and (max-width: 1200px) { + .poseidon { + .template{ + &-hero { + &-pattern { + height: auto; + bottom: 0rem; + left: -34rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .poseidon { + .template{ + &-hero { + &-pattern { + height: auto; + bottom: 21rem; + left: -35rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_roma.scss b/styles/layout/templates/_roma.scss new file mode 100644 index 0000000000..16b194cb2d --- /dev/null +++ b/styles/layout/templates/_roma.scss @@ -0,0 +1,60 @@ +.roma { + .template { + &-hero { + &-pattern { + width: 56rem; + height: auto; + position: absolute; + bottom: -0.5rem; + left: -4.06rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 42rem; + } + } + &-separator { + &-icon { + width: 6rem; + height: 2.5rem; + border-radius: 99px; + svg{ + width: 4.2rem; + height: 4.2rem; + } + } + } + } + +} +@media only screen and (max-width: 1200px) { + .roma { + .template{ + &-hero { + &-pattern { + width: 68rem; + height: auto; + bottom: -8rem; + left: -12rem; + } + } + } + + } +} +@media only screen and (max-width: 768px) { + .roma { + .template{ + &-hero { + &-pattern { + width: 88rem; + height: auto; + bottom: 0rem; + left: -16rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_sakai.scss b/styles/layout/templates/_sakai.scss new file mode 100644 index 0000000000..fc75a58801 --- /dev/null +++ b/styles/layout/templates/_sakai.scss @@ -0,0 +1,54 @@ +.sakai { + .template { + &-hero { + &-pattern { + width: 72.3125rem; + height: auto; + position: absolute; + bottom: -1rem; + left: -1rem; + z-index: 6; + } + &-dashboard1, + &-dashboard2{ + width: 42rem; + } + } + &-features-horizontal-card{ + width: 30rem; + } + } + +} + +@media only screen and (max-width: 1200px) { + .sakai { + .template { + &-hero { + &-pattern { + width: 72.3125rem; + height: auto; + bottom: -1rem; + left: -2rem; + } + } + } + + } +} + +@media only screen and (max-width: 768px) { + .sakai { + .template { + &-hero { + &-pattern { + width: 64.3125rem; + height: auto; + bottom: 20rem; + left: -2rem; + } + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_templates.scss b/styles/layout/templates/_templates.scss index c8f4479d91..526a7e8019 100644 --- a/styles/layout/templates/_templates.scss +++ b/styles/layout/templates/_templates.scss @@ -192,11 +192,11 @@ background: var(--surface-100, #FFF); border-radius: 0.65625rem; overflow: hidden; + display: flex; - img, svg { + img { width: 100%; border-radius: inherit; - margin-bottom: -0.2rem; } } @@ -293,11 +293,9 @@ width: auto; background: var(--surface-100); border-radius: 0.65625rem; - justify-content: center; - align-items: center; display: flex; - - img, svg { + + img { border-radius: inherit; width: 100%; height: auto; @@ -412,7 +410,7 @@ border: 1px solid var(--surface-border, #EEE); background: var(--surface-0, #FFF); padding: 1.25rem; - + display: flex; img { width: 18.625rem; height: auto; @@ -480,6 +478,22 @@ } // TEMPLATE CONFIGURATION +.layout-dark { + .template { + &-configuration { + &-screen { + &-bottom { + background: var(--surface-card) !important; + + p { + color: var(--surface-900); + } + } + } + } + } +} + .template { &-configuration { &-wrapper { @@ -544,7 +558,7 @@ &-bottom { padding: 1.5rem; - background: #212121; + background: var(--surface-900); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; display: flex; @@ -553,7 +567,7 @@ position: relative; p { - color: #FFF; + color: var(--surface-0); font-size: 0.875rem; font-weight: 400; line-height: 1.0625rem; @@ -580,6 +594,15 @@ border-radius: 1.25rem; } + &-title { + font-size: 1.25rem; + } + + &-description { + font-size: 0.85rem; + line-height: 1.25rem; + } + width: 80%; padding: 1rem; border-radius: 1rem; @@ -654,7 +677,6 @@ padding: 1.75rem; border-radius: 1.75rem; border: 1px solid var(--surface-border, #EEE); - width: fit-content; &-left { width: 100%; @@ -689,6 +711,7 @@ color: var(--surface-100); } + &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; color: var(--primary-400); @@ -702,6 +725,7 @@ color: var(--surface-100); } + &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; color: var(--primary-400); @@ -727,10 +751,12 @@ color: var(--primary-400); -webkit-text-stroke: 1.2px var(--primary-400); } + &:nth-child(2) { color: var(--surface-card); transition: all 0.2s ease; } + &:nth-child(3) { color: transparent; } @@ -756,6 +782,14 @@ font-weight: 400; line-height: 1.3125rem; margin: 0.38rem 0 0; + + a { + color: var(--primary-400); + + &:hover { + text-decoration: underline; + } + } } } @@ -764,12 +798,14 @@ &-right { width: 30rem; + height: fit-content; border-radius: 0.875rem; - + background-color: var(--surface-100); + display: flex; + overflow: hidden; img { width: 100%; height: auto; - border-radius: inherit; } &-inline { @@ -787,6 +823,7 @@ width: 90%; overflow: hidden; position: relative; + display: flex; margin-top: 1.25rem; border-radius: 0.5rem; box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08); @@ -868,12 +905,11 @@ &-features-animation { &-left { - width: 40%; + flex: 0.4; } &-right { - width: 60%; - + flex: 0.6; &-inline { &-image { width: 92%; @@ -921,7 +957,7 @@ } &-right { - border-radius: 0.48169rem; + border-radius: 0.75rem; width: 100%; min-width: 0rem; max-width: 100%; @@ -968,7 +1004,7 @@ &-hero { width: 100%; height: 36.25rem; - background: var(--primary-600); + background: var(--primary-500); border-radius: 2rem; position: relative; overflow: hidden; @@ -981,14 +1017,11 @@ margin-top: 9.81rem; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.24); - background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-600)/0.8 100%), rgba(255, 255, 255, 0.10); + background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset; backdrop-filter: blur(2px); padding: 2.25rem 1.75rem; - * { - color: #fff; - } &-logo { height: 2.5rem; @@ -1004,6 +1037,7 @@ font-weight: 400; line-height: normal; margin: 1rem 0 0; + color: var(--surface-0); } &-buttons { @@ -1030,6 +1064,7 @@ &-btn1 { border: 1px solid #212121; background: #212121; + color: white; &:hover { border-color: #444444; @@ -1038,12 +1073,12 @@ } &-btn2 { - background-color: var(--cyan-500); - border-color: var(--cyan-500); + background-color: var(--primary-600); + border-color: var(--primary-600); &:hover { - background-color: var(--cyan-600); - border-color: var(--cyan-600); + background-color: var(--primary-700); + border-color: var(--primary-700); } } @@ -1212,40 +1247,283 @@ } } -// TEMPALTE SEPERATOR +//TEMPLATE INTRO +.template { + &-intro { + border-radius: 2rem; + background: var(--surface-card, #FFF); + padding: 5rem 2rem; + + h2 { + color: var(--surface-900); + text-align: center; + font-size: 3.42857rem; + font-weight: 600; + line-height: 4rem; + margin: 0; + } + + p { + color: var(--surface-900); + text-align: center; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + max-width: 50rem; + margin: 1.5rem auto 0; + } + + &-image { + position: relative; + background-color: var(--primary-600); + max-width: 75rem; + margin: 3.5rem auto 0; + border-radius: 1.15rem; + display: flex; + + &::after { + content: ''; + position: absolute; + inset: 0; + z-index: 5; + background-color: var(--primary-100); + opacity: 0.15; + border-radius: inherit; + } + + img { + width: 100%; + height: auto; + } + } + } +} + + +@media only screen and (max-width: 992px) { + .template { + &-intro { + padding: 2.5rem 1.25rem; + + h2 { + font-size: 1.5rem; + line-height: normal; + } + + p { + line-height: 1.5; + margin: 1rem auto 0; + font-size: 1rem; + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-intro { + padding: 3rem 1rem; + + h2 { + font-size: 1.5rem; + } + + &-image { + margin: 1.5rem auto 0; + } + } + } +} + + +// TEMPALTE SEPARATOR .template { - &-seperator { - gap: 1.5rem; + &-separator { + gap: 1.5rem; width: 100%; - display: flex; - align-items: center; + display: flex; + align-items: center; justify-content: center; &::before { content: ''; flex: 1; - height: 1px; + height: 1px; background-color: var(--surface-border) } &::after { content: ''; flex: 1; - height: 1px; + height: 1px; background-color: var(--surface-border) } &-icon { width: 3rem; - height: 3rem; - display: flex; - align-items: center; + height: 3rem; + display: flex; + align-items: center; justify-content: center; - border: 1px solid var(--surface-border); + border: 1px solid var(--surface-border); border-radius: 100%; - background-color: var(--surface-0); + background-color: var(--surface-card); } } +} + +//TEMPLATE LICENCE + +.template { + &-license { + &-wrapper { + padding: 5rem 2rem; + border-radius: 2rem; + background: var(--surface-card, #FFF); + } + + &-cards { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 1.5rem; + } + + &-card { + width: 21.25rem; + padding: 1.5rem; + border-radius: 1rem; + border: 1px solid var(--surface-200); + background-color: var(--surface-card); + span { + color: var(--surface-900); + font-weight: 600; + line-height: 1.5rem; + } + + h2 { + color: var(--surface-900); + font-size: 2.5rem; + font-weight: 600; + line-height: 3rem; + letter-spacing: -0.025rem; + margin: 1rem 0 1.25rem; + } + + button { + padding: 0.25rem 0.75rem; + border-radius: 0.375rem; + background: var(--surface-900); + text-align: center; + width: 100%; + outline: none; + border: none; + min-height: 2rem; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: var(--surface-700); + } + + color: var(--surface-0); + text-align: center; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + } + + &-included { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.25rem; + + p { + color: var(--surface-500); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + margin: 0; + } + } + } + + &-description { + color: var(--surface-500); + text-align: center; + font-size: 0.875rem; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + max-width: 46.75rem; + margin: 1.5rem auto 0; + } + + &-visit { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: -0.00875rem; + text-align: center; + margin: 1.5rem auto 0; + + a { + color: var(--primary-500); + text-decoration-line: underline; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + color: var(--primary-300); + } + } + } + } +} + +@media only screen and (max-width: 992px) { + .template { + &-license { + &-wrapper { + padding: 2.5rem 1.25rem; + border-radius: 1.25rem; + } + &-description{ + max-width: 36.5rem; + } + } + } +} +@media only screen and (max-width: 721px) { + .template { + &-license { + &-card { + width: 80%; + } + &-description{ + max-width: 32rem; + } + } + } +} + +@media only screen and (max-width: 576px) { + .template { + &-license { + &-wrapper { + padding: 1.5rem 1rem; + } + + &-card { + width: 100%; + padding: 1.25rem; + border-radius: 0.75rem; + } + } + } } \ No newline at end of file diff --git a/styles/layout/templates/_ultima.scss b/styles/layout/templates/_ultima.scss index fbc733410c..ca1c94d1db 100644 --- a/styles/layout/templates/_ultima.scss +++ b/styles/layout/templates/_ultima.scss @@ -3,12 +3,18 @@ &-hero { &-pattern { - width: 60rem; + width: 80rem; height: auto; position: absolute; - bottom: 0; - left: 0; + bottom: -26rem; + left: -22.5rem; z-index: 6; + mix-blend-mode: overlay; + } + + &-dashboard1, + &-dashboard2{ + border-radius: 0.42857rem; } } @@ -22,8 +28,9 @@ &-hero { &-pattern { - width: 80rem; - left: -5rem; + width: 90rem; + left: -25rem; + bottom: -10rem; } } }