Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@moraar222
moraar222 committed Aug 28, 2024
1 parent 2fb2fa0 commit 838ea5f
Show file tree
Hide file tree
Showing 7 changed files with 3,008 additions and 87 deletions.
21 changes: 11 additions & 10 deletions components/Feature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import getScrollAnimation from "../utils/getScrollAnimation";
import ScrollAnimationWrapper from "./Layout/ScrollAnimationWrapper";

const features = [
"Powerfull online protection.",
"Internet without borders.",
"Supercharged VPN",
"No specific time limits."
"Effortlessly explore and purchase beauty products .",
"Available wherever you are.",
"Empowering your beauty with tech-savvy perks.",
"Enjoy endless shopping ."
]

const Feature = () => {
Expand All @@ -22,12 +22,13 @@ const Feature = () => {
<div className="grid grid-flow-row sm:grid-flow-col grid-cols-1 sm:grid-cols-2 gap-8 p y-8 my-12">
<ScrollAnimationWrapper className="flex w-full justify-end">
<motion.div className="h-full w-full p-4" variants={scrollAnimation}>
<Image
src="/assets/Illustration2.png"
<img
src="https://i.pinimg.com/564x/ec/47/a1/ec47a143fc449d146efacb1d507bf0f4.jpg"
alt="VPN Illustrasi"
layout="responsive"
quality={100}
height={414}
//layout="responsive"
//quality={100}
className = "max-h-96 object-cover w-full rounded-sm"
height={314}
width={508}
/>
</motion.div>
Expand All @@ -36,7 +37,7 @@ const Feature = () => {

<motion.div className="flex flex-col items-end justify-center ml-auto w-full lg:w-9/12" variants={scrollAnimation}>
<h3 className="text-3xl lg:text-4xl font-medium leading-relaxed text-black-600">
We Provide Many Features You Can Use
We Provide Many Features You Can Use.
</h3>
<p className="my-2 text-black-500">
You can explore the features that we provide with fun and have their
Expand Down
80 changes: 40 additions & 40 deletions components/Hero.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React, { useMemo } from "react";
import Image from "next/image";
import ButtonPrimary from "./misc/ButtonPrimary";
import {motion} from "framer-motion";
import { motion } from "framer-motion";
import getScrollAnimation from "../utils/getScrollAnimation";
import ScrollAnimationWrapper from "./Layout/ScrollAnimationWrapper";

const Hero = ({
listUser = [
{
name: "Users",
name: "Clients",
number: "390",
icon: "/assets/Icon/heroicons_sm-user.svg",
},
{
name: "Locations",
name: "Cities",
number: "20",
icon: "/assets/Icon/gridicons_location.svg",
},
{
name: "Server",
name: "Brands",
number: "50",
icon: "/assets/Icon/bx_bxs-server.svg",
},
Expand All @@ -27,46 +27,46 @@ const Hero = ({
const scrollAnimation = useMemo(() => getScrollAnimation(), []);

return (
<div
className="max-w-screen-xl mt-24 px-8 xl:px-16 mx-auto"
id="about"
>
<div className="max-w-screen-xl mt-24 px-8 xl:px-16 mx-auto" id="about">
<ScrollAnimationWrapper>
<motion.div
className="grid grid-flow-row sm:grid-flow-col grid-rows-2 md:grid-rows-1 sm:grid-cols-2 gap-8 py-6 sm:py-16"
variants={scrollAnimation}>
<div className=" flex flex-col justify-center items-start row-start-2 sm:row-start-1">
<h1 className="text-3xl lg:text-4xl xl:text-5xl font-medium text-black-600 leading-normal">
Want anything to be easy with <strong>LaslesVPN</strong>.
</h1>
<p className="text-black-500 mt-4 mb-6">
Provide a network for all your needs with ease and fun using
LaslesVPN discover interesting features from us.
</p>
<ButtonPrimary>Get Started</ButtonPrimary>
</div>
<div className="flex w-full">
<motion.div className="h-full w-full" variants={scrollAnimation}>
<Image
src="/assets/Illustration1.png"
alt="VPN Illustrasi"
quality={100}
width={612}
height={383}
layout="responsive"
/>
</motion.div>
</div>
</motion.div>
<motion.div
className="grid grid-flow-row sm:grid-flow-col grid-rows-2 md:grid-rows-1 sm:grid-cols-2 gap-8 py-6 sm:py-16"
variants={scrollAnimation}
>
<div className=" flex flex-col justify-center items-start row-start-2 sm:row-start-1">
<h1 className="text-3xl lg:text-4xl xl:text-5xl font-medium text-black-600 leading-normal">
Experience effortless beauty and simplicity with{" "}
<strong className="text-orange-500">BeautyTechies</strong>.
</h1>
<p className="text-black-500 mt-4 mb-6">
Unlock a world of beauty and joy with BeautyTechies, providing a
seamless network for all your needs. Discover our captivating
features and elevate your online experience with ease.
</p>
<ButtonPrimary>Get Started</ButtonPrimary>
</div>
<div className="flex w-full">
<motion.div className="h-full w-full" variants={scrollAnimation}>
<img
src="https://i.pinimg.com/736x/63/e6/20/63e62035e34554f4ed581cd2cea53a8f.jpg"
alt="VPN Illustrasi"
//quality={100}
className = "max-h-96 object-cover w-full rounded-sm"
width={508}
height={283}
//layout="responsive"
/>
</motion.div>
</div>
</motion.div>
</ScrollAnimationWrapper>
<div className="relative w-full flex">
<ScrollAnimationWrapper
className="rounded-lg w-full grid grid-flow-row sm:grid-flow-row grid-cols-1 sm:grid-cols-3 py-9 divide-y-2 sm:divide-y-0 sm:divide-x-2 divide-gray-100 bg-white-500 z-10">
<ScrollAnimationWrapper className="rounded-lg w-full grid grid-flow-row sm:grid-flow-row grid-cols-1 sm:grid-cols-3 py-9 divide-y-2 sm:divide-y-0 sm:divide-x-2 divide-gray-100 bg-white-500 z-10">
{listUser.map((listUsers, index) => (
<motion.div
className="flex items-center justify-start sm:justify-center py-4 sm:py-6 w-8/12 px-4 sm:w-auto mx-auto sm:mx-0"
key={index}
custom={{duration: 2 + index}}
custom={{ duration: 2 + index }}
variants={scrollAnimation}
>
<div className="flex mx-auto w-40 sm:w-auto">
Expand All @@ -82,11 +82,11 @@ const Hero = ({
</div>
</motion.div>
))}
</ScrollAnimationWrapper>
<div
</ScrollAnimationWrapper>
<div
className="absolute bg-black-600 opacity-5 w-11/12 roudned-lg h-64 sm:h-48 top-0 mt-8 mx-auto left-0 right-0"
style={{ filter: "blur(114px)" }}
></div>
></div>
</div>
</div>
);
Expand Down
11 changes: 5 additions & 6 deletions components/Layout/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ const Footer = () => {
<div className="bg-white-300 pt-44 pb-24">
<div className="max-w-screen-xl w-full mx-auto px-6 sm:px-8 lg:px-16 grid grid-rows-6 sm:grid-rows-1 grid-flow-row sm:grid-flow-col grid-cols-3 sm:grid-cols-12 gap-4">
<div className="row-span-2 sm:col-span-4 col-start-1 col-end-4 sm:col-end-5 flex flex-col items-start ">
<LogoVPN className="h-8 w-auto mb-6" />
<div className="h-8 w-auto font-bold text-lg" ><span className="text-orange-500">Beauty</span>Techies</div>
<p className="mb-4">
<strong className="font-medium">LaslesVPN</strong> is a private
virtual network that has unique features and has high security.
<strong className="font-medium">BeautyTechies</strong> beautyTechies is a unique platform with exclusive features for all your beauty needs..
</p>
<div className="flex w-full mt-2 mb-8 -mx-2">
<div className="mx-2 bg-white-500 rounded-full items-center justify-center flex p-2 shadow-md">
Expand All @@ -38,9 +37,9 @@ const Footer = () => {
<li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
Locations{" "}
</li>
<li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
{/* <li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
Server{" "}
</li>
</li> */}
<li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
Countries{" "}
</li>
Expand All @@ -53,7 +52,7 @@ const Footer = () => {
<p className="text-black-600 mb-4 font-medium text-lg">Engage</p>
<ul className="text-black-500">
<li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
LaslesVPN ?{" "}
BeautyTechies ?{" "}
</li>
<li className="my-2 hover:text-orange-500 cursor-pointer transition-all">
FAQ{" "}
Expand Down
2 changes: 1 addition & 1 deletion components/Layout/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Header = () => {
>
<nav className="max-w-screen-xl px-6 sm:px-8 lg:px-16 mx-auto grid grid-flow-col py-3 sm:py-4">
<div className="col-start-1 col-end-2 flex items-center">
<LogoVPN className="h-8 w-auto" />
<div className="h-8 w-auto font-bold text-lg" ><span className="text-orange-500">Beauty</span>Techies</div>
</div>
<ul className="hidden lg:flex col-start-4 col-end-8 text-black-500 items-center">
<LinkScroll
Expand Down
44 changes: 19 additions & 25 deletions components/Pricing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,26 +54,24 @@ const Pricing = () => {
/>
</div>
<p className="text-lg text-black-600 font-medium capitalize my-2 sm:my-7">
Free Plan
Free Shipping
</p>
<ul className="flex flex-col list-inside pl-6 xl:pl-0 items-start justify-start text-left text-black-500 flex-grow">
<li className="relative check custom-list my-2">
Unlimited Bandwitch
no hidden fees
</li>
<li className="relative check custom-list my-2">
Encrypted Connection
free shipping
</li>
<li className="relative check custom-list my-2">
No Traffic Logs
Beauty choices
</li>
<li className="relative check custom-list my-2">
Works on All Devices
</li>
</ul>
<div className="flex flex-col w-full justify-center mb-8 flex-none mt-12">
<p className="text-2xl text-black-600 text-center mb-4 ">
Free
</p>

<ButtonOutline>Select</ButtonOutline>
</div>
</motion.div>
Expand All @@ -98,17 +96,17 @@ const Pricing = () => {
/>
</div>
<p className="text-lg text-black-600 font-medium capitalize my-2 sm:my-7">
Standard Plan{" "}
Advertisement{" "}
</p>
<ul className="flex flex-col list-inside pl-6 xl:pl-0 items-start justify-start text-left text-black-500 flex-grow">
<li className="relative check custom-list my-2">
Unlimited Bandwitch
Endless beauty options
</li>
<li className="relative check custom-list my-2">
Encrypted Connection
Secure shopping
</li>
<li className="relative check custom-list my-2">
No Traffic Logs
Secure browsing
</li>
<li className="relative check custom-list my-2">
Works on All Devices
Expand All @@ -118,9 +116,7 @@ const Pricing = () => {
</li>
</ul>
<div className="flex flex-col w-full justify-center mb-8 flex-none mt-12">
<p className="text-2xl text-black-600 text-center mb-4 ">
$9 <span className="text-black-500">/ mo</span>
</p>

<ButtonOutline>Select</ButtonOutline>
</div>
</motion.div>
Expand All @@ -145,32 +141,30 @@ const Pricing = () => {
/>
</div>
<p className="text-lg text-black-600 font-medium capitalize my-2 sm:my-7">
Premium Plan{" "}
Beauty Products{" "}
</p>
<ul className="flex flex-col list-inside pl-6 xl:pl-0 items-start justify-start text-left text-black-500 flex-grow">
<li className="relative check custom-list my-2">
Unlimited Bandwitch
Skincare
</li>
<li className="relative check custom-list my-2">
Encrypted Connection
Makeup
</li>
<li className="relative check custom-list my-2">
No Traffic Logs
Hair Care
</li>
<li className="relative check custom-list my-2">
Works on All Devices
Body Care
</li>
<li className="relative check custom-list my-2">
Connect Anyware{" "}
Manicure and Pedicure{" "}
</li>
<li className="relative check custom-list my-2">
Get New Features{" "}
</li>
</ul>
<div className="flex flex-col w-full justify-center mb-8 flex-none mt-12">
<p className="text-2xl text-black-600 text-center mb-4 ">
$12 <span className="text-black-500">/ mo</span>
</p>


<ButtonOutline>Select</ButtonOutline>
</div>
Expand All @@ -183,10 +177,10 @@ const Pricing = () => {
<motion.h3
variants={scrollAnimation}
className="text-2xl sm:text-3xl lg:text-4xl font-medium text-black-600 leading-relaxed w-9/12 sm:w-6/12 lg:w-4/12 mx-auto">
Huge Global Network of Fast VPN{" "}
Access beauty products worldwide{" "}
</motion.h3>
<motion.p className="leading-normal mx-auto my-2 w-10/12 sm:w-7/12 lg:w-6/12" variants={scrollAnimation}>
See LaslesVPN everywhere to make it easier for you when you move
See BeautyTechies everywhere to make it easier for you when you move
locations.
</motion.p>
</ScrollAnimationWrapper>
Expand Down
10 changes: 5 additions & 5 deletions components/Testimoni.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Testimoni = ({
country: "Poland",
rating: "4.5",
testimoni:
"Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best",
"Wow... I'm thrilled with this app! It's exceeded my expectations, and everything has been flawless so far. beautyTechies is always the best.",
},
{
name: "iezh Robert",
Expand All @@ -25,16 +25,16 @@ const Testimoni = ({
country: "Poland",
rating: "4.5",
testimoni:
"Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best",
"Wow... I’m so happy with this app! It’s beyond my expectations, and everything has been perfect so far. beautyTechies is simply the best!",
},
{
name: "iezh Robert",
image: "/assets/people-3.png",
city: "Warsaw",
country: "Poland",
rating: "4.5",
rating: "4.0",
testimoni:
"Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best",
"Wow... I’m so happy with this app! It’s beyond my expectations, and everything has been perfect so far. beautyTechies is simply the best!",
},
{
name: "iezh Robert",
Expand All @@ -43,7 +43,7 @@ const Testimoni = ({
country: "Poland",
rating: "4.5",
testimoni:
"Wow... I am very happy to use this VPN, it turned out to be more than my expectations and so far there have been no problems. LaslesVPN always the best",
"Wow... I’m so happy with this app! It’s beyond my expectations, and everything has been perfect so far. beautyTechies is simply the best!",
},
],
}) => {
Expand Down
Loading

0 comments on commit 838ea5f

Please sign in to comment.