diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js new file mode 100644 index 0000000000..27b65ba457 --- /dev/null +++ b/components/templates/TemplateConfiguration.js @@ -0,0 +1,32 @@ +import React from 'react' + +const TemplateConfiguration = ({ + title = "", + description = "", + configType = "ANGULAR" +}) => { + return ( +
+
+
+
+
+
+
+
+
+

> npm install -g angular-cli

+

> ng new my-apollo-app

+

> cd my-apollo-app

+

> ng serve

+ Angular 3D Logo +
+
+

{title}

+

{description}

+
+
+ ) +} + +export default TemplateConfiguration \ No newline at end of file diff --git a/components/templates/TemplateFeaturesType1.js b/components/templates/TemplateFeaturesType1.js new file mode 100644 index 0000000000..7909de1693 --- /dev/null +++ b/components/templates/TemplateFeaturesType1.js @@ -0,0 +1,27 @@ +import React from 'react' + +const TemplateFeaturesType1 = ({ featuresData }) => { + return ( +
+
+ {featuresData.map((data, i) => ( +
+
+ {data.title} +
+
+
+ {data.title} +
+

+ {data.description} +

+
+
+ ))} +
+
+ ) +} + +export default TemplateFeaturesType1 \ No newline at end of file diff --git a/components/templates/TemplateFeaturesType2.js b/components/templates/TemplateFeaturesType2.js new file mode 100644 index 0000000000..d0db976c46 --- /dev/null +++ b/components/templates/TemplateFeaturesType2.js @@ -0,0 +1,19 @@ +import React from 'react' + +const TemplateFeaturesType2 = ({ featuresData }) => { + return ( +
+
+ {featuresData.map((data, i) => ( +
+ {data.title} +

{data.title}

+

{data.description}

+
+ ))} +
+
+ ) +} + +export default TemplateFeaturesType2 \ No newline at end of file diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js new file mode 100644 index 0000000000..88c98eaed9 --- /dev/null +++ b/components/templates/TemplateRelated.js @@ -0,0 +1,20 @@ +import React from 'react' + +const TemplateRelated = ({ relatedData }) => { + return ( +
+
+

Related Layouts

+
+ {relatedData.map((data, i) => ( + + {"Related + + ))} +
+
+
+ ) +} + +export default TemplateRelated \ No newline at end of file diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js new file mode 100644 index 0000000000..4d31209690 --- /dev/null +++ b/components/templates/TemplateSeparator.js @@ -0,0 +1,15 @@ +import React from 'react' + +const TemplateSeparator = ({ separatorLogo }) => { + return ( +
+ + + {separatorLogo} + + +
+ ) +} + +export default TemplateSeparator \ No newline at end of file diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js new file mode 100644 index 0000000000..186e0d8a14 --- /dev/null +++ b/components/templates/TemplateYoutube.js @@ -0,0 +1,42 @@ +import React, { useState } from 'react' +import { Dialog } from '../lib/primereact.all' + +const TemplateYoutube = ({ + playIcon, + imgSrc, + title = ["Integration with", "Existing Vite Applications"], + description = "Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.", + youtubeLink = "https://www.youtube.com/embed/Y07edRJd5QM" +}) => { + const [youtubeVideoVisible, setYoutubeVideoVisible] = useState(false); + + return ( +
+
+
+ {title.map((data, i) => ( +

{data}

+ ))} +
+
+ {description} +
+
setYoutubeVideoVisible(true)}> +
+
+ {playIcon} +
+
+ Template Youtube Screen +
+ setYoutubeVideoVisible(false)}> +
+ +
+ +
+
+ ) +} + +export default TemplateYoutube \ No newline at end of file diff --git a/pages/templates/apollo/ApolloFeaturesSection.js b/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js similarity index 56% rename from pages/templates/apollo/ApolloFeaturesSection.js rename to components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js index a2a799f236..0b2f8102f0 100644 --- a/pages/templates/apollo/ApolloFeaturesSection.js +++ b/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js @@ -1,18 +1,26 @@ import React, { useRef } from 'react' -import useAnimatedFeatures from './useAnimatedFeatures '; -import ApolloFeaturesInline from './ApolloFeaturesInline'; +import useAnimatedFeatures from './useAnimatedFeatures'; +import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline'; -const ApolloFeaturesSection = ({ featuresData }) => { +const TemplateFeaturesAnimation = ({ featuresData, title }) => { const animationRef = useRef(null) const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length); - + return ( -
-
+
+ {!!title && +
+ {title.map((data, i) => ( +

{data}

+ ))} +
} +
{featuresData.map((data, i) => (
handleClick(data.id)}> -
{i + 1}
+
+ 0{i + 1} +
{data.title}

{data.description}

@@ -22,7 +30,7 @@ const ApolloFeaturesSection = ({ featuresData }) => {
{featuresData[selectedID - 1]?.type === "inline-animation" ? - + : Animation Feature Image}
@@ -30,4 +38,4 @@ const ApolloFeaturesSection = ({ featuresData }) => { ) } -export default ApolloFeaturesSection \ No newline at end of file +export default TemplateFeaturesAnimation \ No newline at end of file diff --git a/pages/templates/apollo/ApolloFeaturesInline.js b/components/templates/templatefeaturesanimation/TemplateFeaturesAnimationInline.js similarity index 55% rename from pages/templates/apollo/ApolloFeaturesInline.js rename to components/templates/templatefeaturesanimation/TemplateFeaturesAnimationInline.js index f9a3697962..b05369e5d7 100644 --- a/pages/templates/apollo/ApolloFeaturesInline.js +++ b/components/templates/templatefeaturesanimation/TemplateFeaturesAnimationInline.js @@ -1,27 +1,27 @@ import React, { useRef } from 'react' -import useAnimatedFeatures from './useAnimatedFeatures '; +import useAnimatedFeatures from './useAnimatedFeatures'; -const ApolloFeaturesInline = ({ inlineFeaturesData, parentHandleClick, parentID }) => { - const animationRef = useRef(null) - const { selectedID, handleClick } = useAnimatedFeatures(animationRef, inlineFeaturesData.length,1000); +const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentID }) => { + const animationInlineRef = useRef(null) + const { selectedID, handleClick } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, 1000); - const handleBtnClick=(id)=>{ + const handleBtnClick = (id) => { handleClick(id) parentHandleClick(parentID) } return ( -
+
{inlineFeaturesData.map((data, i) => ( - + ))}
- Animation Inline Feature Image + Animation Inline Feature Image
) } -export default ApolloFeaturesInline \ No newline at end of file +export default TemplateFeaturesAnimationInline \ No newline at end of file diff --git a/pages/templates/apollo/useAnimatedFeatures .js b/components/templates/templatefeaturesanimation/useAnimatedFeatures.js similarity index 100% rename from pages/templates/apollo/useAnimatedFeatures .js rename to components/templates/templatefeaturesanimation/useAnimatedFeatures.js diff --git a/pages/templates/apollo/useVisible.js b/components/templates/templatefeaturesanimation/useVisible.js similarity index 84% rename from pages/templates/apollo/useVisible.js rename to components/templates/templatefeaturesanimation/useVisible.js index 7be7c28275..7ff3ac7b8f 100644 --- a/pages/templates/apollo/useVisible.js +++ b/components/templates/templatefeaturesanimation/useVisible.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; - -const useVisible = (element, rootMargin=0.2) => { + +const useVisible = (element, rootMargin = 0.2) => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { @@ -16,7 +16,7 @@ const useVisible = (element, rootMargin=0.2) => { } return () => { - if(observer && element.current){ + if (observer && element.current) { observer.unobserve(element.current) } } diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js index adbd672354..e1bbf3a1e5 100644 --- a/pages/templates/apollo/index.js +++ b/pages/templates/apollo/index.js @@ -1,8 +1,12 @@ import React from 'react'; -import { useRef } from 'react'; import ApolloPlayIcon from './ApolloPlayIcon'; -import useAnimatedFeatures from './useAnimatedFeatures '; -import ApolloFeaturesSection from './ApolloFeaturesSection'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; const apolloFeatures1Data = [ { @@ -118,38 +122,38 @@ const animationFeaturesData2 = [ type: "inline-animation", inlineFeaturesData: [ { - id:1, - title:"Static", + id: 1, + title: "Static", src: "/images/templates/apollo/Static.png", }, { - id:2, - title:"Slim", + id: 2, + title: "Slim", src: "/images/templates/apollo/Slim.png", }, { - id:3, - title:"Reveal", + id: 3, + title: "Reveal", src: "/images/templates/apollo/Reveal.png", }, { - id:4, - title:"Horizontal", + id: 4, + title: "Horizontal", src: "/images/templates/apollo/Horizontal.png", }, { - id:5, - title:"Overlay", + id: 5, + title: "Overlay", src: "/images/templates/apollo/Overlay.png", }, { - id:6, - title:"Slim+", + id: 6, + title: "Slim+", src: "/images/templates/apollo/Slim+.png", }, { - id:7, - title:"Drawer", + id: 7, + title: "Drawer", src: "/images/templates/apollo/Drawer.png", }, ], @@ -164,19 +168,15 @@ const animationFeaturesData2 = [ const ApolloSeparator = () => { return ( -
- - - - - - - - - - - -
+ + + + + + + + } /> ) } @@ -210,95 +210,19 @@ const ApolloPage = () => { Dashboard Image 2
-
-
-
-

Integration with

-

Existing Vite Applications

-
-
- Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation. -
-
-
-
- -
-
- Apollo Youtube Screen -
-
-
+ } imgSrc={"/images/templates/apollo/apollo-youtube-screen.png"} /> - + -
-
- {apolloFeatures1Data.map((data, i) => ( -
-
- {data.title} -
-
-
- {data.title} -
-

- {data.description} -

-
-
- ))} -
-
+ -
-
-
-
-
-
-
-
-
-

> npm install -g angular-cli

-

> ng new my-apollo-app

-

> cd my-apollo-app

-

> ng serve

- Angular 3D Logo -
-
-

Angular with CLI

-

Apollo is powered by Angular CLI to get started in no time following the best practices like service based component interaction modular design and strict mode support

-
-
+ - + -
-
- {apolloFeatures2Data.map((data, i) => ( -
- {data.title} -

{data.title}

-

{data.description}

-
- ))} -
-
+ -
-
-

Related Layouts

-
- {apolloRelatedData.map((data, i) => ( - - {"Related - - ))} -
-
-
+
); }; diff --git a/pages/templates/atlantis/AtlantisPlayIcon.js b/pages/templates/atlantis/AtlantisPlayIcon.js new file mode 100644 index 0000000000..b1abd3c9d6 --- /dev/null +++ b/pages/templates/atlantis/AtlantisPlayIcon.js @@ -0,0 +1,22 @@ +// 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 new file mode 100644 index 0000000000..63ae2e5848 --- /dev/null +++ b/pages/templates/atlantis/index.js @@ -0,0 +1,203 @@ +import React from 'react'; +import AtlantisPlayIcon from './AtlantisPlayIcon'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + + +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/atlantis/atlantis-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: "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: "Customizable Design", + description: "Fully customizable with a mixture of Sass and CSS variables.", + src: "/images/templates/apollo/apollo-features2-customizable.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/atlantis/atlantis-features2-ready.png" + }, + { + title: "Mobile Experience", + description: "Touch optimized enhanced mobile experience with responsive design.", + src: "/images/templates/atlantis/atlantis-features2-mobile.png" + } +]; + +const apolloRelatedData = [ + { + src: "/images/templates/related-atlantis.png", + href: "" + }, + { + src: "/images/templates/related-avalon.png", + href: "" + }, + { + src: "/images/templates/related-diamond.png", + href: "" + }, +] + +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: "Apollo 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: "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 PrimeVue 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" + }, +] + +const animationFeaturesData2 = [ + { + id: 1, + title: "Light and Dark Modes", + description: "The stunning dark and light modes will impress your users.", + src: "/images/templates/atlantis/features-animation-darkmode.png" + }, + { + id: 2, + title: "Component Themes", + description: "Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.", + src: "/images/templates/atlantis/features-animation-component-themes.png" + }, + { + id: 3, + title: "7 Menu Orientations", + description: "Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.", + src: "/images/templates/atlantis/features-animation-orientations.png", + type: "inline-animation", + inlineFeaturesData: [ + { + id: 1, + title: "Static", + src: "/images/templates/atlantis/Static.png", + }, + { + id: 2, + title: "Slim", + src: "/images/templates/atlantis/Slim.png", + }, + { + id: 3, + title: "Reveal", + src: "/images/templates/atlantis/Reveal.png", + }, + { + id: 4, + title: "Horizontal", + src: "/images/templates/atlantis/Horizontal.png", + }, + { + id: 5, + title: "Overlay", + src: "/images/templates/atlantis/Overlay.png", + }, + { + id: 6, + title: "Slim+", + src: "/images/templates/atlantis/Slim+.png", + }, + { + id: 7, + title: "Drawer", + src: "/images/templates/atlantis/Drawer.png", + }, + ], + }, +] + +const AtlantisSeperator = () => { + return ( + + + + + + } /> + ) +} + +const AtlantisPage = () => { + + return ( +
+
+ Apollo Pattern + Apollo Pattern + Apollo Pattern +
+ Apollo Logo +

Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.

+
+ + +
+ +
+ Dashboard Image 1 + Dashboard Image 2 +
+ + } imgSrc={"/images/templates/atlantis/atlantis-youtube-screen.png"} /> + + + + + + + + + + +
+ ); +}; + +export default AtlantisPage; \ No newline at end of file diff --git a/pages/templates/diamond/DiamondPlayIcon.js b/pages/templates/diamond/DiamondPlayIcon.js new file mode 100644 index 0000000000..7d6157b8db --- /dev/null +++ b/pages/templates/diamond/DiamondPlayIcon.js @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default () => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js new file mode 100644 index 0000000000..7048369504 --- /dev/null +++ b/pages/templates/diamond/index.js @@ -0,0 +1,209 @@ +import React from 'react'; +import DiamondPlayIcon from './DiamondPlayIcon'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + + +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/atlantis/atlantis-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: "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: "Customizable Design", + description: "Fully customizable with a mixture of Sass and CSS variables.", + src: "/images/templates/apollo/apollo-features2-customizable.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/atlantis/atlantis-features2-ready.png" + }, + { + title: "Mobile Experience", + description: "Touch optimized enhanced mobile experience with responsive design.", + src: "/images/templates/atlantis/atlantis-features2-mobile.png" + } +]; + +const apolloRelatedData = [ + { + src: "/images/templates/related-atlantis.png", + href: "" + }, + { + src: "/images/templates/related-avalon.png", + href: "" + }, + { + src: "/images/templates/related-diamond.png", + href: "" + }, +] + +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: "Apollo 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: "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 PrimeVue 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" + }, +] + +const animationFeaturesData2 = [ + { + id: 1, + title: "Light and Dark Modes", + description: "The stunning dark and light modes will impress your users.", + src: "/images/templates/atlantis/features-animation-darkmode.png" + }, + { + id: 2, + title: "Component Themes", + description: "Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.", + src: "/images/templates/atlantis/features-animation-component-themes.png" + }, + { + id: 3, + title: "7 Menu Orientations", + description: "Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.", + src: "/images/templates/atlantis/features-animation-orientations.png", + type: "inline-animation", + inlineFeaturesData: [ + { + id: 1, + title: "Static", + src: "/images/templates/atlantis/Static.png", + }, + { + id: 2, + title: "Slim", + src: "/images/templates/atlantis/Slim.png", + }, + { + id: 3, + title: "Reveal", + src: "/images/templates/atlantis/Reveal.png", + }, + { + id: 4, + title: "Horizontal", + src: "/images/templates/atlantis/Horizontal.png", + }, + { + id: 5, + title: "Overlay", + src: "/images/templates/atlantis/Overlay.png", + }, + { + id: 6, + title: "Slim+", + src: "/images/templates/atlantis/Slim+.png", + }, + { + id: 7, + title: "Drawer", + src: "/images/templates/atlantis/Drawer.png", + }, + ], + }, +] + +const DiamondSeperator = () => { + return ( + + + + + + + + + + + + + + } /> + ) +} + +const DiamondPage = () => { + + return ( +
+
+ Apollo Pattern +
+ Apollo Logo +

Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.

+
+ + +
+ +
+ Dashboard Image 1 + Dashboard Image 2 +
+ + } imgSrc={"/images/templates/diamond/diamond-youtube-screen.png"} /> + + + + + + + + + + +
+ ); +}; + +export default DiamondPage; \ No newline at end of file diff --git a/pages/templates/freya/FreyaPlayIcon.js b/pages/templates/freya/FreyaPlayIcon.js new file mode 100644 index 0000000000..b42921883f --- /dev/null +++ b/pages/templates/freya/FreyaPlayIcon.js @@ -0,0 +1,22 @@ +// 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 new file mode 100644 index 0000000000..535a418d8a --- /dev/null +++ b/pages/templates/freya/index.js @@ -0,0 +1,203 @@ +import React from 'react'; +import FreyaPlayIcon from './FreyaPlayIcon'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + + +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/atlantis/atlantis-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: "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: "Customizable Design", + description: "Fully customizable with a mixture of Sass and CSS variables.", + src: "/images/templates/apollo/apollo-features2-customizable.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/atlantis/atlantis-features2-ready.png" + }, + { + title: "Mobile Experience", + description: "Touch optimized enhanced mobile experience with responsive design.", + src: "/images/templates/atlantis/atlantis-features2-mobile.png" + } +]; + +const apolloRelatedData = [ + { + src: "/images/templates/related-atlantis.png", + href: "" + }, + { + src: "/images/templates/related-avalon.png", + href: "" + }, + { + src: "/images/templates/related-diamond.png", + href: "" + }, +] + +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: "Apollo 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: "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 PrimeVue 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" + }, +] + +const animationFeaturesData2 = [ + { + id: 1, + title: "Light and Dark Modes", + description: "The stunning dark and light modes will impress your users.", + src: "/images/templates/atlantis/features-animation-darkmode.png" + }, + { + id: 2, + title: "Component Themes", + description: "Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.", + src: "/images/templates/atlantis/features-animation-component-themes.png" + }, + { + id: 3, + title: "7 Menu Orientations", + description: "Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.", + src: "/images/templates/atlantis/features-animation-orientations.png", + type: "inline-animation", + inlineFeaturesData: [ + { + id: 1, + title: "Static", + src: "/images/templates/atlantis/Static.png", + }, + { + id: 2, + title: "Slim", + src: "/images/templates/atlantis/Slim.png", + }, + { + id: 3, + title: "Reveal", + src: "/images/templates/atlantis/Reveal.png", + }, + { + id: 4, + title: "Horizontal", + src: "/images/templates/atlantis/Horizontal.png", + }, + { + id: 5, + title: "Overlay", + src: "/images/templates/atlantis/Overlay.png", + }, + { + id: 6, + title: "Slim+", + src: "/images/templates/atlantis/Slim+.png", + }, + { + id: 7, + title: "Drawer", + src: "/images/templates/atlantis/Drawer.png", + }, + ], + }, +] + +const FreyaSeparator = () => { + return ( + + + + + + } /> + ) +} + +const FreyaPage = () => { + + return ( +
+
+ Apollo Pattern + Apollo Pattern + Apollo Pattern +
+ Apollo Logo +

Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.

+
+ + +
+ +
+ Dashboard Image 1 + Dashboard Image 2 +
+ + } imgSrc={"/images/templates/freya/freya-youtube-screen.png"} /> + + + + + + + + + + +
+ ); +}; + +export default FreyaPage; \ No newline at end of file diff --git a/pages/templates/ultima/UltimaPlayIcon.js b/pages/templates/ultima/UltimaPlayIcon.js new file mode 100644 index 0000000000..3e86fddc65 --- /dev/null +++ b/pages/templates/ultima/UltimaPlayIcon.js @@ -0,0 +1,22 @@ +// 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 new file mode 100644 index 0000000000..bf81469381 --- /dev/null +++ b/pages/templates/ultima/index.js @@ -0,0 +1,203 @@ +import React from 'react'; +import UltimaPlayIcon from './UltimaPlayIcon'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + + +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/ultima/ultima-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: "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: "Customizable Design", + description: "Fully customizable with a mixture of Sass and CSS variables.", + src: "/images/templates/apollo/apollo-features2-customizable.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/ultima/ultima-features2-ready.png" + }, + { + title: "Mobile Experience", + description: "Touch optimized enhanced mobile experience with responsive design.", + src: "/images/templates/ultima/ultima-features2-mobile.png" + } +]; + +const apolloRelatedData = [ + { + src: "/images/templates/related-atlantis.png", + href: "" + }, + { + src: "/images/templates/related-avalon.png", + href: "" + }, + { + src: "/images/templates/related-diamond.png", + href: "" + }, +] + +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: "Apollo 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: "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 PrimeVue 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" + }, +] + +const animationFeaturesData2 = [ + { + id: 1, + title: "Light and Dark Modes", + description: "The stunning dark and light modes will impress your users.", + 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.", + src: "/images/templates/ultima/features-animation-component-themes.png" + }, + { + id: 3, + title: "7 Menu Orientations", + description: "Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.", + src: "/images/templates/atlantis/features-animation-orientations.png", + type: "inline-animation", + inlineFeaturesData: [ + { + id: 1, + title: "Static", + src: "/images/templates/atlantis/Static.png", + }, + { + id: 2, + title: "Slim", + src: "/images/templates/atlantis/Slim.png", + }, + { + id: 3, + title: "Reveal", + src: "/images/templates/atlantis/Reveal.png", + }, + { + id: 4, + title: "Horizontal", + src: "/images/templates/atlantis/Horizontal.png", + }, + { + id: 5, + title: "Overlay", + src: "/images/templates/atlantis/Overlay.png", + }, + { + id: 6, + title: "Slim+", + src: "/images/templates/atlantis/Slim+.png", + }, + { + id: 7, + title: "Drawer", + src: "/images/templates/atlantis/Drawer.png", + }, + ], + }, +] + +const UltimaSeperator = () => { + return ( + + + + + + } /> + ) +} + +const UltimaPage = () => { + + return ( +
+
+ Apollo Pattern + Apollo Pattern + Apollo Pattern +
+ Apollo Logo +

Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.

+
+ + +
+ +
+ Dashboard Image 1 + Dashboard Image 2 +
+ + } imgSrc={"/images/templates/ultima/ultima-youtube-screen.png"} /> + + + + + + + + + + +
+ ); +}; + +export default UltimaPage; \ No newline at end of file diff --git a/pages/templates/verona/VeronaPlayIcon.js b/pages/templates/verona/VeronaPlayIcon.js new file mode 100644 index 0000000000..4b76bfbb00 --- /dev/null +++ b/pages/templates/verona/VeronaPlayIcon.js @@ -0,0 +1,22 @@ +// 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 new file mode 100644 index 0000000000..84c36b5caf --- /dev/null +++ b/pages/templates/verona/index.js @@ -0,0 +1,257 @@ +import React from 'react'; +import VeronaPlayIcon from './VeronaPlayIcon'; +import TemplateYoutube from '@/components/templates/TemplateYoutube'; +import TemplateFeaturesType1 from '@/components/templates/TemplateFeaturesType1'; +import TemplateFeaturesType2 from '@/components/templates/TemplateFeaturesType2'; +import TemplateConfiguration from '@/components/templates/TemplateConfiguration'; +import TemplateRelated from '@/components/templates/TemplateRelated'; +import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation'; +import TemplateSeparator from '@/components/templates/TemplateSeparator'; + + +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/ultima/ultima-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: "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: "Customizable Design", + description: "Fully customizable with a mixture of Sass and CSS variables.", + src: "/images/templates/apollo/apollo-features2-customizable.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/ultima/ultima-features2-ready.png" + }, + { + title: "Mobile Experience", + description: "Touch optimized enhanced mobile experience with responsive design.", + src: "/images/templates/ultima/ultima-features2-mobile.png" + } +]; + +const apolloRelatedData = [ + { + src: "/images/templates/related-atlantis.png", + href: "" + }, + { + src: "/images/templates/related-avalon.png", + href: "" + }, + { + src: "/images/templates/related-diamond.png", + href: "" + }, +] + +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: "Apollo 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: "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 PrimeVue 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" + }, +] + +const animationFeaturesData2 = [ + { + id: 1, + title: "Light and Dark Modes", + description: "The stunning dark and light modes will impress your users.", + 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.", + src: "/images/templates/ultima/features-animation-component-themes.png" + }, + { + id: 3, + title: "7 Menu Orientations", + description: "Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.", + src: "/images/templates/atlantis/features-animation-orientations.png", + type: "inline-animation", + inlineFeaturesData: [ + { + id: 1, + title: "Static", + src: "/images/templates/atlantis/Static.png", + }, + { + id: 2, + title: "Slim", + src: "/images/templates/atlantis/Slim.png", + }, + { + id: 3, + title: "Reveal", + src: "/images/templates/atlantis/Reveal.png", + }, + { + id: 4, + title: "Horizontal", + src: "/images/templates/atlantis/Horizontal.png", + }, + { + id: 5, + title: "Overlay", + src: "/images/templates/atlantis/Overlay.png", + }, + { + id: 6, + title: "Slim+", + src: "/images/templates/atlantis/Slim+.png", + }, + { + id: 7, + title: "Drawer", + src: "/images/templates/atlantis/Drawer.png", + }, + ], + }, +] + +const VeronaSeperator = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } /> + ) +} + +const UltimaPage = () => { + + return ( +
+
+ Apollo Pattern + Apollo Pattern + Apollo Pattern +
+ Apollo Logo +

Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.

