FernandoJVideira/LK_Landing_Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Website overall

Browse Source
This commit is contained in:
FernandoJVideira
2024-07-01 16:40:40 +01:00
parent b552bc4d3a
commit b9822eb21e
18 changed files with 135 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lockb
Executable
BIN
View File
Binary file not shown.
package-lock.json
Generated
+58 -1
View File
@@ -20,6 +20,7 @@
"react-dom": "^18.2.0",
"react-i18next": "^14.1.2",
"react-icons": "^5.0.1",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^6.22.3",
"react-toastify": "^10.0.5",
"sort-by": "^0.0.2"
@@ -1945,6 +1946,11 @@
"node": ">= 6"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3077,12 +3083,32 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
},
"node_modules/lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3246,7 +3272,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -3589,6 +3614,16 @@
"node": ">= 0.8.0"
}
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3670,6 +3705,28 @@
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-phone-input-2": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
"integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
"dependencies": {
"classnames": "^2.2.6",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.reduce": "^4.6.0",
"lodash.startswith": "^4.2.1",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
"react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
}
},
"node_modules/react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
package.json
+1
View File
@@ -22,6 +22,7 @@
"react-dom": "^18.2.0",
"react-i18next": "^14.1.2",
"react-icons": "^5.0.1",
"react-phone-number-input": "^3.4.3",
"react-router-dom": "^6.22.3",
"react-toastify": "^10.0.5",
"sort-by": "^0.0.2"
public/locales/common/en.json
+4 -3
View File
@@ -14,7 +14,7 @@
"part1": "We do all the digital footprint for you,",
"part2": "so you can focus on what's important!"
},
"button": "Yes, I want that!"
"button": "Contact Us"
},
"services": {
"heading": {
@@ -159,13 +159,14 @@
"company": "Company",
"phone": "Phone",
"question": "What is your most important question?",
"message": "Message",
"reference": "How did you hear about us?",
"button": "Send"
},
"toasts": {
"success": "Your message has been sent successfully!",
"error": "An error occurred while sending your message. Please try again later.",
"empty": "Please fill out all the fields before sending the message."
"empty": "Please fill out all the fields before sending the message.",
"invalidCountryCode": "Please enter a valid country code."
}
},
"footer": {
public/locales/common/pt.json
+2 -1
View File
@@ -165,7 +165,8 @@
"toasts": {
"success": "A tua mensagem foi enviada com sucesso!",
"error": "Ocorreu um erro ao enviar a tua mensagem. Por favor, tenta novamente mais tarde.",
"empty": "Por favor, preenche todos os campos antes de enviar a mensagem."
"empty": "Por favor, preenche todos os campos antes de enviar a mensagem.",
"invalidCountryCode": "Por favor, preenche um código de país válido."
}
},
"footer": {
src/Components/Pages/Contact/ContactForm.css
+6
View File
@@ -0,0 +1,6 @@
.PhoneInputInput {
background-color: transparent;
border: none;
outline: none;
width: 100%;
}
src/Components/Pages/Contact/ContactForm.tsx
+48 -19
View File
@@ -1,11 +1,15 @@
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 PhoneInput, { formatPhoneNumber, parsePhoneNumber } from "react-phone-number-input";
import 'react-phone-number-input/style.css'
import "./ContactForm.css";
const ContactForm = () => {
const { t } = useTranslation();
const [phone, setPhone] = useState<string | undefined>(undefined);
const notify = () => {
toast.success(t("contact.toasts.success"));
@@ -18,6 +22,10 @@ const ContactForm = () => {
const emptyForm = () => {
toast.warning(t("contact.toasts.empty"));
};
const invalidCountryCode = () => {
toast.error(t("contact.toasts.invalidCountryCode"));
};
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -28,11 +36,25 @@ const ContactForm = () => {
(input as HTMLInputElement).value.trim() === ""
);
if (isEmpty) {
if (isEmpty || !phone) { // Check if phone is also empty
emptyForm();
return;
}
let parsedPhone = parsePhoneNumber(phone);
let countryCode = parsedPhone?.countryCallingCode;
if (!countryCode) {
invalidCountryCode();
return;
}
// Append phone number to the form
const phoneInput = document.createElement("input");
phoneInput.setAttribute("type", "hidden");
phoneInput.setAttribute("value", `+${countryCode} ${formatPhoneNumber(phone)}`);
e.currentTarget.appendChild(phoneInput);
emailjs
.sendForm("service_o7kxotj", "template_f30zlog", e.currentTarget, {
publicKey: "vcSOwPedqkRH3nmr9",
@@ -49,20 +71,21 @@ const ContactForm = () => {
);
e.currentTarget.reset();
setPhone(undefined); // Reset phone state
};
return (
<div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
<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="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 +93,24 @@ const ContactForm = () => {
</div>
<div className="flex flex-col md:flex-row md:gap-3">
<input
className="form-input"
className="form-input md:w-1/2"
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="md:w-1/2 flex items-center">
<PhoneInput
defaultCountry="PT"
placeholder={t("contact.form.phone")}
className="form-input placeholder-white w-full"
value={phone}
onChange={setPhone}
inputProps={{
name: "user_phone",
required: true,
}}
/>
</div>
</div>
<div className="flex flex-col">
<input
@@ -90,18 +120,17 @@ const ContactForm = () => {
placeholder={t("contact.form.question")}
></input>
<textarea
<input
className="form-input"
name="message"
placeholder={t("contact.form.message")}
rows={6}
></textarea>
name="user_reference"
placeholder={t("contact.form.reference")}
></input>
</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">
<div className="flex mt-5 mb-10 lg:mt-12 mx-10 sm:mx-40 rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
<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-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-full hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
>
{t("contact.form.button")}
</button>
src/Components/Pages/Hero/Hero.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ const Hero = () => {
<img className="items-center" src={HeroImg} alt="hero"></img>
</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">
<div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right">
<img
src={Stars}
alt="hero"
@@ -64,7 +64,7 @@ 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">
<div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-full bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
<a
className="flex w-full"
href="Contact"
@@ -73,7 +73,7 @@ const Hero = () => {
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-gradient-to-br from-custom-bglight to-custom-bgdark rounded-full hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
{t("hero.button")}
</button>
</a>
src/Components/Pages/Services/Buttons.tsx
+2 -2
View File
@@ -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="lg:px-40 mx-5 gap-5 flex flex-row flex-1 2xl:gap-8 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
<CardBtn
title="Marketing"
onClick={() => handleClick("markCards")}
@@ -33,7 +33,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
isSelected={selectedButton === "smCards"}
/>
<CardBtn
title="Camera & Edits"
title="Video & Edits"
onClick={() => handleClick("camCards")}
isSelected={selectedButton === "camCards"}
/>
src/Components/Pages/Services/CameraCards.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ 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="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
<Card
title={t("services.cards.media.card1.title")}
description={t("services.cards.media.card1.description")}
src/Components/Pages/Services/CardBtn.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ 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-bold md:px-4 py-1 text-xs lg:text-sm xl:text-xl 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 (
src/Components/Pages/Services/CardGroup.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ 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">
<div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl flex flex-col">
{ActiveCards && <ActiveCards />}
<Buttons changeActiveGroup={changeActiveGroup} />
</div>
src/Components/Pages/Services/MarketingCards.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ 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="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
<Card
title={t("services.cards.marketing.card1.title")}
description={t("services.cards.marketing.card1.description")}
src/Components/Pages/Services/ServiceCard.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ interface IProps {
const Card = ({ title, description, imgSrc, delay }: IProps) => {
return (
<div
className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
className="flex flex-col mt-4 lg:mt-0 lg:mr-8 justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
style={{
backgroundImage: `url(${imgSrc})`,
filter: "saturate(50%)",
src/Components/Pages/Services/ServiceCardContainer.tsx
+2 -2
View File
@@ -2,9 +2,9 @@ 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="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 p-0.5 shadow-lg ">
<CardGroup />
</div>
</div>
);
};
src/Components/Pages/Services/SocialMedia.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ 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="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
<Card
title={t("services.cards.social.card1.title")}
description={t("services.cards.social.card1.description")}
src/Components/Pages/Services/WesiteCards.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ 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="h-full flex lg:mt-20 flex-col flex-wrap xl:flex-row mx-4">
<Card
title={t("services.cards.website.card1.title")}
description={t("services.cards.website.card1.description")}
src/index.css
+2 -2
View File
@@ -31,7 +31,7 @@ body {
}
.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-4 mt-2 bg-gray-bg border-solid border border-gray-300 text-xs md:text-xl;
}
.gold-text {
@@ -50,7 +50,7 @@ body {
}
.results-card-content {
@apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
@apply mb-5 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
}
.footer-text {