Merge version_13_1777217249800 into main #11
@@ -1,89 +1,92 @@
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Outlet } from "react-router-dom";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function Layout() {
|
||||
const navItems = [
|
||||
{
|
||||
"name": "About",
|
||||
"href": "#about"
|
||||
},
|
||||
{
|
||||
"name": "Features",
|
||||
"href": "#features"
|
||||
},
|
||||
{
|
||||
"name": "Products",
|
||||
"href": "#products"
|
||||
},
|
||||
{
|
||||
"name": "Pricing",
|
||||
"href": "#pricing"
|
||||
}
|
||||
];
|
||||
{
|
||||
name: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavbarCentered
|
||||
logo="EmotioSaaS"
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
navItems={navItems} />
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<header className="sticky top-0 w-full z-50 bg-[var(--background)] shadow-md">
|
||||
<NavbarCentered
|
||||
logo="EmotioSaaS"
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
navItems={navItems}
|
||||
/>
|
||||
</header>
|
||||
<main className="flex-grow">
|
||||
<Outlet />
|
||||
</main>
|
||||
<FooterSimple
|
||||
brand="EmotioSaaS"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Marketplace",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 EmotioSaaS Inc. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
brand="EmotioSaaS"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Marketplace",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 EmotioSaaS Inc. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,13 +5,13 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/magento */
|
||||
--background: #ffffff;
|
||||
--card: #f5f5f5;
|
||||
--foreground: #333333;
|
||||
--primary-cta: #f26322;
|
||||
--background: #F8F8F8;
|
||||
--card: #ffffff;
|
||||
--foreground: #2C2C2C;
|
||||
--primary-cta: #EF6C00;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #f26322;
|
||||
--secondary-cta-text: #EF6C00;
|
||||
--accent: #e0e0e0;
|
||||
--background-accent: #cccccc;
|
||||
|
||||
@@ -160,26 +160,30 @@ h6 {
|
||||
}
|
||||
|
||||
/* WEBILD_PRIMARY_BUTTON */
|
||||
/* @primaryButtons/radial-glow */
|
||||
/* @primaryButtons/solid */
|
||||
.primary-button {
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
|
||||
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
|
||||
var(--color-primary-cta);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
|
||||
background-color: var(--color-primary-cta);
|
||||
color: var(--color-primary-cta-text);
|
||||
}
|
||||
|
||||
/* WEBILD_SECONDARY_BUTTON */
|
||||
/* @secondaryButtons/radial-glow */
|
||||
/* @secondaryButtons/outline */
|
||||
.secondary-button {
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
|
||||
radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
|
||||
var(--color-secondary-cta);
|
||||
box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
background-color: var(--color-secondary-cta);
|
||||
color: var(--color-secondary-cta-text);
|
||||
border: 1px solid var(--color-primary-cta);
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.hover-lift {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.perspective-1000 {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user