+
+ + +
+ +
+ Dashboard Image 1 + Dashboard Image 2 +
+ + } imgSrc={"/images/templates/verona/verona-youtube-screen.png"} /> + + + + + + + + + + +
+ ); +}; + +export default UltimaPage; \ No newline at end of file diff --git a/public/images/templates/apollo/Vector1.png b/public/images/templates/apollo/Vector1.png new file mode 100644 index 0000000000..85e370df6a Binary files /dev/null and b/public/images/templates/apollo/Vector1.png differ diff --git a/public/images/templates/apollo/Vector2.png b/public/images/templates/apollo/Vector2.png new file mode 100644 index 0000000000..78f4f2fc68 Binary files /dev/null and b/public/images/templates/apollo/Vector2.png differ diff --git a/public/images/templates/apollo/Vector3.png b/public/images/templates/apollo/Vector3.png new file mode 100644 index 0000000000..ae76c14ca1 Binary files /dev/null and b/public/images/templates/apollo/Vector3.png differ diff --git a/public/images/templates/apollo/Vector4.png b/public/images/templates/apollo/Vector4.png new file mode 100644 index 0000000000..6cbf25acd7 Binary files /dev/null and b/public/images/templates/apollo/Vector4.png differ diff --git a/public/images/templates/apollo/apollo-youtube-screen.png b/public/images/templates/apollo/apollo-youtube-screen.png index 7b33efc692..6d4a8dd347 100644 Binary files a/public/images/templates/apollo/apollo-youtube-screen.png and b/public/images/templates/apollo/apollo-youtube-screen.png differ diff --git a/public/images/templates/atlantis/Drawer.png b/public/images/templates/atlantis/Drawer.png new file mode 100644 index 0000000000..58b383d62f Binary files /dev/null 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 new file mode 100644 index 0000000000..26607b4a04 Binary files /dev/null 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 new file mode 100644 index 0000000000..ca69186d96 Binary files /dev/null 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 new file mode 100644 index 0000000000..5ff7e51599 Binary files /dev/null and b/public/images/templates/atlantis/Reveal.png differ diff --git a/public/images/templates/atlantis/Screen.png b/public/images/templates/atlantis/Screen.png new file mode 100644 index 0000000000..a9842b5ba3 Binary files /dev/null and b/public/images/templates/atlantis/Screen.png differ diff --git a/public/images/templates/atlantis/Slim+.png b/public/images/templates/atlantis/Slim+.png new file mode 100644 index 0000000000..eac70faa2b Binary files /dev/null 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 new file mode 100644 index 0000000000..21af81aae9 Binary files /dev/null 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 new file mode 100644 index 0000000000..81bb943876 Binary files /dev/null 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 new file mode 100644 index 0000000000..41243eb19d Binary files /dev/null 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 new file mode 100644 index 0000000000..27f97edaf1 Binary files /dev/null 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 new file mode 100644 index 0000000000..cb20ae0d22 Binary files /dev/null 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 new file mode 100644 index 0000000000..43508d3566 Binary files /dev/null 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 new file mode 100644 index 0000000000..bf9a259113 Binary files /dev/null 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 new file mode 100644 index 0000000000..2b7555bc00 Binary files /dev/null and b/public/images/templates/atlantis/atlantis-hero-light.png differ diff --git a/public/images/templates/atlantis/atlantis-hero-logo.svg b/public/images/templates/atlantis/atlantis-hero-logo.svg new file mode 100644 index 0000000000..4f213a7e5c --- /dev/null +++ b/public/images/templates/atlantis/atlantis-hero-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/templates/atlantis/atlantis-hero-pattern.png b/public/images/templates/atlantis/atlantis-hero-pattern.png new file mode 100644 index 0000000000..b7aff91bdd Binary files /dev/null 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 new file mode 100644 index 0000000000..9076208971 Binary files /dev/null and b/public/images/templates/atlantis/atlantis-hero-rectangle1.png differ diff --git a/public/images/templates/atlantis/atlantis-youtube-screen.png b/public/images/templates/atlantis/atlantis-youtube-screen.png new file mode 100644 index 0000000000..d4f6dff775 Binary files /dev/null and b/public/images/templates/atlantis/atlantis-youtube-screen.png differ diff --git a/public/images/templates/atlantis/features-animation-component-themes.png b/public/images/templates/atlantis/features-animation-component-themes.png new file mode 100644 index 0000000000..95da241a71 Binary files /dev/null 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 new file mode 100644 index 0000000000..1aaec42e0f Binary files /dev/null and b/public/images/templates/atlantis/features-animation-darkmode.png differ diff --git a/public/images/templates/atlantis/features-animation-orientations.png b/public/images/templates/atlantis/features-animation-orientations.png new file mode 100644 index 0000000000..ab04054129 Binary files /dev/null and b/public/images/templates/atlantis/features-animation-orientations.png differ diff --git a/public/images/templates/diamond/diamond-hero-dashboard1.png b/public/images/templates/diamond/diamond-hero-dashboard1.png new file mode 100644 index 0000000000..4a01e243bc Binary files /dev/null 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 new file mode 100644 index 0000000000..2ea9c162f5 Binary files /dev/null and b/public/images/templates/diamond/diamond-hero-dashboard2.png differ diff --git a/public/images/templates/diamond/diamond-hero-logo.svg b/public/images/templates/diamond/diamond-hero-logo.svg new file mode 100644 index 0000000000..7d1cfd22b1 --- /dev/null +++ b/public/images/templates/diamond/diamond-hero-logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/templates/diamond/diamond-hero-pattern.png b/public/images/templates/diamond/diamond-hero-pattern.png new file mode 100644 index 0000000000..15d0e60c70 Binary files /dev/null and b/public/images/templates/diamond/diamond-hero-pattern.png differ diff --git a/public/images/templates/diamond/diamond-youtube-screen.png b/public/images/templates/diamond/diamond-youtube-screen.png new file mode 100644 index 0000000000..0455fab430 Binary files /dev/null and b/public/images/templates/diamond/diamond-youtube-screen.png differ diff --git a/public/images/templates/freya/freya-hero-dashboard1.png b/public/images/templates/freya/freya-hero-dashboard1.png new file mode 100644 index 0000000000..1eabe664c7 Binary files /dev/null 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 new file mode 100644 index 0000000000..86feeef362 Binary files /dev/null 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 new file mode 100644 index 0000000000..bd9a79a483 Binary files /dev/null and b/public/images/templates/freya/freya-hero-light.png differ diff --git a/public/images/templates/freya/freya-hero-logo.svg b/public/images/templates/freya/freya-hero-logo.svg new file mode 100644 index 0000000000..8760d19995 --- /dev/null +++ b/public/images/templates/freya/freya-hero-logo.svg @@ -0,0 +1,14 @@ + + + diff --git a/public/images/templates/freya/freya-hero-pattern.png b/public/images/templates/freya/freya-hero-pattern.png new file mode 100644 index 0000000000..2f2ff8e9dc Binary files /dev/null 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 new file mode 100644 index 0000000000..d13783bcd0 Binary files /dev/null and b/public/images/templates/freya/freya-hero-rectangle1.png differ diff --git a/public/images/templates/freya/freya-youtube-screen.png b/public/images/templates/freya/freya-youtube-screen.png new file mode 100644 index 0000000000..2f38f8a9bd Binary files /dev/null and b/public/images/templates/freya/freya-youtube-screen.png differ diff --git a/public/images/templates/react-3d-logo.png b/public/images/templates/react-3d-logo.png new file mode 100644 index 0000000000..20c0085ed9 Binary files /dev/null and b/public/images/templates/react-3d-logo.png differ diff --git a/public/images/templates/ultima/features-animation-component-themes.png b/public/images/templates/ultima/features-animation-component-themes.png new file mode 100644 index 0000000000..afcb15396b Binary files /dev/null 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 new file mode 100644 index 0000000000..d7948e9b15 Binary files /dev/null and b/public/images/templates/ultima/features-animation-darkmode.png differ diff --git a/public/images/templates/ultima/ultima-features2-mobile.png b/public/images/templates/ultima/ultima-features2-mobile.png new file mode 100644 index 0000000000..c80f54693b Binary files /dev/null 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 new file mode 100644 index 0000000000..84f52a223e Binary files /dev/null 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 new file mode 100644 index 0000000000..f435760eb8 Binary files /dev/null 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 new file mode 100644 index 0000000000..42da70c2b2 Binary files /dev/null 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 new file mode 100644 index 0000000000..9eda70b593 Binary files /dev/null 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 new file mode 100644 index 0000000000..750af7199e Binary files /dev/null and b/public/images/templates/ultima/ultima-hero-light.png differ diff --git a/public/images/templates/ultima/ultima-hero-logo.svg b/public/images/templates/ultima/ultima-hero-logo.svg new file mode 100644 index 0000000000..7e5899ab86 --- /dev/null +++ b/public/images/templates/ultima/ultima-hero-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + diff --git a/public/images/templates/ultima/ultima-hero-pattern.png b/public/images/templates/ultima/ultima-hero-pattern.png new file mode 100644 index 0000000000..1634963e08 Binary files /dev/null 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 new file mode 100644 index 0000000000..bf1acf757b Binary files /dev/null and b/public/images/templates/ultima/ultima-hero-rectangle1.png differ diff --git a/public/images/templates/ultima/ultima-youtube-screen.png b/public/images/templates/ultima/ultima-youtube-screen.png new file mode 100644 index 0000000000..9bec72130c Binary files /dev/null and b/public/images/templates/ultima/ultima-youtube-screen.png differ diff --git a/public/images/templates/verona/verona-hero-dashboard1.png b/public/images/templates/verona/verona-hero-dashboard1.png new file mode 100644 index 0000000000..1fc3d46b02 Binary files /dev/null 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 new file mode 100644 index 0000000000..169914930d Binary files /dev/null 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 new file mode 100644 index 0000000000..2e97bd7e19 Binary files /dev/null and b/public/images/templates/verona/verona-hero-light.png differ diff --git a/public/images/templates/verona/verona-hero-logo.svg b/public/images/templates/verona/verona-hero-logo.svg new file mode 100644 index 0000000000..2b03efab35 --- /dev/null +++ b/public/images/templates/verona/verona-hero-logo.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/templates/verona/verona-hero-pattern.png b/public/images/templates/verona/verona-hero-pattern.png new file mode 100644 index 0000000000..bae6e7f4c5 Binary files /dev/null and b/public/images/templates/verona/verona-hero-pattern.png differ diff --git a/public/images/templates/verona/verona-hero-rectangle1.png b/public/images/templates/verona/verona-hero-rectangle1.png new file mode 100644 index 0000000000..8d66852c8d Binary files /dev/null and b/public/images/templates/verona/verona-hero-rectangle1.png differ diff --git a/public/images/templates/verona/verona-youtube-screen.png b/public/images/templates/verona/verona-youtube-screen.png new file mode 100644 index 0000000000..09127e0a20 Binary files /dev/null and b/public/images/templates/verona/verona-youtube-screen.png differ diff --git a/public/images/templates/vue-3d-logo.png b/public/images/templates/vue-3d-logo.png new file mode 100644 index 0000000000..24058abd89 Binary files /dev/null and b/public/images/templates/vue-3d-logo.png differ diff --git a/styles/layout/_mixins.scss b/styles/layout/_mixins.scss index e7827cb57d..6c13e91b11 100644 --- a/styles/layout/_mixins.scss +++ b/styles/layout/_mixins.scss @@ -7,7 +7,7 @@ } @mixin mobile { - @media (max-width: 800px) { + @media (max-width: 900px) { @content; } } \ No newline at end of file diff --git a/styles/layout/layout.scss b/styles/layout/layout.scss index 23c4acd28c..8f1f133f66 100644 --- a/styles/layout/layout.scss +++ b/styles/layout/layout.scss @@ -16,3 +16,9 @@ @import './_responsive'; @import './landing/_landing'; @import './templates/_apollo'; +@import './templates/_atlantis'; +@import './templates/_ultima'; +@import './templates/_freya'; +@import './templates/_verona'; +@import './templates/_diamond'; +@import './templates/_templates'; \ No newline at end of file diff --git a/styles/layout/templates/_apollo.scss b/styles/layout/templates/_apollo.scss index 43eea95428..d2c78d41da 100644 --- a/styles/layout/templates/_apollo.scss +++ b/styles/layout/templates/_apollo.scss @@ -33,7 +33,7 @@ font-size: 0.875rem; font-weight: 400; line-height: normal; - margin-top: 1rem; + margin: 1rem 0 0; } &-buttons { @@ -98,7 +98,7 @@ } &-dashboard1 { - z-index: 4; + z-index: 7; position: absolute; top: 2.02rem; left: 60rem; @@ -107,7 +107,7 @@ } &-dashboard2 { - z-index: 3; + z-index: 6; position: absolute; top: 2.02rem; left: 42rem; @@ -121,7 +121,7 @@ position: absolute; bottom: 0; left: 0; - z-index: 2; + z-index: 1; mix-blend-mode: overlay; } @@ -131,67 +131,33 @@ position: absolute; top: 0; left: 0; - z-index: 1; + z-index: 4; + mix-blend-mode: screen; } &-light { width: 25.25rem; - height: auto; + height: 4rem; position: absolute; top: 0; left: 12rem; - z-index: 3; + z-index: 5; } } - &-features-animation { - border-radius: 2rem; - background: var(--surface-0, #FFF); - padding: 5rem; - } - - &-configuration { - padding: 5rem 0; - border-radius: 2rem; - background: var(--surface-0, #FFF); - } - - &-youtube { - padding: 5rem 7.5rem; - background-color: var(--surface-0); - border-radius: 2rem; - } - - &-features1 { - padding: 5rem 0; - border-radius: 2rem; - background: var(--surface-0, #FFF); - } - - &-features2 { - padding: 7rem 0; - border-radius: 2rem; - background: var(--surface-0, #FFF); - } - - &-related { - padding: 5rem 0; - border-radius: 2rem; - background: var(--surface-0, #FFF); - } } @include mobile { .apollo { &-hero { height: 53.25rem; - padding: 8rem 1.5rem 1.5rem; - + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; &-card { width: 100%; margin-left: 0rem; margin-top: 0rem; - + padding: 2rem 1.5rem; &-links { justify-content: center; } @@ -236,496 +202,3 @@ } } -.template { - &-youtube { - &-title { - h2 { - margin: 0; - text-align: center; - line-height: 4rem; - font-size: 3rem; - font-weight: 600; - color: var(--surface-900); - - @include mobile { - font-size: 1.5rem; - } - } - } - - &-description { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; - text-align: center; - color: var(--surface-900); - width: 45rem; - margin: 1.25rem auto 0; - - @include mobile { - font-size: 0.875rem; - line-height: 1.25rem; - width: auto; - } - } - - &-screen { - margin: 3rem auto 0; - width: 66.25rem; - - @include mobile { - width: 100%; - } - - border-radius: 1.3125rem; - background: #E0E0F7; - box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02); - - cursor: pointer; - position: relative; - - &-blur { - width: 100%; - position: absolute; - height: 100%; - top: 0; - left: 0; - z-index: 4; - backdrop-filter: blur(2px); - background: rgba(255, 255, 255, 0.06); - border-radius: 1.3125rem; - - @include mobile { - backdrop-filter: blur(0.6622641086578369px); - } - } - - &-play { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - z-index: 5; - } - - img { - width: 100%; - height: auto; - border-radius: 0.875rem; - } - } - } -} - -.template { - &-features1 { - display: flex; - gap: 1.5rem; - margin: 0 auto; - width: fit-content; - - @include mobile { - flex-direction: column; - } - - &-card { - padding: 1.25rem; - border-radius: 1.3125rem; - border: 1px solid var(--surface-200, #EEE); - background: var(--surface-0, #FFF); - width: 21.125rem; - - @include mobile { - border-radius: 1rem; - } - - &-top { - width: 100%; - margin-bottom: 1.25rem; - - img { - width: 100%; - } - } - - &-bottom { - &-title { - color: var(--surface-900); - font-size: 1.09375rem; - font-weight: 600; - line-height: 1.3125rem; - margin-top: 0; - margin-bottom: 0.75rem; - } - - &-description { - color: var(--surface-600); - font-size: 0.875rem; - font-weight: 400; - line-height: 1.3125rem; - margin: 0; - } - } - } - } -} - -.template { - &-features2 { - margin: 0 auto; - width: fit-content; - display: flex; - align-items: flex-start; - flex-wrap: wrap; - width: 52.75rem; - gap: 1.5rem; - - @include mobile { - width: 100%; - max-width: 40rem; - align-items: center; - justify-content: center; - } - - &-card { - width: 25.625rem; - padding: 1.25rem; - border-radius: 1.3125rem; - border: 1px solid var(--surface-200); - background: var(--surface-0); - - &-img { - height: 15.125rem; - width: auto; - } - - &-withMargin { - margin-top: 7.81rem; - - @include mobile { - margin-top: 0; - } - } - - &-withoutMargin { - margin-top: -7.81rem; - - @include mobile { - margin-top: 0; - } - } - - h2 { - margin: 1.25rem 0 0; - color: var(--surface-900, var(--surface-900, #212121)); - font-size: 1.09375rem; - font-weight: 600; - line-height: 1.3125rem; - } - - p { - margin: 0.75rem 0 0; - color: var(--surface-600, #757575); - font-size: 0.875rem; - font-weight: 400; - line-height: 1.3125rem; - } - } - } -} - -.template { - &-related { - &-title { - text-align: center; - color: var(--surface-900, var(--surface-900, #212121)); - font-size: 3rem; - font-weight: 600; - line-height: 3.5rem; - - @include mobile { - font-size: 1.5rem; - } - } - - &-slide { - display: flex; - width: fit-content; - margin: 3rem auto 0; - gap: 1.5rem; - - @include mobile { - flex-direction: column; - gap: 3rem; - } - - &-card { - border-radius: 1.3125rem; - border: 1px solid var(--surface-200, #EEE); - background: var(--surface-0, #FFF); - padding: 1.25rem; - - img { - width: 18.625rem; - height: auto; - border-radius: 0.65625rem; - } - - @include mobile { - border-radius: 1rem; - - img { - border-radius: 0.5rem; - } - } - } - } - } -} - -.template { - &-configuration { - padding: 2rem; - border-radius: 1.75rem; - border: 1px solid var(--surface-200, #EEE); - background: var(--surface-0, #FFF); - width: 49.25rem; - margin: 0 auto; - - @include mobile { - width: 21.9375rem; - padding: 1rem; - border-radius: 1rem; - } - - &-title { - font-size: 1.53125rem; - font-weight: 700; - line-height: 1.8125rem; - color: var(--surface-900, var(--surface-900, #212121)); - } - - &-description { - color: var(--surface-600, #757575); - font-size: 1.09375rem; - font-weight: 400; - line-height: 1.64375rem; - margin: 0.75rem 0 0; - } - - &-screen { - border-radius: 0.875rem; - border: 1px solid var(--surface-border, #DFE7EF); - - &-top { - border-radius: 0.75rem 0.75rem 0rem 0rem; - background: var(--surface-0, #FFF); - padding: 0.25rem 1.5rem; - height: 3.5rem; - display: flex; - align-items: center; - gap: 0.5rem; - - &-circle { - width: 0.75rem; - height: 0.75rem; - border-radius: 999px; - } - - &-close { - background-color: #ED6B5D; - } - - &-minimize { - background-color: #F4BE50; - } - - &-zoom { - background-color: #61C554; - } - } - - &-bottom { - padding: 1.5rem; - background: var(--surface-900, #212121); - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - display: flex; - flex-direction: column; - gap: 1rem; - position: relative; - - p { - color: var(--surface-0, #FFF); - font-size: 0.875rem; - font-weight: 400; - line-height: 1.0625rem; - margin: 0; - } - - &-logo { - width: 7.5rem; - height: 7.5rem; - position: absolute; - right: 1.5rem; - bottom: 1.38rem; - - @include mobile { - width: 5.25rem; - height: 5.25rem; - right: 0.88rem; - bottom: 0.88rem; - } - } - } - } - } -} - - -.template { - &-features-animation { - display: flex; - gap: 2.5rem; - width: fit-content; - margin: 0 auto; - padding: 1.75rem; - border-radius: 1.75rem; - border: 1px solid var(--surface-200, #EEE); - - &-left { - width: 30rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - - &-card { - padding: 1rem; - display: flex; - align-items: flex-start; - gap: 1.25rem; - cursor: pointer; - transition: all 0.2s ease; - - &-active { - border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); - transition: all 0.2s ease; - } - - &:hover { - border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); - } - - &-order { - font-size: 3rem; - font-weight: 700; - margin: 0; - color: white; - text-shadow: - 1px 1px 0 #9E9E9E, - -1px 1px 0 #9E9E9E, - -1px -1px 0 #9E9E9E, - 1px -1px 0 #9E9E9E; - } - - h5 { - color: var(--surface-900, var(--color-surface-900, #212121)); - font-size: 1.09375rem; - font-weight: 600; - line-height: 1.3125rem; - margin: 0; - } - - p { - color: var(--surface-600, #757575); - font-size: 0.875rem; - font-weight: 400; - line-height: 1.3125rem; - margin: 0.38rem 0 0; - } - } - } - - &-right { - width: 30rem; - - img { - width: 100%; - height: auto; - } - - &-inline { - width: 100%; - height: 100%; - border-radius: 0.75rem; - background: var(--surface-ground); - padding-top: 3.88rem; - position: relative; - - &-image{ - width: 25.4375rem; - margin: 1.25rem auto 0; - img{ - box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08); - border-radius: 0.25rem; - } - } - &-tabs { - display: flex; - align-items: center; - gap: 0.25rem; - border-radius: 2.5rem; - border: 1px solid var(--surface-border); - background: #FFF; - padding: 0.25rem; - width: fit-content; - margin: 0 auto 0; - - - button { - padding: 0.21875rem 0.5rem; - border-radius: 2.25rem; - color: var(--surface-900); - background: #fff; - border: none; - outline: none; - font-size: 0.75rem; - font-weight: 500; - line-height: 1rem; - letter-spacing: -0.015rem; - cursor: pointer; - transition: all 0.15s ease; - &:hover{ - background: var(--surface-ground); - } - - - } - &-btnActive { - background: var(--surface-ground) !important; - - } - } - } - } - } -} - -@include mobile { - .template { - &-features-animation { - flex-direction: column-reverse; - gap: 1.31rem; - - &-left { - width: 100%; - } - - &-right { - width: 100%; - } - } - } -} \ No newline at end of file diff --git a/styles/layout/templates/_atlantis.scss b/styles/layout/templates/_atlantis.scss new file mode 100644 index 0000000000..08aee8bf86 --- /dev/null +++ b/styles/layout/templates/_atlantis.scss @@ -0,0 +1,207 @@ +.atlantis { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: #063865; + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 26; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(18, 139, 253, 0.00) 0%, rgba(18, 139, 253, 0.50) 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(3px); + padding: 2.25rem 1.75rem; + + &-logo { + height: 2.5rem; + } + + p { + color: #FFF; + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + button { + height: 2.5rem; + flex: 1; + border-radius: 3rem; + color: #fff; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + transition: all 0.15s ease; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + + &:hover { + border-color: #2563EB; + background-color: #2563EB; + } + } + + &-btn2 { + border: 1px solid #3B82F6; + background: #3B82F6; + + &:hover { + background-color: #2563EB; + border-color: #2563EB; + } + } + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: #fff; + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-dashboard1 { + z-index: 3; + position: absolute; + top: 2.02rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-dashboard2 { + z-index: 2; + position: absolute; + top: 2.02rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-pattern { + width: 98rem; + height: 36rem; + position: absolute; + bottom: -0.75rem; + left: 2rem; + z-index: 1; + mix-blend-mode: overlay; + } + + &-rectangle1 { + width: 69.6875rem; + height: 36.25rem; + position: absolute; + top: 0; + left: 0; + z-index: 4; + mix-blend-mode: screen; + } + + &-light { + width: 25.25rem; + height: 4rem; + position: absolute; + top: 0; + left: 12rem; + z-index: 5; + } + } + +} + +@include mobile { + .atlantis { + &-hero { + height: 53.25rem; + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + + &-links { + justify-content: center; + } + } + + &-dashboard1 { + top: 30rem; + left: 12rem; + width: 28rem; + } + + &-dashboard2 { + top: 30rem; + left: 1.5rem; + width: 28rem; + } + + &-pattern { + width: 90rem; + bottom: 14.75rem; + left: 0.5rem; + } + + &-rectangle1 { + height: 49.125rem; + left: 10rem; + position: absolute; + top: 0; + left: -10.125rem; + z-index: 1; + } + + &-light { + width: 25.25rem; + height: 6rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 3; + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_diamond.scss b/styles/layout/templates/_diamond.scss new file mode 100644 index 0000000000..0543590f39 --- /dev/null +++ b/styles/layout/templates/_diamond.scss @@ -0,0 +1,206 @@ +.diamond { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: #282960; + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 26; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(41, 42, 97, 0.30) 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(3px); + padding: 2.25rem 1.75rem; + + &-logo { + height: 2.5rem; + } + + p { + color: #FFF; + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + button { + height: 2.5rem; + flex: 1; + border-radius: 3rem; + color: #fff; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + transition: all 0.15s ease; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + + &:hover { + border-color: #2563EB; + background-color: #2563EB; + } + } + + &-btn2 { + border: 1px solid #3B82F6; + background: #3B82F6; + + &:hover { + background-color: #2563EB; + border-color: #2563EB; + } + } + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: #fff; + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-dashboard1 { + z-index: 7; + position: absolute; + top: 2.02rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-dashboard2 { + z-index: 6; + position: absolute; + top: 2.02rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-pattern { + width: 62.3125rem; + height: 44.8125rem; + position: absolute; + top: -3.62; + left: -3.06; + z-index: 1; + } + + &-rectangle1 { + width: 69.6875rem; + height: 35.375rem; + position: absolute; + top: 0; + left: 0; + z-index: 4; + mix-blend-mode: screen; + } + + &-light { + width: 25.25rem; + height: 4rem; + position: absolute; + top: 0; + left: 12rem; + z-index: 5; + } + } + +} + +@include mobile { + .diamond { + &-hero { + height: 53.25rem; + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + &-links { + justify-content: center; + } + } + + &-dashboard1 { + top: 30rem; + left: 12rem; + width: 28rem; + } + + &-dashboard2 { + top: 30rem; + left: 1.5rem; + width: 28rem; + } + + &-pattern { + width: 60rem; + height: auto; + bottom: 0; + left: -8rem; + } + + &-rectangle1 { + height: 49.125rem; + left: 10rem; + position: absolute; + top: 0; + left: -10.125rem; + z-index: 1; + } + + &-light { + width: 25.25rem; + height: 6rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 3; + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_freya.scss b/styles/layout/templates/_freya.scss new file mode 100644 index 0000000000..4708a0568b --- /dev/null +++ b/styles/layout/templates/_freya.scss @@ -0,0 +1,204 @@ +.freya { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: #084A42; + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 26; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(18, 253, 225, 0.00) 0%, rgba(18, 253, 225, 0.50) 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(1.5px); + padding: 2.25rem 1.75rem; + + &-logo { + height: 2.5rem; + } + + p { + color: #FFF; + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + button { + height: 2.5rem; + flex: 1; + border-radius: 3rem; + color: #fff; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + transition: all 0.15s ease; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + + &:hover { + border-color: #2563EB; + background-color: #2563EB; + } + } + + &-btn2 { + border: 1px solid #3B82F6; + background: #3B82F6; + + &:hover { + background-color: #2563EB; + border-color: #2563EB; + } + } + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: #fff; + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-dashboard1 { + z-index: 4; + position: absolute; + top: 2.02rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-dashboard2 { + z-index: 3; + position: absolute; + top: 2.02rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-pattern { + height: 26rem; + width: auto; + position: absolute; + bottom: 0; + left: 0; + z-index: 2; + } + + &-rectangle1 { + width: 69.6875rem; + height: 35.375rem; + position: absolute; + top: 0; + left: 0; + z-index: 1; + mix-blend-mode: screen; + } + + &-light { + width: 25.25rem; + height: 4rem; + position: absolute; + top: 0; + left: 12rem; + z-index: 3; + } + } + +} + +@include mobile { + .freya { + &-hero { + height: 53.25rem; + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + &-links { + justify-content: center; + } + } + + &-dashboard1 { + top: 30rem; + left: 12rem; + width: 28rem; + } + + &-dashboard2 { + top: 30rem; + left: 1.5rem; + width: 28rem; + } + + &-pattern { + width: 70rem; + height: 30rem; + } + + &-rectangle1 { + height: 49.125rem; + left: 10rem; + position: absolute; + top: 0; + left: -10.125rem; + z-index: 1; + } + + &-light { + width: 25.25rem; + height: 6rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 3; + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_templates.scss b/styles/layout/templates/_templates.scss new file mode 100644 index 0000000000..7f92182abd --- /dev/null +++ b/styles/layout/templates/_templates.scss @@ -0,0 +1,724 @@ +// TEMPLATE YOUTUBE +.template { + &-youtube { + &-outer { + padding: 5rem 0; + background-color: var(--surface-0); + border-radius: 2rem; + } + + &-title { + h2 { + margin: 0; + text-align: center; + font-size: 3rem; + font-weight: 600; + color: var(--surface-900); + + @include mobile { + font-size: 1.5rem; + } + } + } + + &-video { + position: relative; + padding-bottom: 56.25%; + height: 100%; + overflow: hidden; + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0.5rem; + } + } + + &-description { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; + text-align: center; + color: var(--surface-900); + width: 45rem; + margin: 1.25rem auto 0; + + @include mobile { + font-size: 0.875rem; + line-height: 1.25rem; + width: 96%; + } + } + + &-screen { + margin: 3rem auto 0; + width: 75%; + max-width: 70rem; + box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02); + cursor: pointer; + position: relative; + + &-blur { + width: 100%; + position: absolute; + height: 100%; + top: 0; + left: 0; + z-index: 4; + backdrop-filter: blur(1.4px); + background: rgba(255, 255, 255, 0.06); + border-radius: 2rem; + } + + &-play { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 5; + + svg { + width: 180px; + height: 180px; + } + } + + img { + width: 100%; + height: auto; + } + } + } +} + +@include mobile { + .template { + &-youtube { + &-outer { + padding: 3rem 0 1.5rem; + border-radius: 1.25rem; + } + + &-title { + h2 { + @include mobile { + font-size: 1.5rem; + } + } + } + + &-description { + @include mobile { + font-size: 0.875rem; + line-height: 1.25rem; + width: 90%; + } + } + + &-screen { + width: 90%; + + &-blur { + backdrop-filter: blur(0.5px); + } + + &-play { + svg { + width: 100px; + height: 100px; + } + } + } + } + } +} + +// TEMPLATE FEATURES TYPE 1 +.template { + &-features1 { + &-outer { + padding: 5rem 0; + border-radius: 2rem; + background: var(--surface-0, #FFF); + } + + display: flex; + gap: 1.5rem; + margin: 0 auto; + width: fit-content; + + &-card { + padding: 1.25rem; + border-radius: 1.3125rem; + border: 1px solid var(--surface-200, #EEE); + background: var(--surface-0, #FFF); + width: 21.125rem; + + &-top { + width: 100%; + margin-bottom: 1.25rem; + + img { + width: 100%; + } + } + + &-bottom { + &-title { + color: var(--surface-900); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + margin-top: 0; + margin-bottom: 0.75rem; + } + + &-description { + color: var(--surface-600); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + margin: 0; + } + } + } + } +} + +@include mobile { + .template { + &-features1 { + &-outer { + padding: 1.5rem 0; + border-radius: 1.25rem; + } + + width: 90%; + max-width: 24rem; + + flex-direction: column; + + &-card { + padding: 1rem; + width: 100%; + border-radius: 1rem; + } + } + } +} + + +// TEMPLATE FEATURES TYPE 2 +.template { + &-features2 { + &-outer { + padding: 7rem 0; + border-radius: 2rem; + background: var(--surface-0, #FFF); + } + + margin: 0 auto; + width: fit-content; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + width: 52.75rem; + gap: 1.5rem; + + @include mobile { + width: 100%; + max-width: 40rem; + align-items: center; + justify-content: center; + } + + &-card { + width: 25.625rem; + padding: 1.25rem; + border-radius: 1.3125rem; + border: 1px solid var(--surface-200); + background: var(--surface-0); + + &-img { + height: 15.125rem; + width: auto; + } + + &-withMargin { + margin-top: 7.81rem; + + @include mobile { + margin-top: 0; + } + } + + &-withoutMargin { + margin-top: -7.81rem; + + @include mobile { + margin-top: 0; + } + } + + h2 { + margin: 1.25rem 0 0; + color: var(--surface-900, var(--surface-900, #212121)); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + } + + p { + margin: 0.75rem 0 0; + color: var(--surface-600, #757575); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + } + } + } +} + +@include mobile { + .template { + &-features2 { + &-outer { + padding: 1.5rem 0; + border-radius: 1.25rem; + } + + width: 100%; + max-width: 40rem; + align-items: center; + justify-content: center; + + &-card { + width: 90%; + max-width: 24rem; + padding: 1rem; + border-radius: 1rem; + + &-img { + height: auto; + width: 100%; + border-radius: 0.5rem; + } + + &-withMargin { + margin-top: 0; + } + + &-withoutMargin { + margin-top: 0; + } + } + } + } +} + +// TEMPLATE RELATED +.template { + &-related { + &-outer { + padding: 5rem 0; + border-radius: 2rem; + background: var(--surface-0, #FFF); + } + + &-title { + text-align: center; + color: var(--surface-900); + font-size: 3rem; + font-weight: 600; + } + + &-slide { + display: flex; + width: fit-content; + margin: 3rem auto 0; + gap: 1.5rem; + + &-card { + border-radius: 1.3125rem; + border: 1px solid var(--surface-200, #EEE); + background: var(--surface-0, #FFF); + padding: 1.25rem; + + img { + width: 18.625rem; + height: auto; + border-radius: 0.65625rem; + } + } + } + } +} + +@include mobile { + .template { + &-related { + &-outer { + padding: 1.5rem 0; + border-radius: 1.25rem; + } + + &-title { + padding-top: 1.5rem; + font-size: 1.5rem; + } + + &-slide { + flex-direction: column; + gap: 2rem; + max-width: 24rem; + width: 90%; + margin: 2rem auto 0; + + &-card { + border-radius: 1rem; + padding: 1rem; + + img { + width: 100%; + height: auto; + border-radius: 0.5rem; + } + } + } + } + } +} + +// TEMPLATE CONFIGURATION +.template { + &-configuration { + &-outer { + padding: 5rem 0; + border-radius: 2rem; + background: var(--surface-0, #FFF); + } + + padding: 2rem; + border-radius: 1.75rem; + border: 1px solid var(--surface-200, #EEE); + background: var(--surface-0, #FFF); + width: 49.25rem; + margin: 0 auto; + + @include mobile { + width: 21.9375rem; + padding: 1rem; + border-radius: 1rem; + } + + &-title { + font-size: 1.53125rem; + font-weight: 700; + line-height: 1.8125rem; + color: var(--surface-900, var(--surface-900, #212121)); + } + + &-description { + color: var(--surface-600, #757575); + font-size: 1.09375rem; + font-weight: 400; + line-height: 1.64375rem; + margin: 0.75rem 0 0; + } + + &-screen { + border-radius: 0.875rem; + border: 1px solid var(--surface-border, #DFE7EF); + + &-top { + border-radius: 0.75rem 0.75rem 0rem 0rem; + background: var(--surface-0, #FFF); + padding: 0.25rem 1.5rem; + height: 3.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + + &-circle { + width: 0.75rem; + height: 0.75rem; + border-radius: 999px; + } + + &-close { + background-color: #ED6B5D; + } + + &-minimize { + background-color: #F4BE50; + } + + &-zoom { + background-color: #61C554; + } + } + + &-bottom { + padding: 1.5rem; + background: var(--surface-900, #212121); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + display: flex; + flex-direction: column; + gap: 1rem; + position: relative; + + p { + color: var(--surface-0, #FFF); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.0625rem; + margin: 0; + } + + &-logo { + width: 7.5rem; + height: 7.5rem; + position: absolute; + right: 1.5rem; + bottom: 1.38rem; + + @include mobile { + width: 5.25rem; + height: 5.25rem; + right: 0.88rem; + bottom: 0.88rem; + } + } + } + } + } +} + +@include mobile { + .template { + &-configuration { + &-outer { + padding: 1.5rem 0; + border-radius: 1.25rem; + } + + width: 90%; + max-width: 24rem; + padding: 1rem; + border-radius: 1rem; + + &-screen { + border-radius: 0.5rem; + &-top { + border-radius: 0.5rem 0.5rem 0rem 0rem; + } + &-bottom { + border-radius: 0rem 0rem 0.5rem 0.5rem ; + &-logo { + width: 5.25rem; + height: 5.25rem; + right: 0.88rem; + bottom: 0.88rem; + } + } + } + } + } +} + +// TEMPLATE FEATURES ANIMATION +.template { + &-features-animation { + &-outer { + border-radius: 2rem; + background: var(--surface-0, #FFF); + padding: 5rem 0; + } + + &-title { + max-width: 45rem; + margin: 0 auto 3rem; + + h2 { + margin: 0; + color: var(--surface-900); + text-align: center; + font-size: 3rem; + font-weight: 600; + text-align: center; + } + } + + display: flex; + gap: 2.5rem; + width: fit-content; + margin: 0 auto; + padding: 1.75rem; + border-radius: 1.75rem; + border: 1px solid var(--surface-200, #EEE); + width: fit-content; + + &-left { + width: 30rem; + display: flex; + flex-direction: column; + gap: 1rem; + + &-card { + padding: 1rem; + display: flex; + align-items: flex-start; + gap: 1.25rem; + cursor: pointer; + transition: all 0.2s ease; + + &-active { + border-radius: 0.75rem; + background: var(--surface-100, #F5F5F5); + transition: all 0.2s ease; + } + + &:hover { + border-radius: 0.75rem; + background: var(--surface-100, #F5F5F5); + } + + + + &-order { + z-index: 34; + position: relative; + overflow: hidden; + font-size: 3rem; + font-weight: 700; + margin: 0; + color: white; + text-shadow: 1px 1px 0 #9E9E9E, -1px 1px 0 #9E9E9E, -1px -1px 0 #9E9E9E, 1px -1px 0 #9E9E9E; + } + + h5 { + color: var(--surface-900, var(--color-surface-900, #212121)); + font-size: 1.09375rem; + font-weight: 600; + line-height: 1.3125rem; + margin: 0; + } + + p { + color: var(--surface-600, #757575); + font-size: 0.875rem; + font-weight: 400; + line-height: 1.3125rem; + margin: 0.38rem 0 0; + } + } + } + + &-right { + width: 30rem; + border-radius: 0.875rem; + + img { + width: 100%; + height: auto; + border-radius: inherit; + } + + &-inline { + width: 100%; + height: 100%; + border-radius: 0.75rem; + background: var(--surface-ground); + padding-top: 3.88rem; + position: relative; + + &-image { + width: 25.4375rem; + margin: 1.25rem auto 0; + + img { + box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08); + border-radius: 0.25rem; + } + } + + &-tabs { + display: flex; + align-items: center; + gap: 0.25rem; + border-radius: 2.5rem; + border: 1px solid var(--surface-border); + background: #FFF; + padding: 0.25rem; + width: fit-content; + margin: 0 auto 0; + + + button { + padding: 0.21875rem 0.5rem; + border-radius: 2.25rem; + color: var(--surface-900); + background: #fff; + border: none; + outline: none; + font-size: 0.75rem; + font-weight: 500; + line-height: 1rem; + letter-spacing: -0.015rem; + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + background: var(--surface-ground); + } + + + } + + &-btnActive { + background: var(--surface-ground) !important; + + } + } + } + } + } +} + +@include mobile { + .template { + &-features-animation { + &-outer { + padding: 1.5rem 0; + border-radius: 1.25rem; + } + + &-title { + padding-top: 1.5rem; + + h2 { + font-size: 1.5rem; + } + } + + flex-direction: column-reverse; + gap: 1.31rem; + padding: 1rem; + border-radius: 1rem; + width: 90%; + max-width: 24rem; + + &-left { + width: 100%; + } + + &-right { + border-radius: 0.48169rem; + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/styles/layout/templates/_ultima.scss b/styles/layout/templates/_ultima.scss new file mode 100644 index 0000000000..89e2916168 --- /dev/null +++ b/styles/layout/templates/_ultima.scss @@ -0,0 +1,206 @@ +.ultima { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: #192048; + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 26; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(18, 53, 253, 0.00) 0%, rgba(18, 53, 253, 0.50) 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(3px); + padding: 2.25rem 1.75rem; + + &-logo { + height: 2.5rem; + } + + p { + color: #FFF; + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + button { + height: 2.5rem; + flex: 1; + border-radius: 3rem; + color: #fff; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + transition: all 0.15s ease; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + + &:hover { + border-color: #2563EB; + background-color: #2563EB; + } + } + + &-btn2 { + border: 1px solid #3B82F6; + background: #3B82F6; + + &:hover { + background-color: #2563EB; + border-color: #2563EB; + } + } + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: #fff; + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-dashboard1 { + z-index: 4; + position: absolute; + top: 2.44rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-dashboard2 { + z-index: 3; + position: absolute; + top: 2.44rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-pattern { + width: 60rem; + height: auto; + position: absolute; + bottom: 0; + left: 0; + z-index: 2; + } + + &-rectangle1 { + width: 69.6875rem; + height: 35.375rem; + position: absolute; + top: 0; + left: 0; + z-index: 1; + mix-blend-mode: screen; + } + + &-light { + width: 25.25rem; + height: 3.5625rem; + position: absolute; + top: 0; + left: 12rem; + z-index: 3; + } + } + +} + +@include mobile { + .ultima { + &-hero { + height: 53.25rem; + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + &-links { + justify-content: center; + } + } + + &-dashboard1 { + border-radius: 0.375rem; + top: 30rem; + left: 12rem; + width: 28rem; + } + + &-dashboard2 { + border-radius: 0.375rem; + top: 30rem; + left: 1.5rem; + width: 28rem; + } + + &-pattern { + width: 80rem; + left: -5rem; + } + + &-rectangle1 { + height: 49.125rem; + left: 10rem; + position: absolute; + top: 0; + left: -10.125rem; + z-index: 1; + } + + &-light { + width: 25.25rem; + height: 4rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 3; + } + } + + } +} \ No newline at end of file diff --git a/styles/layout/templates/_verona.scss b/styles/layout/templates/_verona.scss new file mode 100644 index 0000000000..ec025b638b --- /dev/null +++ b/styles/layout/templates/_verona.scss @@ -0,0 +1,204 @@ +.verona { + display: flex; + flex-direction: column; + gap: 2.19rem; + + &-hero { + width: 100%; + height: 36.25rem; + background: #1E2849; + border-radius: 2rem; + position: relative; + overflow: hidden; + + &-card { + position: relative; + z-index: 26; + width: 29rem; + margin-left: 10rem; + margin-top: 9.81rem; + border-radius: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.30) 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(3px); + padding: 2.25rem 1.75rem; + + &-logo { + height: 2.5rem; + } + + p { + color: #FFF; + font-size: 0.875rem; + font-weight: 400; + line-height: normal; + margin: 1rem 0 0; + } + + &-buttons { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 2rem; + + button { + height: 2.5rem; + flex: 1; + border-radius: 3rem; + color: #fff; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.0625rem; + cursor: pointer; + transition: all 0.15s ease; + } + + &-btn1 { + border: 1px solid #212121; + background: #212121; + + &:hover { + border-color: #2563EB; + background-color: #2563EB; + } + } + + &-btn2 { + border: 1px solid #3B82F6; + background: #3B82F6; + + &:hover { + background-color: #2563EB; + border-color: #2563EB; + } + } + } + + &-links { + margin-top: 1rem; + display: flex; + align-items: center; + gap: 1rem; + + a { + display: flex; + align-items: flex-end; + gap: 0.5rem; + color: #fff; + + span { + font-size: 0.75rem; + font-weight: 300; + line-height: normal; + text-decoration-line: underline; + } + } + } + } + + &-dashboard1 { + z-index: 4; + position: absolute; + top: 2.02rem; + left: 60rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-dashboard2 { + z-index: 3; + position: absolute; + top: 2.02rem; + left: 42rem; + width: 37.875rem; + box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12); + } + + &-pattern { + width: 110rem; + height: auto; + position: absolute; + bottom: 0; + left: 0; + z-index: 2; + } + + &-rectangle1 { + width: 69.6875rem; + height: 35.375rem; + position: absolute; + top: 0; + left: 0; + z-index: 1; + mix-blend-mode: screen; + } + + &-light { + width: 25.25rem; + height: 4rem; + position: absolute; + top: 0; + left: 12rem; + z-index: 3; + } + } + +} + +@include mobile { + .verona { + &-hero { + height: 53.25rem; + padding: 8rem 1.25rem 1.25rem; + border-radius: 1rem; + + &-card { + width: 100%; + margin-left: 0rem; + margin-top: 0rem; + padding: 2rem 1.5rem; + &-links { + justify-content: center; + } + } + + &-dashboard1 { + top: 30rem; + left: 12rem; + width: 28rem; + } + + &-dashboard2 { + top: 30rem; + left: 1.5rem; + width: 28rem; + } + + &-pattern { + width: 120rem; + left: -7.5rem; + } + + &-rectangle1 { + height: 49.125rem; + left: 10rem; + position: absolute; + top: 0; + left: -10.125rem; + z-index: 1; + } + + &-light { + width: 25.25rem; + height: 6rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 3; + } + } + + } +} \ No newline at end of file