redesigned app for cleaner ux
This commit is contained in:
FernandoJVideira committed
1 parent
fe468885b0
commit
2a3f542e98
33 files changed
+1379
-374
No files matched your search
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "dev",
|
||||
"runtimeExecutable": "npm",
|
||||
"runtimeArgs": ["run", "dev"],
|
||||
"port": 5173
|
||||
}
|
||||
]
|
||||
}
|
||||
Generated
+45
@@ -11,6 +11,7 @@
|
||||
"@emailjs/browser": "^4.3.3",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"framer-motion": "^13.2.0",
|
||||
"i18next": "^23.11.5",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-http-backend": "^2.5.2",
|
||||
@@ -2595,6 +2596,29 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "13.2.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-13.2.0.tgz",
|
||||
"integrity": "sha512-9E33ebgMaO33w1nN/jEdW8z3/GO483fMi4rqbMG9rt83XgW9QLKRe4NcmJ8s+fQ3O34++UHrIQwlIWGIWTITjA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^13.2.0",
|
||||
"motion-utils": "^13.0.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@@ -3158,6 +3182,21 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "13.2.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-13.2.0.tgz",
|
||||
"integrity": "sha512-N6gdSoWRDk0Rh/fVtlqUtLs+fEN3ELFZI3cn3IQE9Mnf3E+Mh8wjO6MstzCOPFh4Yf0L1as5m2eUyYWj8ylVSQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^13.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "13.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-13.0.0.tgz",
|
||||
"integrity": "sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@@ -4238,6 +4277,12 @@
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"@emailjs/browser": "^4.3.3",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"framer-motion": "^13.2.0",
|
||||
"i18next": "^23.11.5",
|
||||
"i18next-browser-languagedetector": "^8.0.0",
|
||||
"i18next-http-backend": "^2.5.2",
|
||||
|
||||
+31
-10
@@ -1,28 +1,49 @@
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
interface IProps {
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
index?: number;
|
||||
}
|
||||
|
||||
const Card = ({ title, description, image }: IProps) => {
|
||||
const defaultImgClasses = `w-full h-20 mt-5`;
|
||||
const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
|
||||
const Card = ({ title, description, image, index = 0 }: IProps) => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="mt-5 xl:mt-0 flex flex-1 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
|
||||
<div className="w-full font-medium flex-col md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
|
||||
<object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
|
||||
<h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
|
||||
<h2 className="results-card-content">
|
||||
<motion.div
|
||||
className={`relative flex flex-1 flex-col gap-5 rounded-2xl glass-panel shadow-glass px-6 py-7 md:px-7 md:py-8 ${
|
||||
image ? "text-left items-start" : "text-center items-center"
|
||||
}`}
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 24 }}
|
||||
whileInView={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 22,
|
||||
stiffness: 140,
|
||||
delay: prefersReducedMotion ? 0 : index * 0.08,
|
||||
}}
|
||||
whileHover={prefersReducedMotion ? {} : { y: -4 }}
|
||||
>
|
||||
<span className="absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-gold-light/50 to-transparent" />
|
||||
|
||||
{image && <img src={image} alt="" className="h-10 w-10" />}
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xl lg:text-2xl font-semibold text-white tracking-tight leading-snug">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm lg:text-base text-white/55 leading-relaxed">
|
||||
{description.split("\n").map((line, i) => (
|
||||
<span key={i}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</h2>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,55 +1,69 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FaFacebook, FaLinkedin } from "react-icons/fa";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const Footer = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
return (
|
||||
<footer className="flex flex-col space-y-10 justify-center m-10">
|
||||
<div className="flex justify-center space-x-5">
|
||||
<a
|
||||
<footer className="flex flex-col space-y-8 justify-center items-center mt-10 mb-8 px-6 pt-10">
|
||||
<div className="w-full max-w-xs h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="flex justify-center space-x-6">
|
||||
<motion.a
|
||||
href="https://www.facebook.com/people/LK-Marketing/61556714037746/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.12, color: "#FACC97" }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 22 }}
|
||||
className="text-gold-light"
|
||||
>
|
||||
<FaFacebook className="text-gold-light" size={30} />
|
||||
</a>
|
||||
<a
|
||||
<FaFacebook size={26} />
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="https://www.linkedin.com/company/lk-results"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.12, color: "#FACC97" }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 22 }}
|
||||
className="text-gold-light"
|
||||
>
|
||||
<FaLinkedin className="text-gold-light" size={30} />
|
||||
</a>
|
||||
{/* Uncomment these lines if you want to include Instagram and Twitter icons */}
|
||||
{/* <a
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FaInstagram className="text-gold-light" size={30} />
|
||||
</a>
|
||||
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
|
||||
<FaXTwitter className="text-gold-light" size={30} />
|
||||
</a> */}
|
||||
<FaLinkedin size={26} />
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-5">
|
||||
<div className="flex justify-center space-x-6">
|
||||
<a
|
||||
href="/tos"
|
||||
className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
|
||||
className={
|
||||
i18n.language === "en"
|
||||
? "footer-text hover:text-gold-light transition-colors"
|
||||
: "footer-text-pt hover:text-gold-light transition-colors"
|
||||
}
|
||||
>
|
||||
{t("footer.tos")}
|
||||
</a>
|
||||
<a
|
||||
href="/privacy"
|
||||
className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
|
||||
className={
|
||||
i18n.language === "en"
|
||||
? "footer-text hover:text-gold-light transition-colors"
|
||||
: "footer-text-pt hover:text-gold-light transition-colors"
|
||||
}
|
||||
>
|
||||
{t("footer.privacy")}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p className={i18n.language === "en" ? "footer-text text-center" : "footer-text-pt text-center"}>
|
||||
<p
|
||||
className={
|
||||
i18n.language === "en"
|
||||
? "footer-text text-center"
|
||||
: "footer-text-pt text-center"
|
||||
}
|
||||
>
|
||||
{t("footer.rights")}
|
||||
</p>
|
||||
</footer>
|
||||
@@ -57,4 +71,3 @@ const Footer = () => {
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
const Loading = () => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
|
||||
<div className="flex items-center justify-center h-screen bg-custom-bgdark">
|
||||
{prefersReducedMotion ? (
|
||||
<div className="h-16 w-16 rounded-full border-4 border-white/10 border-t-gold-light" />
|
||||
) : (
|
||||
<motion.div
|
||||
className="h-16 w-16 rounded-full border-4 border-white/10 border-t-gold-light"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 0.9, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface MenuContentProps {
|
||||
navigation: { title: string; path: string }[];
|
||||
activeSection: string;
|
||||
handleNavigation: (path: string) => void;
|
||||
}
|
||||
|
||||
const MenuContent = ({
|
||||
navigation,
|
||||
activeSection,
|
||||
handleNavigation,
|
||||
}: MenuContentProps) => {
|
||||
return (
|
||||
<ul className="flex items-center gap-8">
|
||||
{navigation.map((item, idx) => {
|
||||
const isActive = activeSection === item.path;
|
||||
return (
|
||||
<li key={idx}>
|
||||
<motion.a
|
||||
href={item.path}
|
||||
className="relative block text-sm font-medium tracking-wide"
|
||||
animate={{ color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)" }}
|
||||
whileHover={{ color: "#ffffff" }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleNavigation(item.path);
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
{isActive && (
|
||||
<motion.span
|
||||
layoutId="desktop-nav-underline"
|
||||
className="absolute -bottom-1.5 left-0 h-px w-full rounded-full bg-gold-light"
|
||||
transition={{ type: "spring", stiffness: 380, damping: 32 }}
|
||||
/>
|
||||
)}
|
||||
</motion.a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuContent;
|
||||
@@ -0,0 +1,85 @@
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
FaLayerGroup,
|
||||
FaGaugeHigh,
|
||||
FaAward,
|
||||
FaEnvelope,
|
||||
} from "react-icons/fa6";
|
||||
import { langFlagUrl } from "./langFlag";
|
||||
|
||||
const ICONS: Record<string, typeof FaLayerGroup> = {
|
||||
Services: FaLayerGroup,
|
||||
Optimization: FaGaugeHigh,
|
||||
Advantages: FaAward,
|
||||
Contact: FaEnvelope,
|
||||
};
|
||||
|
||||
interface MobileMenuProps {
|
||||
navigation: { title: string; path: string }[];
|
||||
handleNavigation: (path: string) => void;
|
||||
setState: (v: boolean) => void;
|
||||
currentLang: "en" | "pt";
|
||||
changeLanguage: (lng: string) => void;
|
||||
}
|
||||
|
||||
const MobileMenu = ({
|
||||
navigation,
|
||||
handleNavigation,
|
||||
setState,
|
||||
currentLang,
|
||||
changeLanguage,
|
||||
}: MobileMenuProps) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col px-3 pt-2 pb-3">
|
||||
<ul className="flex flex-col gap-1">
|
||||
{navigation.map((item, idx) => {
|
||||
const Icon = ICONS[item.path];
|
||||
return (
|
||||
<li key={idx}>
|
||||
<motion.a
|
||||
href={item.path}
|
||||
className="flex items-center gap-3 rounded-xl px-4 py-3 text-lg font-medium text-white/70"
|
||||
whileHover={{ backgroundColor: "rgba(255,255,255,0.06)", color: "#ffffff" }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setState(false);
|
||||
handleNavigation(item.path);
|
||||
}}
|
||||
>
|
||||
{Icon && <Icon className="h-4 w-4 text-gold-light shrink-0" />}
|
||||
{item.title}
|
||||
</motion.a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="my-3 h-px bg-white/10" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-between rounded-xl px-4 py-3"
|
||||
onClick={() => changeLanguage(currentLang === "en" ? "pt" : "en")}
|
||||
>
|
||||
<span className="text-sm text-white/45">Language</span>
|
||||
<motion.span
|
||||
className="flex items-center gap-1.5 rounded-full border border-gold-light/25 px-3 py-1 text-sm font-semibold text-gold-light"
|
||||
whileHover={{ borderColor: "rgba(250,204,151,0.6)" }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
>
|
||||
<img
|
||||
src={langFlagUrl(currentLang === "en" ? "pt" : "en")}
|
||||
alt=""
|
||||
className="h-3.5 w-5 rounded-[2px] object-cover"
|
||||
/>
|
||||
{currentLang === "en" ? "PT" : "EN"}
|
||||
</motion.span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileMenu;
|
||||
@@ -1,35 +1,27 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { FaTimes, FaBars } from "react-icons/fa";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
import Logo from "../../assets/logo.svg";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import MenuContent from "./MenuContent";
|
||||
import MobileMenu from "./MobileMenu";
|
||||
import { langFlagUrl } from "./langFlag";
|
||||
|
||||
export default () => {
|
||||
const NAVBAR_HEIGHT = 110;
|
||||
|
||||
const Navbar = () => {
|
||||
const [state, setState] = useState(false);
|
||||
const { t, i18n } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
const [colorChange, setColorChange] = useState(false);
|
||||
useEffect(() => {
|
||||
const changeColor = () => {
|
||||
if (window.scrollY >= 100) {
|
||||
setColorChange(true);
|
||||
} else {
|
||||
setColorChange(false);
|
||||
}
|
||||
};
|
||||
const [activeSection, setActiveSection] = useState("Services");
|
||||
|
||||
window.addEventListener("scroll", changeColor);
|
||||
|
||||
const scrollPath = sessionStorage.getItem("scrollPath");
|
||||
if (scrollPath) {
|
||||
smoothScroll(scrollPath);
|
||||
sessionStorage.removeItem("scrollPath");
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeColor);
|
||||
};
|
||||
}, []);
|
||||
// Browsers report region variants (e.g. "en-US", "pt-BR"), not just the
|
||||
// bare "en"/"pt" i18next is configured with - matching on that exactly
|
||||
// would leave the toggle mislabeled for most real visitors.
|
||||
const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
|
||||
|
||||
const navigation = [
|
||||
{ title: t("navbar.services"), path: "Services" },
|
||||
@@ -38,43 +30,97 @@ export default () => {
|
||||
{ title: t("navbar.contact"), path: "Contact" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setColorChange(window.scrollY >= 100);
|
||||
|
||||
// The active section is whichever nav target's start we've scrolled
|
||||
// past most recently - not just "is it in the viewport", since a
|
||||
// short section could otherwise never register as active at all.
|
||||
let current = navigation[0].path;
|
||||
for (const item of navigation) {
|
||||
const el = document.getElementById(item.path);
|
||||
if (!el) continue;
|
||||
const top = el.getBoundingClientRect().top + window.scrollY;
|
||||
if (window.scrollY + NAVBAR_HEIGHT + 40 >= top) {
|
||||
current = item.path;
|
||||
}
|
||||
}
|
||||
setActiveSection(current);
|
||||
};
|
||||
|
||||
handleScroll();
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
|
||||
const scrollPath = sessionStorage.getItem("scrollPath");
|
||||
if (scrollPath) {
|
||||
smoothScroll(scrollPath);
|
||||
sessionStorage.removeItem("scrollPath");
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleNavigation = (path: string) => {
|
||||
if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
|
||||
setState(false);
|
||||
if (
|
||||
(window.location.pathname === "/tos" ||
|
||||
window.location.pathname === "/privacy") &&
|
||||
navigation.some((navItem) => navItem.path === path)
|
||||
) {
|
||||
sessionStorage.setItem("scrollPath", path);
|
||||
window.location.href = "/";
|
||||
}else{
|
||||
smoothScroll(path)
|
||||
} else {
|
||||
smoothScroll(path);
|
||||
}
|
||||
};
|
||||
|
||||
const smoothScroll = (path :string) => {
|
||||
const smoothScroll = (path: string) => {
|
||||
const element = document.getElementById(path);
|
||||
const navbarHeight = 110; // Replace with your navbar's height
|
||||
if (element) {
|
||||
const top =
|
||||
element.getBoundingClientRect().top + window.scrollY - navbarHeight;
|
||||
element.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT;
|
||||
window.scrollTo({ top: top, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const changeLanguage = (lng: string) => {
|
||||
i18n.changeLanguage(lng);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = state ? "hidden" : "";
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [state]);
|
||||
|
||||
const springTap = prefersReducedMotion ? {} : { whileTap: { scale: 0.94 } };
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${
|
||||
colorChange
|
||||
? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
|
||||
: "z-10"
|
||||
}`}
|
||||
<motion.nav
|
||||
className="sticky top-0 z-40 w-full"
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -16 }}
|
||||
animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
<div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
|
||||
<div className="flex items-center justify-between py-3 md:py-5 md:block">
|
||||
<a
|
||||
<div className={colorChange ? "px-4" : ""}>
|
||||
<div
|
||||
className={`relative mx-auto flex items-center justify-between transition-all duration-500 ${
|
||||
colorChange
|
||||
? "mt-3 max-w-3xl rounded-full glass-nav shadow-glass-lg px-5 py-2.5"
|
||||
: "max-w-screen-xl px-4 py-3 md:px-8 md:py-5"
|
||||
}`}
|
||||
>
|
||||
<motion.a
|
||||
href="Top"
|
||||
whileTap={{ scale: 0.92 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent the default anchor tag behavior
|
||||
e.preventDefault();
|
||||
if (window.location.pathname === "/") {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
} else {
|
||||
@@ -82,57 +128,108 @@ export default () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={Logo} width={60} height={60} alt="logo" />
|
||||
</a>
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
|
||||
<img
|
||||
src={Logo}
|
||||
width={colorChange ? 40 : 56}
|
||||
height={colorChange ? 40 : 56}
|
||||
alt="logo"
|
||||
className="transition-all duration-500"
|
||||
/>
|
||||
</motion.a>
|
||||
|
||||
{/*
|
||||
Centered against the whole bar (absolute + left-1/2), not just
|
||||
"between" the logo and the language toggle - those two groups
|
||||
are different widths, so a plain flex justify-between would
|
||||
center the nav in the remaining space rather than in the bar
|
||||
itself, visibly pulling it off-center.
|
||||
*/}
|
||||
<div className="absolute left-1/2 hidden -translate-x-1/2 md:block">
|
||||
<MenuContent
|
||||
navigation={navigation}
|
||||
activeSection={activeSection}
|
||||
handleNavigation={handleNavigation}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.button
|
||||
className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gold-light/25 text-sm font-semibold text-gold-light"
|
||||
whileHover={{ borderColor: "rgba(250,204,151,0.6)" }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||||
onClick={() => changeLanguage(currentLang === "en" ? "pt" : "en")}
|
||||
>
|
||||
<img
|
||||
src={langFlagUrl(currentLang === "en" ? "pt" : "en")}
|
||||
alt=""
|
||||
className="h-3.5 w-5 rounded-[2px] object-cover"
|
||||
/>
|
||||
{currentLang === "en" ? "PT" : "EN"}
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
className="md:hidden outline-none p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors"
|
||||
onClick={() => setState(!state)}
|
||||
{...springTap}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
aria-label={state ? "Close menu" : "Open menu"}
|
||||
>
|
||||
{state ? (
|
||||
<FaTimes className="h-6 w-6" />
|
||||
<FaTimes className="h-5 w-5" />
|
||||
) : (
|
||||
<FaBars className="h-6 w-6" />
|
||||
<FaBars className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col md:flex-row items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
|
||||
state
|
||||
? colorChange
|
||||
? "block bg-black bg-opacity-80 transition duration-500"
|
||||
: "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
|
||||
: "hidden md:flex"
|
||||
}`}
|
||||
>
|
||||
<ul className="text-text-gold space-y-8 md:ml-auto md:flex md:space-x-6 md:space-y-0 justify-center items-center">
|
||||
{navigation.map((item, idx) => {
|
||||
return (
|
||||
<li key={idx} className="hover:text-white">
|
||||
<a
|
||||
href={item.path}
|
||||
className="block py-2 md:py-0 md:px-4 text-xl font-medium"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent the default anchor tag behavior
|
||||
setState(false); // Close the navigation
|
||||
handleNavigation(item.path); // Navigate to the section
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<button
|
||||
className="mt-5 md:mt-0 md:ml-auto"
|
||||
onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
|
||||
>
|
||||
{i18n.language === "en" ? "PT" : "EN"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<AnimatePresence>
|
||||
{state && (
|
||||
<>
|
||||
<motion.div
|
||||
key="mobile-scrim"
|
||||
className="fixed inset-0 z-40 bg-black/60 md:hidden"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
onClick={() => setState(false)}
|
||||
/>
|
||||
<motion.div
|
||||
key="mobile-menu"
|
||||
initial={
|
||||
prefersReducedMotion
|
||||
? { opacity: 0 }
|
||||
: { opacity: 0, y: -12, scale: 0.98 }
|
||||
}
|
||||
animate={
|
||||
prefersReducedMotion
|
||||
? { opacity: 1 }
|
||||
: { opacity: 1, y: 0, scale: 1 }
|
||||
}
|
||||
exit={
|
||||
prefersReducedMotion
|
||||
? { opacity: 0 }
|
||||
: { opacity: 0, y: -12, scale: 0.98 }
|
||||
}
|
||||
transition={{ type: "spring", damping: 26, stiffness: 300 }}
|
||||
className="absolute top-[3.6rem] left-0 right-0 z-50 mx-4 flex flex-col rounded-2xl glass-sheet shadow-glass-lg md:hidden"
|
||||
>
|
||||
<MobileMenu
|
||||
navigation={navigation}
|
||||
handleNavigation={handleNavigation}
|
||||
setState={setState}
|
||||
currentLang={currentLang}
|
||||
changeLanguage={changeLanguage}
|
||||
/>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,11 @@
|
||||
// Flag images (not emoji) for the same reason the phone country-code
|
||||
// picker uses them: emoji flag glyphs render with wildly inconsistent
|
||||
// metrics across platforms (and don't render as flags at all on some,
|
||||
// e.g. Windows), while a fixed-size image is pixel-identical everywhere.
|
||||
const LANG_ISO: Record<string, string> = {
|
||||
en: "gb",
|
||||
pt: "pt",
|
||||
};
|
||||
|
||||
export const langFlagUrl = (lng: string) =>
|
||||
`https://flagcdn.com/${LANG_ISO[lng] ?? lng}.svg`;
|
||||
@@ -1,11 +1,60 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import emailjs from "@emailjs/browser";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import PhoneCodeSelect from "./PhoneCodeSelect";
|
||||
|
||||
const PHONE_PATTERNS: Record<string, string> = {
|
||||
"+351": "### ### ###",
|
||||
"+34": "### ### ###",
|
||||
"+33": "# ## ## ## ##",
|
||||
"+44": "#### ######",
|
||||
"+1": "(###) ###-####",
|
||||
"+55": "(##) #####-####",
|
||||
};
|
||||
|
||||
const digitsOnly = (value: string) => value.replace(/\D/g, "");
|
||||
|
||||
const maxDigitsFor = (pattern: string) =>
|
||||
pattern.split("").filter((c) => c === "#").length;
|
||||
|
||||
const formatPhoneNumber = (digits: string, pattern: string) => {
|
||||
let result = "";
|
||||
let digitIndex = 0;
|
||||
for (let i = 0; i < pattern.length && digitIndex < digits.length; i++) {
|
||||
const ch = pattern[i];
|
||||
if (ch === "#") {
|
||||
result += digits[digitIndex];
|
||||
digitIndex++;
|
||||
} else {
|
||||
result += ch;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const ContactForm = () => {
|
||||
const { t } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
const [countryCode, setCountryCode] = useState("+351");
|
||||
const [phoneDigits, setPhoneDigits] = useState("");
|
||||
|
||||
const activePattern = PHONE_PATTERNS[countryCode];
|
||||
const formattedPhone = formatPhoneNumber(phoneDigits, activePattern);
|
||||
|
||||
const handleCountryChange = (code: string) => {
|
||||
setCountryCode(code);
|
||||
setPhoneDigits((prev) =>
|
||||
prev.slice(0, maxDigitsFor(PHONE_PATTERNS[code]))
|
||||
);
|
||||
};
|
||||
|
||||
const handlePhoneChange = (raw: string) => {
|
||||
const digits = digitsOnly(raw).slice(0, maxDigitsFor(activePattern));
|
||||
setPhoneDigits(digits);
|
||||
};
|
||||
|
||||
const notify = () => {
|
||||
toast.success(t("contact.toasts.success"));
|
||||
@@ -22,11 +71,12 @@ const ContactForm = () => {
|
||||
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
let isEmpty = Array.from(e.currentTarget.elements).some(
|
||||
(input) =>
|
||||
(input as HTMLInputElement).type !== "submit" &&
|
||||
(input as HTMLInputElement).value.trim() === ""
|
||||
);
|
||||
const isEmpty = Array.from(e.currentTarget.elements).some((el) => {
|
||||
if (el.tagName !== "INPUT" && el.tagName !== "TEXTAREA") return false;
|
||||
const field = el as HTMLInputElement | HTMLTextAreaElement;
|
||||
if (field.type === "hidden") return false;
|
||||
return field.value.trim() === "";
|
||||
});
|
||||
|
||||
if (isEmpty) {
|
||||
emptyForm();
|
||||
@@ -49,20 +99,31 @@ const ContactForm = () => {
|
||||
);
|
||||
|
||||
e.currentTarget.reset();
|
||||
setPhoneDigits("");
|
||||
setCountryCode("+351");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
|
||||
<form onSubmit={sendEmail} className="w-full md:w-auto">
|
||||
<div className="mt-10 mx-5 mb-10 lg:mx-0 flex justify-center items-center">
|
||||
<motion.form
|
||||
onSubmit={sendEmail}
|
||||
className="w-full md:w-[42rem] rounded-3xl glass-panel shadow-glass-lg p-6 md:p-10"
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 24 }}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:gap-3">
|
||||
<input
|
||||
className="form-input"
|
||||
className="form-input flex-1"
|
||||
type="text"
|
||||
name="user_name"
|
||||
placeholder={t("contact.form.name")}
|
||||
/>
|
||||
<input
|
||||
className="form-input"
|
||||
className="form-input flex-1"
|
||||
type="email"
|
||||
name="user_email"
|
||||
placeholder={t("contact.form.email")}
|
||||
@@ -70,17 +131,24 @@ const ContactForm = () => {
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:gap-3">
|
||||
<input
|
||||
className="form-input"
|
||||
className="form-input flex-1"
|
||||
type="text"
|
||||
name="user_company"
|
||||
placeholder={t("contact.form.company")}
|
||||
/>
|
||||
<input
|
||||
className="form-input"
|
||||
type="number"
|
||||
name="user_phone"
|
||||
placeholder={t("contact.form.phone")}
|
||||
/>
|
||||
<div className="phone-input-group flex-1 flex items-center">
|
||||
<PhoneCodeSelect value={countryCode} onChange={handleCountryChange} />
|
||||
<span className="h-5 w-px bg-white/10 mx-2" aria-hidden="true" />
|
||||
<input
|
||||
className="phone-number-input"
|
||||
type="tel"
|
||||
inputMode="numeric"
|
||||
name="user_phone"
|
||||
value={formattedPhone}
|
||||
onChange={(e) => handlePhoneChange(e.target.value)}
|
||||
placeholder={t("contact.form.phone")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<input
|
||||
@@ -91,20 +159,22 @@ const ContactForm = () => {
|
||||
></input>
|
||||
|
||||
<textarea
|
||||
className="form-input"
|
||||
className="form-input resize-none"
|
||||
name="message"
|
||||
placeholder={t("contact.form.message")}
|
||||
rows={6}
|
||||
rows={5}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
|
||||
<button
|
||||
<div className="flex mt-6 rounded-xl bg-gradient-to-br from-gold-light to-gold-mid p-0.5 shadow-gold-glow">
|
||||
<motion.button
|
||||
type="submit"
|
||||
className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
|
||||
className="flex-1 font-semibold px-8 py-3 text-xl md:text-2xl bg-custom-bgdark text-white rounded-[0.65rem] hover:bg-transparent transition-colors duration-300"
|
||||
whileTap={{ scale: 0.97 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
>
|
||||
{t("contact.form.button")}
|
||||
</button>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<ToastContainer
|
||||
@@ -119,7 +189,7 @@ const ContactForm = () => {
|
||||
pauseOnHover
|
||||
theme="dark"
|
||||
/>
|
||||
</form>
|
||||
</motion.form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,22 +1,48 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import ContactForm from "./ContactForm";
|
||||
|
||||
const ContactPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="header-text">
|
||||
<h1>
|
||||
<motion.h1
|
||||
initial={
|
||||
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }
|
||||
}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
{t("contact.heading.part1")} <br />
|
||||
{t("contact.heading.part2")}{" "}
|
||||
<span className="gold-text">{t("contact.heading.part3")}</span>{" "}
|
||||
{t("contact.heading.part4")}
|
||||
</h1>
|
||||
<h2 className="sub-header-text ">
|
||||
</motion.h1>
|
||||
<motion.h2
|
||||
className="sub-header-text"
|
||||
initial={
|
||||
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }
|
||||
}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 22,
|
||||
stiffness: 140,
|
||||
delay: 0.05,
|
||||
}}
|
||||
>
|
||||
{t("contact.subheading.part1")} <br />
|
||||
{t("contact.subheading.part2")}
|
||||
</h2>
|
||||
</motion.h2>
|
||||
</div>
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
interface Country {
|
||||
code: string;
|
||||
iso: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const COUNTRIES: Country[] = [
|
||||
{ code: "+351", iso: "pt", label: "Portugal" },
|
||||
{ code: "+34", iso: "es", label: "Spain" },
|
||||
{ code: "+33", iso: "fr", label: "France" },
|
||||
{ code: "+44", iso: "gb", label: "United Kingdom" },
|
||||
{ code: "+1", iso: "us", label: "United States" },
|
||||
{ code: "+55", iso: "br", label: "Brazil" },
|
||||
];
|
||||
|
||||
const flagUrl = (iso: string) => `https://flagcdn.com/${iso}.svg`;
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
onChange: (code: string) => void;
|
||||
}
|
||||
|
||||
const PhoneCodeSelect = ({ value, onChange }: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const active = COUNTRIES.find((c) => c.code === value) ?? COUNTRIES[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handlePointerDown = (e: MouseEvent) => {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handlePointerDown);
|
||||
return () => document.removeEventListener("mousedown", handlePointerDown);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={containerRef}>
|
||||
<input type="hidden" name="phone_code" value={active.code} />
|
||||
<motion.button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 outline-none"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
aria-label="Country code"
|
||||
>
|
||||
<img
|
||||
src={flagUrl(active.iso)}
|
||||
alt={active.label}
|
||||
className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
|
||||
/>
|
||||
<span className="text-sm md:text-base text-white font-medium leading-none">
|
||||
{active.code}
|
||||
</span>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: -6 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -6 }}
|
||||
transition={{ type: "spring", damping: 24, stiffness: 300 }}
|
||||
style={{ transformOrigin: "top left" }}
|
||||
className="absolute left-0 top-full mt-2 w-48 rounded-xl glass-panel shadow-glass-lg overflow-hidden z-20"
|
||||
>
|
||||
{COUNTRIES.map((country) => (
|
||||
<button
|
||||
key={country.code}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onChange(country.code);
|
||||
setOpen(false);
|
||||
}}
|
||||
className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
|
||||
country.code === active.code
|
||||
? "text-gold-light bg-white/5"
|
||||
: "text-white/70 hover:bg-white/5 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={flagUrl(country.iso)}
|
||||
alt={country.label}
|
||||
className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
|
||||
/>
|
||||
<span className="flex-1">{country.label}</span>
|
||||
<span className="text-white/40">{country.code}</span>
|
||||
</button>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhoneCodeSelect;
|
||||
@@ -1,13 +1,15 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import HeroImg from "../../../assets/HeroImg.svg";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import Stars from "../../../assets/Stars.svg";
|
||||
import HeroVisual from "./HeroVisual";
|
||||
|
||||
const Hero = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
const handleNavigation = (path: string) => {
|
||||
const element = document.getElementById(path);
|
||||
const navbarHeight = 110; // Replace with your navbar's height
|
||||
const navbarHeight = 110;
|
||||
if (element) {
|
||||
const top =
|
||||
element.getBoundingClientRect().top + window.scrollY - navbarHeight;
|
||||
@@ -15,38 +17,56 @@ const Hero = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const rise = (delay = 0) =>
|
||||
prefersReducedMotion
|
||||
? { initial: { opacity: 0 }, animate: { opacity: 1 } }
|
||||
: {
|
||||
initial: { opacity: 0, y: 24 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: {
|
||||
type: "spring" as const,
|
||||
damping: 22,
|
||||
stiffness: 140,
|
||||
delay,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
|
||||
<div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
|
||||
<img className="items-center" src={HeroImg} alt="hero"></img>
|
||||
</div>
|
||||
<motion.div
|
||||
className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex"
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, x: -30 }}
|
||||
animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, x: 0 }}
|
||||
transition={{ type: "spring", damping: 20, stiffness: 100 }}
|
||||
>
|
||||
<HeroVisual />
|
||||
</motion.div>
|
||||
<div className="justify-center items-center lg:w-1/2 xl:w-1/2">
|
||||
<div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
|
||||
<img
|
||||
<motion.img
|
||||
src={Stars}
|
||||
alt="hero"
|
||||
className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
|
||||
></img>
|
||||
{...rise(0)}
|
||||
/>
|
||||
<div>
|
||||
<h1
|
||||
<motion.h1
|
||||
className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
|
||||
{...rise(0.05)}
|
||||
>
|
||||
{t("hero.heading.part1")}
|
||||
</h1>
|
||||
<h1
|
||||
</motion.h1>
|
||||
<motion.h1
|
||||
className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
|
||||
{...rise(0.1)}
|
||||
>
|
||||
{t("hero.heading.part2")}
|
||||
</h1>
|
||||
<div>
|
||||
<img
|
||||
src={HeroImg}
|
||||
alt="heroSm"
|
||||
className="flex mt-6 lg:hidden"
|
||||
></img>
|
||||
<span className="gold-text">{t("hero.heading.part2")}</span>
|
||||
</motion.h1>
|
||||
<div className="flex mt-6 lg:hidden">
|
||||
<HeroVisual />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-5 lg:mx-0">
|
||||
<motion.div className="mx-5 lg:mx-0" {...rise(0.15)}>
|
||||
<h2
|
||||
className={
|
||||
i18n.language === "en"
|
||||
@@ -63,21 +83,26 @@ const Hero = () => {
|
||||
>
|
||||
{t("hero.subheading.part2")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
|
||||
<a
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-gold-glow"
|
||||
{...rise(0.2)}
|
||||
>
|
||||
<motion.a
|
||||
className="flex w-full"
|
||||
href="Contact"
|
||||
whileTap={{ scale: 0.97 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleNavigation("Contact");
|
||||
}}
|
||||
>
|
||||
<button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
|
||||
<button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-custom-bgdark rounded-xl hover:bg-transparent transition-colors duration-300">
|
||||
{t("hero.button")}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import Logo from "../../../assets/logo.svg";
|
||||
|
||||
interface OrbitConfig {
|
||||
rotateZ: number;
|
||||
rotateX: number;
|
||||
duration: number;
|
||||
reverse: boolean;
|
||||
inset: string;
|
||||
}
|
||||
|
||||
const orbits: OrbitConfig[] = [
|
||||
{ rotateZ: 55, rotateX: 66, duration: 9, reverse: false, inset: "6%" },
|
||||
{ rotateZ: -55, rotateX: 66, duration: 7, reverse: true, inset: "16%" },
|
||||
];
|
||||
|
||||
const HeroVisual = () => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-xs sm:max-w-sm lg:max-w-lg mx-auto aspect-square">
|
||||
<div className="absolute inset-[26%] rounded-full bg-gradient-to-br from-gold-light to-gold-dark opacity-30 blur-3xl" />
|
||||
|
||||
{orbits.map((orbit, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute rounded-full border border-gold-light/30"
|
||||
style={{
|
||||
inset: orbit.inset,
|
||||
transform: `rotateZ(${orbit.rotateZ}deg) rotateX(${orbit.rotateX}deg)`,
|
||||
}}
|
||||
initial={{ opacity: 0, scale: 0.85 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
stiffness: 100,
|
||||
delay: i * 0.15,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
animate={{
|
||||
rotate: prefersReducedMotion
|
||||
? orbit.reverse
|
||||
? -30
|
||||
: 30
|
||||
: orbit.reverse
|
||||
? -360
|
||||
: 360,
|
||||
}}
|
||||
transition={
|
||||
prefersReducedMotion
|
||||
? { duration: 0.6, ease: "easeOut" }
|
||||
: {
|
||||
duration: orbit.duration,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span className="absolute -top-[5px] left-1/2 -translate-x-1/2 h-2.5 w-2.5 rounded-full bg-gold-light shadow-[0_0_10px_2px_rgba(250,204,151,0.55)]" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-[32%] rounded-full glass-panel shadow-glass-lg flex items-center justify-center z-10"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ type: "spring", damping: 20, stiffness: 100 }}
|
||||
>
|
||||
<img src={Logo} alt="LK Results" className="w-2/5 h-2/5 opacity-90" />
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroVisual;
|
||||
@@ -9,21 +9,24 @@ const CardContainer = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="mt-10 lg:mt-32 flex gap-10 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
|
||||
<div className="mt-10 lg:mt-16 flex gap-5 lg:gap-6 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
|
||||
<Card
|
||||
title={t("optimization.cards.card1.title")}
|
||||
description={t("optimization.cards.card1.description")}
|
||||
image={yourself}
|
||||
index={0}
|
||||
/>
|
||||
<Card
|
||||
title={t("optimization.cards.card2.title")}
|
||||
description={t("optimization.cards.card2.description")}
|
||||
image={staff}
|
||||
index={1}
|
||||
/>
|
||||
<Card
|
||||
title={t("optimization.cards.card3.title")}
|
||||
description={t("optimization.cards.card3.description")}
|
||||
image={agency}
|
||||
index={2}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,18 +1,29 @@
|
||||
import CardContainer from './CardContainer'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import CardContainer from "./CardContainer";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
const Optimization = () => {
|
||||
const { t } = useTranslation()
|
||||
const { t } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="header-text">
|
||||
<h1>
|
||||
<span className="gold-text">"</span>
|
||||
{t("optimization.heading.part1")} <br /> {t("optimization.heading.part2")}
|
||||
<span className="gold-text">"</span>
|
||||
</h1>
|
||||
<motion.h1
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
<span className="gold-text">“</span>
|
||||
{t("optimization.heading.part1")} <br />{" "}
|
||||
{t("optimization.heading.part2")}
|
||||
<span className="gold-text">”</span>
|
||||
</motion.h1>
|
||||
<CardContainer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Optimization
|
||||
export default Optimization;
|
||||
@@ -5,26 +5,30 @@ const CardContainer = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="mt-10 flex-col h-full lg:grid lg:grid-cols-2 lg:gap-10 px-10 lg:px-40 2xl:px-96 1920:margin-calc">
|
||||
<div className="mt-10 flex flex-col gap-5 h-full lg:grid lg:grid-cols-2 lg:gap-6 px-10 lg:px-40 2xl:px-96 1920:margin-calc">
|
||||
<Card
|
||||
title={t("results.cards.card1.title")}
|
||||
description={t("results.cards.card1.description")}
|
||||
image=""
|
||||
index={0}
|
||||
/>
|
||||
<Card
|
||||
title={t("results.cards.card2.title")}
|
||||
description={t("results.cards.card2.description")}
|
||||
image=""
|
||||
index={1}
|
||||
/>
|
||||
<Card
|
||||
title={t("results.cards.card3.title")}
|
||||
description={t("results.cards.card3.description")}
|
||||
image=""
|
||||
index={2}
|
||||
/>
|
||||
<Card
|
||||
title={t("results.cards.card4.title")}
|
||||
description={t("results.cards.card4.description")}
|
||||
image=""
|
||||
index={3}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import CardContainer from "./CardContainer";
|
||||
|
||||
const ResultsPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="header-text">
|
||||
<h1>
|
||||
<span className="gold-text">"</span>
|
||||
<motion.h1
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
<span className="gold-text">“</span>
|
||||
{t("results.heading.part1")} <br /> {t("results.heading.part2")}
|
||||
<span className="gold-text">"</span>
|
||||
</h1>
|
||||
<span className="gold-text">”</span>
|
||||
</motion.h1>
|
||||
<CardContainer />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
|
||||
<div className="flex flex-row gap-1 mx-auto w-full sm:w-fit justify-center rounded-full bg-black/25 border border-white/5 p-1">
|
||||
<CardBtn
|
||||
title="Marketing"
|
||||
onClick={() => handleClick("markCards")}
|
||||
@@ -28,12 +28,12 @@ const Buttons = ({ changeActiveGroup }: props) => {
|
||||
isSelected={selectedButton === "webCards"}
|
||||
/>
|
||||
<CardBtn
|
||||
title="Social Media"
|
||||
title="Social"
|
||||
onClick={() => handleClick("smCards")}
|
||||
isSelected={selectedButton === "smCards"}
|
||||
/>
|
||||
<CardBtn
|
||||
title="Camera & Edits"
|
||||
title="Camera"
|
||||
onClick={() => handleClick("camCards")}
|
||||
isSelected={selectedButton === "camCards"}
|
||||
/>
|
||||
|
||||
@@ -9,30 +9,34 @@ const CameraCards = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
|
||||
<Card
|
||||
step={1}
|
||||
title={t("services.cards.media.card1.title")}
|
||||
description={t("services.cards.media.card1.description")}
|
||||
imgSrc={EnvisionImg}
|
||||
delay="0s"
|
||||
delay={0}
|
||||
/>
|
||||
<Card
|
||||
step={2}
|
||||
title={t("services.cards.media.card2.title")}
|
||||
description={t("services.cards.media.card2.description")}
|
||||
imgSrc={CaptureImg}
|
||||
delay="0.1s"
|
||||
delay={0.08}
|
||||
/>
|
||||
<Card
|
||||
step={3}
|
||||
title={t("services.cards.media.card3.title")}
|
||||
description={t("services.cards.media.card3.description")}
|
||||
imgSrc={EditImg}
|
||||
delay="0.2s"
|
||||
delay={0.16}
|
||||
/>
|
||||
<Card
|
||||
step={4}
|
||||
title={t("services.cards.media.card4.title")}
|
||||
description={t("services.cards.media.card4.description")}
|
||||
imgSrc={PublishImg}
|
||||
delay="0.3s"
|
||||
delay={0.24}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface props {
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
@@ -5,14 +7,24 @@ interface props {
|
||||
}
|
||||
|
||||
const CardBtn = ({ title, onClick, isSelected }: props) => {
|
||||
const buttonClass = isSelected
|
||||
? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-2xl cursor-pointer"
|
||||
: "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-xl text-gray-400 shadow-inner hover:text-text-gold cursor-pointer";
|
||||
|
||||
return (
|
||||
<a className={buttonClass} onClick={onClick}>
|
||||
{title}
|
||||
</a>
|
||||
<motion.button
|
||||
className={`relative flex-1 whitespace-nowrap rounded-full py-1.5 px-3 sm:px-4 text-xs sm:text-sm font-medium cursor-pointer transition-colors duration-300 ${
|
||||
isSelected ? "text-custom-bgdark" : "text-white/50 hover:text-white"
|
||||
}`}
|
||||
onClick={onClick}
|
||||
whileTap={{ scale: 0.96 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
>
|
||||
{isSelected && (
|
||||
<motion.span
|
||||
layoutId="service-tab-pill"
|
||||
className="absolute inset-0 rounded-full bg-gradient-to-br from-gold-light to-gold-mid shadow-gold-glow"
|
||||
transition={{ type: "spring", stiffness: 380, damping: 32 }}
|
||||
/>
|
||||
)}
|
||||
<span className="relative font-semibold">{title}</span>
|
||||
</motion.button>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
||||
import WesiteCards from "./WesiteCards";
|
||||
import Buttons from "./Buttons";
|
||||
import MarketingCards from "./MarketingCards";
|
||||
@@ -7,6 +8,7 @@ import SocialMediaCards from "./SocialMedia";
|
||||
|
||||
const CardGroup = () => {
|
||||
const [activeGroup, setActiveGroup] = useState("webCards");
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
const changeActiveGroup = (group: string) => {
|
||||
setActiveGroup(group);
|
||||
@@ -31,9 +33,29 @@ const CardGroup = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
|
||||
{ActiveCards && <ActiveCards />}
|
||||
<div className="flex flex-col gap-8 lg:gap-10">
|
||||
<Buttons changeActiveGroup={changeActiveGroup} />
|
||||
<div className="relative">
|
||||
<AnimatePresence mode="wait">
|
||||
{ActiveCards && (
|
||||
<motion.div
|
||||
key={activeGroup}
|
||||
initial={
|
||||
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
|
||||
}
|
||||
animate={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
exit={
|
||||
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
|
||||
}
|
||||
transition={{ type: "spring", damping: 26, stiffness: 220 }}
|
||||
>
|
||||
<ActiveCards />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,30 +9,34 @@ const MarketingCards = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
|
||||
<Card
|
||||
step={1}
|
||||
title={t("services.cards.marketing.card1.title")}
|
||||
description={t("services.cards.marketing.card1.description")}
|
||||
imgSrc={AnaliseImg}
|
||||
delay="0s"
|
||||
delay={0}
|
||||
/>
|
||||
<Card
|
||||
step={2}
|
||||
title={t("services.cards.marketing.card2.title")}
|
||||
description={t("services.cards.marketing.card2.description")}
|
||||
imgSrc={CreateImg}
|
||||
delay="0.1s"
|
||||
delay={0.08}
|
||||
/>
|
||||
<Card
|
||||
step={3}
|
||||
title={t("services.cards.marketing.card3.title")}
|
||||
description={t("services.cards.marketing.card3.description")}
|
||||
imgSrc={ScaleImg}
|
||||
delay="0.2s"
|
||||
delay={0.16}
|
||||
/>
|
||||
<Card
|
||||
step={4}
|
||||
title={t("services.cards.marketing.card4.title")}
|
||||
description={t("services.cards.marketing.card4.description")}
|
||||
imgSrc={ExecuteImg}
|
||||
delay="0.3s"
|
||||
delay={0.24}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,36 +1,49 @@
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
interface IProps {
|
||||
step: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imgSrc: string;
|
||||
delay: string;
|
||||
delay: number;
|
||||
}
|
||||
|
||||
const Card = ({ title, description, imgSrc, delay }: IProps) => {
|
||||
const Card = ({ step, title, description, imgSrc, delay }: IProps) => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
|
||||
style={{
|
||||
backgroundImage: `url(${imgSrc})`,
|
||||
filter: "saturate(50%)",
|
||||
animation: `fadeEffect 1s ${delay} forwards`,
|
||||
opacity: 0,
|
||||
<motion.div
|
||||
className="flex flex-col gap-4"
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 16 }}
|
||||
animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 24,
|
||||
stiffness: 160,
|
||||
delay: prefersReducedMotion ? 0 : delay,
|
||||
}}
|
||||
>
|
||||
<div className="lg:my-6">
|
||||
<h2
|
||||
className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
|
||||
text-3xl font-bold"
|
||||
>
|
||||
<div className="relative aspect-[4/5] rounded-2xl overflow-hidden ring-1 ring-white/10">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${imgSrc})` }}
|
||||
whileHover={prefersReducedMotion ? {} : { scale: 1.06 }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 120 }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent" />
|
||||
<span className="absolute top-3 left-3 h-8 w-8 rounded-full glass-panel flex items-center justify-center text-xs font-bold text-gold-light">
|
||||
{String(step).padStart(2, "0")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-0.5">
|
||||
<h3 className="text-lg lg:text-xl font-semibold text-white tracking-tight">
|
||||
{title}
|
||||
</h2>
|
||||
<p
|
||||
className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
|
||||
xl:mb-10 font-thin text-xl"
|
||||
>
|
||||
</h3>
|
||||
<p className="mt-1.5 text-sm lg:text-base text-white/55 leading-snug">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
|
||||
|
||||
const ServiceCardContainer = () => {
|
||||
return (
|
||||
<div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg ">
|
||||
<div className="rounded-3xl mx-4 lg:mx-16 xl:mx-24 2xl:mx-48 1920:margin-calc mt-10 glass-panel shadow-glass-lg p-5 md:p-8 lg:p-10">
|
||||
<CardGroup />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import Underline from "../../../assets/Underline.svg";
|
||||
import ServiceCardContainer from "./ServiceCardContainer";
|
||||
|
||||
const Services = () => {
|
||||
const { t } = useTranslation();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="header-text">
|
||||
<h1>
|
||||
<motion.h1
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140 }}
|
||||
>
|
||||
{t("services.heading.part1")}
|
||||
<span className="relative inline-block">
|
||||
{t("services.heading.part2")}{" "}
|
||||
@@ -17,10 +26,17 @@ const Services = () => {
|
||||
className="absolute bottom-0 left-0"
|
||||
/>
|
||||
</span>{" "}
|
||||
</h1>
|
||||
<h1>
|
||||
</motion.h1>
|
||||
<motion.h1
|
||||
initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
|
||||
whileInView={
|
||||
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
||||
}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ type: "spring", damping: 22, stiffness: 140, delay: 0.05 }}
|
||||
>
|
||||
{t("services.heading.part3")}
|
||||
</h1>
|
||||
</motion.h1>
|
||||
<ServiceCardContainer />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,30 +9,34 @@ const SocialMediaCards = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
|
||||
<Card
|
||||
step={1}
|
||||
title={t("services.cards.social.card1.title")}
|
||||
description={t("services.cards.social.card1.description")}
|
||||
imgSrc={AlgorithmImg}
|
||||
delay="0s"
|
||||
delay={0}
|
||||
/>
|
||||
<Card
|
||||
step={2}
|
||||
title={t("services.cards.social.card2.title")}
|
||||
description={t("services.cards.social.card2.description")}
|
||||
imgSrc={ScheduleImg}
|
||||
delay="0.1s"
|
||||
delay={0.08}
|
||||
/>
|
||||
<Card
|
||||
step={3}
|
||||
title={t("services.cards.social.card3.title")}
|
||||
description={t("services.cards.social.card3.description")}
|
||||
imgSrc={TargetImg}
|
||||
delay="0.2s"
|
||||
delay={0.16}
|
||||
/>
|
||||
<Card
|
||||
step={4}
|
||||
title={t("services.cards.social.card4.title")}
|
||||
description={t("services.cards.social.card4.description")}
|
||||
imgSrc={ExpandImg}
|
||||
delay="0.3s"
|
||||
delay={0.24}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,30 +9,34 @@ const WesiteCards = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
|
||||
<Card
|
||||
step={1}
|
||||
title={t("services.cards.website.card1.title")}
|
||||
description={t("services.cards.website.card1.description")}
|
||||
imgSrc={IdealizeImg}
|
||||
delay="0s"
|
||||
delay={0}
|
||||
/>
|
||||
<Card
|
||||
step={2}
|
||||
title={t("services.cards.website.card2.title")}
|
||||
description={t("services.cards.website.card2.description")}
|
||||
imgSrc={DesignImg}
|
||||
delay="0.1s"
|
||||
delay={0.08}
|
||||
/>
|
||||
<Card
|
||||
step={3}
|
||||
title={t("services.cards.website.card3.title")}
|
||||
description={t("services.cards.website.card3.description")}
|
||||
imgSrc={CodeImg}
|
||||
delay="0.2s"
|
||||
delay={0.16}
|
||||
/>
|
||||
<Card
|
||||
step={4}
|
||||
title={t("services.cards.website.card4.title")}
|
||||
description={t("services.cards.website.card4.description")}
|
||||
imgSrc={BuildImg}
|
||||
delay="0.3s"
|
||||
delay={0.24}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
+131
-25
@@ -1,71 +1,177 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-gradient-to-br from-custom-bglight to-custom-bgdark;
|
||||
::selection {
|
||||
background: rgba(250, 204, 151, 0.25);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-custom-bgdark text-white;
|
||||
background: radial-gradient(120% 90% at 50% -10%, #26262c 0%, #131316 42%, #06060b 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #06060b;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #facc97, #54330f);
|
||||
border-radius: 999px;
|
||||
border: 2px solid #06060b;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid #facc97;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Display / hero type — negative tracking + tight leading, sized down for room to breathe */
|
||||
.hero-text {
|
||||
@apply font-medium text-5xl lg:text-7xl xl:text-8xl;
|
||||
@apply font-semibold text-5xl lg:text-7xl xl:text-8xl;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.hero-text-pt {
|
||||
@apply font-medium text-4xl lg:text-6xl xl:text-7xl;
|
||||
@apply font-semibold text-4xl lg:text-6xl xl:text-7xl;
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.hero-sub-text {
|
||||
@apply italic text-lg md:text-2xl 2xl:text-3xl;
|
||||
@apply text-lg md:text-2xl 2xl:text-3xl text-white/60;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.005em;
|
||||
font-style: normal;
|
||||
}
|
||||
.hero-sub-text-pt {
|
||||
@apply italic text-lg md:text-xl 2xl:text-2xl;
|
||||
@apply text-lg md:text-xl 2xl:text-2xl text-white/60;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
@apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
|
||||
@apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center font-semibold;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
.sub-header-text {
|
||||
@apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400;
|
||||
@apply block text-sm mx-10 md:text-2xl mt-5 text-white/50;
|
||||
font-weight: 300;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
|
||||
@apply rounded-xl px-4 py-3 mt-2 bg-white/[0.03] border border-white/10 text-sm md:text-base text-white placeholder-white/35 transition-colors duration-200;
|
||||
}
|
||||
.form-input:focus {
|
||||
@apply border-gold-light/50 bg-white/[0.05];
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.phone-input-group {
|
||||
@apply rounded-xl mt-2 px-4 py-3 bg-white/[0.03] border border-white/10 transition-colors duration-200;
|
||||
}
|
||||
.phone-input-group:focus-within {
|
||||
@apply border-gold-light/50 bg-white/[0.05];
|
||||
}
|
||||
.phone-number-input {
|
||||
@apply flex-1 min-w-0 bg-transparent text-white placeholder-white/35 text-sm md:text-base pl-2 outline-none leading-tight;
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
|
||||
@apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-mid;
|
||||
}
|
||||
|
||||
.fade-effect {
|
||||
animation: fadeEffect 1s ease-in-out;
|
||||
}
|
||||
|
||||
.results-card-heading {
|
||||
@apply mt-2 lg:mt-6 text-3xl xl:text-5xl;
|
||||
}
|
||||
.results-card-heading-pt {
|
||||
@apply mt-2 lg:mt-6 text-2xl xl:text-4xl;
|
||||
}
|
||||
|
||||
.results-card-content {
|
||||
@apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
|
||||
animation: fadeEffect 0.6s ease-out both;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
@apply text-gray-400 font-medium text-xs md:text-base
|
||||
@apply text-white/45 font-medium text-xs md:text-sm tracking-wide;
|
||||
}
|
||||
|
||||
.footer-text-pt {
|
||||
@apply text-gray-400 font-medium text-xs md:text-base
|
||||
@apply text-white/45 font-medium text-xs md:text-sm tracking-wide;
|
||||
}
|
||||
|
||||
/* Glass material — the floating functional layer (§12) */
|
||||
.glass-panel {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
|
||||
border: 1px solid rgba(250, 204, 151, 0.14);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
}
|
||||
|
||||
.glass-nav {
|
||||
background: rgba(10, 10, 13, 0.55);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border-bottom: 1px solid rgba(250, 204, 151, 0.1);
|
||||
}
|
||||
|
||||
/* Heavier material for full takeover surfaces (mobile menu sheet) — a
|
||||
bigger surface needs to read as thicker, per the materials guidance. */
|
||||
.glass-sheet {
|
||||
background: rgba(14, 14, 17, 0.92);
|
||||
backdrop-filter: blur(28px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(150%);
|
||||
border: 1px solid rgba(250, 204, 151, 0.14);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.glass-sheet {
|
||||
background: #0c0c10;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeEffect {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
.glass-panel,
|
||||
.glass-nav {
|
||||
background: #0c0c10;
|
||||
border-color: rgba(250, 204, 151, 0.4);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
+133
-57
@@ -3,69 +3,145 @@ import Navbar from "../Components/Navbar/Navbar";
|
||||
import Footer from "../Components/Footer/Footer";
|
||||
|
||||
const PP = () => {
|
||||
const { t } = useTranslation("PP")
|
||||
|
||||
const { t } = useTranslation("PP");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar />
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<h1 className="text-3xl font-bold text-center mb-6">{t("pp.pageTitle")}</h1>
|
||||
<div className="shadow-md rounded-lg p-8">
|
||||
<p className="mb-4">{t("pp.lastUpdated")}</p>
|
||||
<p className="mb-4">{t("pp.introText")}</p>
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp1.title")}</h2>
|
||||
{t("pp.pp1.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp2.title")}</h2>
|
||||
{t("pp.pp2.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp3.title")}</h2>
|
||||
{t("pp.pp3.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp4.title")}</h2>
|
||||
{t("pp.pp4.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp5.title")}</h2>
|
||||
{t("pp.pp5.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp6.title")}</h2>
|
||||
{t("pp.pp6.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp7.title")}</h2>
|
||||
{t("pp.pp7.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp8.title")}</h2>
|
||||
{t("pp.pp8.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<div className="container mx-auto px-4 py-12 max-w-4xl">
|
||||
<h1 className="text-3xl md:text-5xl font-semibold text-center mb-10 tracking-tight">
|
||||
{t("pp.pageTitle")}
|
||||
</h1>
|
||||
<div className="glass-panel shadow-glass-lg rounded-3xl p-6 md:p-12">
|
||||
<p className="mb-4 text-white/45 text-sm">{t("pp.lastUpdated")}</p>
|
||||
<p className="mb-8 text-white/70 leading-relaxed">
|
||||
{t("pp.introText")}
|
||||
</p>
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp1.title")}
|
||||
</h2>
|
||||
{t("pp.pp1.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp2.title")}
|
||||
</h2>
|
||||
{t("pp.pp2.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp3.title")}
|
||||
</h2>
|
||||
{t("pp.pp3.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp4.title")}
|
||||
</h2>
|
||||
{t("pp.pp4.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp5.title")}
|
||||
</h2>
|
||||
{t("pp.pp5.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp6.title")}
|
||||
</h2>
|
||||
{t("pp.pp6.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp7.title")}
|
||||
</h2>
|
||||
{t("pp.pp7.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("pp.pp8.title")}
|
||||
</h2>
|
||||
{t("pp.pp8.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PP;
|
||||
export default PP;
|
||||
+103
-45
@@ -3,57 +3,115 @@ import Navbar from "../Components/Navbar/Navbar";
|
||||
import Footer from "../Components/Footer/Footer";
|
||||
|
||||
const TOS = () => {
|
||||
const { t } = useTranslation("TOS")
|
||||
|
||||
const { t } = useTranslation("TOS");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar />
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<h1 className="text-3xl font-bold text-center mb-6">{t("tos.pageTitle")}</h1>
|
||||
<div className="shadow-md rounded-lg p-8">
|
||||
<p className="mb-4">{t("tos.lastUpdated")}</p>
|
||||
<p className="mb-4">{t("tos.introText")}</p>
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos1.title")}</h2>
|
||||
{t("tos.tos1.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos2.title")}</h2>
|
||||
{t("tos.tos2.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos3.title")}</h2>
|
||||
{t("tos.tos3.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos4.title")}</h2>
|
||||
{t("tos.tos4.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos5.title")}</h2>
|
||||
{t("tos.tos5.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos6.title")}</h2>
|
||||
{t("tos.tos6.desc").split("\n\n").map((paragraph, index) => (
|
||||
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>{line}<br/></span>
|
||||
))}</p>
|
||||
))}
|
||||
<div className="container mx-auto px-4 py-12 max-w-4xl">
|
||||
<h1 className="text-3xl md:text-5xl font-semibold text-center mb-10 tracking-tight">
|
||||
{t("tos.pageTitle")}
|
||||
</h1>
|
||||
<div className="glass-panel shadow-glass-lg rounded-3xl p-6 md:p-12">
|
||||
<p className="mb-4 text-white/45 text-sm">{t("tos.lastUpdated")}</p>
|
||||
<p className="mb-8 text-white/70 leading-relaxed">
|
||||
{t("tos.introText")}
|
||||
</p>
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos1.title")}
|
||||
</h2>
|
||||
{t("tos.tos1.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos2.title")}
|
||||
</h2>
|
||||
{t("tos.tos2.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos3.title")}
|
||||
</h2>
|
||||
{t("tos.tos3.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos4.title")}
|
||||
</h2>
|
||||
{t("tos.tos4.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos5.title")}
|
||||
</h2>
|
||||
{t("tos.tos5.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
|
||||
{t("tos.tos6.title")}
|
||||
</h2>
|
||||
{t("tos.tos6.desc")
|
||||
.split("\n\n")
|
||||
.map((paragraph, index) => (
|
||||
<p key={index} className="mb-4 text-white/70 leading-relaxed">
|
||||
{paragraph.split("\n").map((line, index) => (
|
||||
<span key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TOS;
|
||||
export default TOS;
|
||||
+10
-2
@@ -12,13 +12,21 @@ export default {
|
||||
"text-gold": "#FACC97",
|
||||
"gold-light": "#FACC97",
|
||||
"gold-dark": "#54330F",
|
||||
"gold-mid": "#C9924F",
|
||||
"gray-bg": "#1C1C1C",
|
||||
surface: "rgba(255, 255, 255, 0.04)",
|
||||
"surface-border": "rgba(250, 204, 151, 0.14)",
|
||||
},
|
||||
fontFamily: {
|
||||
baijam: ['"Bai Jamjuree"', "sans-serif"],
|
||||
},
|
||||
backgroundImage: {
|
||||
"hero-pattern": "url('./src/assets/HeroImg.svg')",
|
||||
boxShadow: {
|
||||
glass: "0 1px 1px rgba(250, 204, 151, 0.08), 0 20px 60px -20px rgba(0, 0, 0, 0.6)",
|
||||
"glass-lg": "0 1px 1px rgba(250, 204, 151, 0.1), 0 30px 90px -20px rgba(0, 0, 0, 0.7)",
|
||||
"gold-glow": "0 8px 30px -8px rgba(250, 204, 151, 0.35)",
|
||||
},
|
||||
backdropBlur: {
|
||||
xs: "2px",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user