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
@@ -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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user