some change
parent
f93041a93d
commit
7e69f674ce
File diff suppressed because it is too large
Load Diff
|
|
@ -10,9 +10,12 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.4.2",
|
||||
"lucide-react": "^0.475.0",
|
||||
"next": "15.1.6",
|
||||
"react": "^19.0.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-intersection-observer": "^9.15.1",
|
||||
"swiper": "^11.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,25 +11,15 @@ import Link from "next/link";
|
|||
|
||||
const CardNormal = ({ data, priority }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="group">
|
||||
{" "}
|
||||
<>
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<Link href={`/products/${data.id}`} >
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200 ${
|
||||
1 == 1 ? "bg-white rounded-xl rounded-tl-[40px]" : " opacity-70"
|
||||
}`}
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200 ${1 == 1 ? "bg-white rounded-xl rounded-tl-[40px]" : " opacity-70"
|
||||
}`}
|
||||
>
|
||||
{data.hasDiscount && (
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-lg bg-red-600 overflow-hidden p-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
{data.discountPercent}
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="w-full h-fit flex justify-center ">
|
||||
{!!data.mainImage ? (
|
||||
|
|
@ -38,12 +28,12 @@ const CardNormal = ({ data, priority }) => {
|
|||
data.mainImage == "1"
|
||||
? test1
|
||||
: data.mainImage == "2"
|
||||
? test2
|
||||
: data.mainImage == "3"
|
||||
? test3
|
||||
: data.mainImage == "4"
|
||||
? test4
|
||||
: test1
|
||||
? test2
|
||||
: data.mainImage == "3"
|
||||
? test3
|
||||
: data.mainImage == "4"
|
||||
? test4
|
||||
: test1
|
||||
}
|
||||
width={200}
|
||||
height={200}
|
||||
|
|
@ -75,18 +65,18 @@ const CardNormal = ({ data, priority }) => {
|
|||
</>
|
||||
<div className="relative">
|
||||
<div className="absolute w-full bottom-0 ">
|
||||
<div className="bg-gray-100 rounded-t-3xl flex ltr mt-2 border border-gray-100 p-2 ">
|
||||
<div className="bg-gray-100 rounded-t-3xl flex ltr mt-2 border border-gray-100 p-2 items-center">
|
||||
<div className="flex w-full">
|
||||
<p className="mb-0 text-base font-bold">call</p>
|
||||
<p className="mb-0 text-base ">${data.cost.toLocaleString()}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
<p className="mb-0 text-base">see detail</p>
|
||||
<p className="mb-0 text-base rounded-lg underline">Detail</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,79 @@
|
|||
"use client ";
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import test1 from "../../assets/images/product/1.png";
|
||||
import test2 from "../../assets/images/product/2.png";
|
||||
import test3 from "../../assets/images/product/3.png";
|
||||
import logo from "../../assets/images/logo.png";
|
||||
import { useState } from "react";
|
||||
|
||||
const GalleryBox = () => {
|
||||
const file = [{ image: test1 }, { image: test2 }, { image: test3 }];
|
||||
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentImageIndex((prevIndex) =>
|
||||
prevIndex === file.length - 1 ? 0 : prevIndex + 1
|
||||
);
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentImageIndex((prevIndex) =>
|
||||
prevIndex === 0 ? file.length - 1 : prevIndex - 1
|
||||
);
|
||||
};
|
||||
|
||||
const handleImageClick = (index) => {
|
||||
setCurrentImageIndex(index);
|
||||
setIsLightboxOpen(true);
|
||||
};
|
||||
|
||||
const closeLightbox = () => {
|
||||
setIsLightboxOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-3xl">
|
||||
<div className="flex justify-center xs:pb-[10px] ">
|
||||
<div className=" w-[400px]">
|
||||
<div className="flex justify-center xs:pb-[10px]">
|
||||
<div className="w-full max-w-[90vw]">
|
||||
{file?.length > 0 ? (
|
||||
<Image
|
||||
src={file[0]?.image}
|
||||
width={600}
|
||||
height={600}
|
||||
className=" mx-auto !object-cover"
|
||||
width={1000}
|
||||
height={1000}
|
||||
className="mx-auto object-cover cursor-pointer"
|
||||
alt={"llc"}
|
||||
onClick={() => handleImageClick(0)}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
<div className="xs:!w-[85px] lg:!w-[85px]">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
alt="وسمه"
|
||||
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex p-3 overflow-x-auto " id="swich-scrollbar">
|
||||
{file?.map((e) => (
|
||||
<div className="flex p-3 overflow-x-auto" id="swich-scrollbar">
|
||||
{file.slice(1)?.map((e, index) => (
|
||||
<div
|
||||
className="p-3 ml-2 bg-white border shadow-sm rounded-3xl"
|
||||
className="p-3 ml-2 bg-white border shadow-sm rounded-3xl cursor-pointer"
|
||||
key={e.id}
|
||||
onClick={() => handleImageClick(index)}
|
||||
>
|
||||
<div className="xs:w-[50px] lg:w-[50px]">
|
||||
<Image
|
||||
src={e.image}
|
||||
alt={e.fileName}
|
||||
width={50}
|
||||
height={50}
|
||||
width={250}
|
||||
height={250}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
|
|
@ -54,6 +81,45 @@ const GalleryBox = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isLightboxOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-75 z-50">
|
||||
<div className="bg-white bg-opacity-70 p-12 flex items-center justify-center w-3/4 relative h-3/4 inset-0 left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-xl">
|
||||
|
||||
<Image
|
||||
src={file[currentImageIndex]?.image}
|
||||
fill
|
||||
className="mx-auto object-contain"
|
||||
alt={"llc"}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
<button
|
||||
className="absolute left-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
|
||||
onClick={handlePrev}
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
className="absolute right-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
|
||||
onClick={handleNext}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<button
|
||||
className="absolute top-5 right-5 p-2 bg-gray-100 rounded-full hover:bg-gray-200"
|
||||
onClick={closeLightbox}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,22 +18,26 @@ const Navbar = ({ theme }) => {
|
|||
const NavBarData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "home",
|
||||
name: "Home",
|
||||
children: [],
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Active",
|
||||
children: [],
|
||||
name: "Categories",
|
||||
href: "/categories",
|
||||
children: [{ name: "Category1", href: "/categories/category1" }, { name: "Category2", href: "/categories/category2" }, { name: "Category3", href: "/categories/category3" }],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Savin",
|
||||
children: [],
|
||||
name: "Brands",
|
||||
href: "/brands",
|
||||
children: [{ name: "brand1", href: "/categories/brand1" }, { name: "brand2", href: "/categories/brand2" }, { name: "brand3", href: "/categories/brand3" }],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "about us",
|
||||
name: "About Us",
|
||||
href: "about-us",
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
|
@ -66,7 +70,7 @@ const Navbar = ({ theme }) => {
|
|||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollTop = window.scrollY;
|
||||
setIsScrolled(scrollTop > 200);
|
||||
setIsScrolled(scrollTop > 0);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
|
@ -76,46 +80,62 @@ const Navbar = ({ theme }) => {
|
|||
};
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <div className="bg-sky-900 p-3 flex">
|
||||
<p className="mb-0 text-white"> salam</p>
|
||||
</div> */}
|
||||
<div
|
||||
className={` max-[1023px]:hidden lg:block tr03 ${
|
||||
isScrolled
|
||||
? "fixed w-full !z-[1000] top-0 tr"
|
||||
: "pt-10 xs:px-10 lg:px-5 xl:px-20 "
|
||||
}`}
|
||||
className={` max-[1023px]:hidden lg:block tr03 ${isScrolled
|
||||
? "fixed w-full !z-[1000] top-0 tr"
|
||||
: "pt-10 xs:px-10 lg:px-5 xl:px-20 "
|
||||
}`}
|
||||
>
|
||||
<nav
|
||||
className={` rtl flex justify-between w-full pr-10 ${
|
||||
isScrolled ? " bg-gray-100 " : " rounded-2xl"
|
||||
}
|
||||
className={` rtl flex justify-between w-full pl-10 ${isScrolled ? " bg-gray-100 " : " rounded-2xl"
|
||||
}
|
||||
${theme == 1 ? "bg-gray-100 " : " "}`}
|
||||
>
|
||||
<div className="w-9/12 flex ">
|
||||
<div className="w-[50px] h-[50px] rounded-xl rounded-tl-[25px] bg-white mt-3">
|
||||
<div className="w-[40px] mx-auto mt-3 ">
|
||||
<Image
|
||||
src={logo}
|
||||
width={500}
|
||||
height={500}
|
||||
alt="llc"
|
||||
className="mx-auto "
|
||||
/>
|
||||
<div className="w-full rtl p-4 mr-2">
|
||||
<div className="flex">
|
||||
<div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">Export </p>
|
||||
</div>
|
||||
<div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">Industrial </p>
|
||||
</div>
|
||||
|
||||
<div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">en</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex ltr ">
|
||||
|
||||
<div className="size-[50px] relative bg-white rounded-lg p-2 flex flex-col items-center rounded-tl-2xl justify-center my-auto">
|
||||
<Image
|
||||
src={logo}
|
||||
fill
|
||||
alt="llc "
|
||||
className="mx-auto object-contain"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{NavBarData.map((e, index) => (
|
||||
<>
|
||||
<div
|
||||
key={index}
|
||||
className={` mx-2 px-2 w-fit text-sm p-7 ${
|
||||
1
|
||||
? "bg-visa2-200 rounded-full !text-white text-shadow pb-1"
|
||||
: ""
|
||||
} `}
|
||||
className={` mx-2 px-2 w-fit text-sm p-7 ${1
|
||||
? "bg-visa2-200 rounded-full !text-white text-shadow pb-1 relative"
|
||||
: ""
|
||||
} `}
|
||||
onMouseEnter={() => {
|
||||
// setHoverItemNavbar(index);
|
||||
setActiveStepNavbar(e.id);
|
||||
|
|
@ -124,73 +144,38 @@ const Navbar = ({ theme }) => {
|
|||
// setHoverItemNavbar(-1);
|
||||
setActiveStepNavbar(null);
|
||||
}}
|
||||
// onClick={() => context.setOpenNavBarServices(false)}
|
||||
// onClick={() => context.setOpenNavBarServices(false)}
|
||||
>
|
||||
<Link
|
||||
href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
|
||||
className={` ${isScrolled ? "text-black" : "text-white"} ${
|
||||
theme == 1 ? "text-sm !text-black" : " "
|
||||
}`}
|
||||
href={`${e.href}`}
|
||||
className={` ${isScrolled ? "text-black" : "text-white"} ${theme == 1 ? "text-sm !text-black" : " "
|
||||
}`}
|
||||
>
|
||||
{e.name}
|
||||
{e.children.length > 0 && ""}
|
||||
</Link>
|
||||
|
||||
{e.children.length > 0 && e.id == activeStepNavbar && (
|
||||
<div
|
||||
className="relative flex justify-center"
|
||||
// onMouseLeave={() => {
|
||||
// setHoverItemNavbar(-1);
|
||||
// }}
|
||||
>
|
||||
<div class="absolute text-sm z-40 w-[204px] top-[17px] bg-gray-200 rounded-[26px] p-3 ">
|
||||
<svg
|
||||
class="absolute w-20 h-7 -top-[7px] inset-x-0 mx-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 740 155.61"
|
||||
>
|
||||
<path
|
||||
fill={`${isScrolled ? "#f3f4f6" : "#14532D "}`}
|
||||
d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="absolute w-[14px] h-[14px] rounded-full block bg-gray-200 -top-[6px] inset-x-0 mx-auto"></span>
|
||||
<ul className="absolute left-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
|
||||
{
|
||||
e.children.map((c, index) => (
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
{e.children.map((s, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={`/categories/${s.id}/${s.name
|
||||
.split(" ")
|
||||
.join("-")}`}
|
||||
>
|
||||
<div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
|
||||
<div className="w-3 h-3 rounded-full bg-green-900 ml-1 mt-1"></div>
|
||||
<p className="mb-0 text-black text-sm ">
|
||||
{s.name}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li key={index} className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
|
||||
<Link href={c.href}>
|
||||
{c.name}
|
||||
</Link>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-3/12 ltr p-4 ">
|
||||
<div className="flex">
|
||||
<div className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
||||
<p className="mb-0">en</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
@ -202,16 +187,14 @@ const Navbar = ({ theme }) => {
|
|||
{/* responsive part */}
|
||||
|
||||
<div
|
||||
className={`sm:block lg:hidden ${
|
||||
isScrolled & !closeNavbar ? "fixed top-0 z-[100] w-full" : " pt-2"
|
||||
}`}
|
||||
className={`sm:block lg:hidden ${isScrolled & !closeNavbar ? "sticky top-0 z-[100] w-full" : " pt-2"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`bg-gray-100 flex justify-between rtl p-3 ${
|
||||
isScrolled
|
||||
? " rounded-bl-xl rounded-br-[40px]"
|
||||
: "mx-2 rounded-xl rounded-br-[40px]"
|
||||
}`}
|
||||
className={`bg-gray-100 flex justify-between rtl p-3 ${isScrolled
|
||||
? " rounded-bl-xl rounded-br-[40px]"
|
||||
: "mx-2 rounded-xl rounded-br-[40px]"
|
||||
}`}
|
||||
>
|
||||
{/* <Link href={"/"} className="w-full"> */}
|
||||
<div className=" w-full mx-1 flex ">
|
||||
|
|
@ -255,14 +238,12 @@ const Navbar = ({ theme }) => {
|
|||
|
||||
<div className="sm:block lg:hidden ">
|
||||
<div
|
||||
className={`fixed w-[250px] top-0 left-0 tr03 !z-[200] ${
|
||||
closeNavbar ? "" : "-translate-x-full"
|
||||
} `}
|
||||
className={`fixed w-[250px] top-0 left-0 tr03 !z-[200] ${closeNavbar ? "" : "-translate-x-full"
|
||||
} `}
|
||||
>
|
||||
<div
|
||||
className={`absolute mt-2 tr03 z-5 ${
|
||||
closeNavbar ? "ml-[255px] " : "ml-[-30px]"
|
||||
}`}
|
||||
className={`absolute mt-2 tr03 z-5 ${closeNavbar ? "ml-[255px] " : "ml-[-30px]"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="bg-white w-10 h-10 rounded-full pt-3"
|
||||
|
|
|
|||
|
|
@ -78,3 +78,9 @@
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.content{
|
||||
@apply leading-8 text-lg
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import logo from "../../../assets/images/logo.png";
|
|||
|
||||
const AboutUs = () => {
|
||||
return (
|
||||
<div className="xs:mt-10 lg:mt-[120px]">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto ">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 rtl ">
|
||||
<div className="mx-auto">
|
||||
<Image src={logo} className="xs:w-[200px] lg:w-auto" />
|
||||
</div>
|
||||
<div className="text-left relative mb-10 col-span-2">
|
||||
<h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
|
||||
<h2 className="text-4xl font-bold relative z-10 xs:text-center lg:text-left">
|
||||
ADVANCED HORIZON SERVICES LLC Products{" "}
|
||||
</h2>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
|
|
@ -35,9 +35,13 @@ const AboutUs = () => {
|
|||
odit, eligendi eius dolorem!
|
||||
</p>
|
||||
|
||||
<button className="btn btn-primary text-sm p-3 px-10">
|
||||
<button className="btn btn-primary text-base py-3 px-10 ">
|
||||
{" "}
|
||||
Learn more about us
|
||||
Export
|
||||
</button>
|
||||
<button className="btn btn-primary text-base p-3 px-10">
|
||||
{" "}
|
||||
Industrial
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,64 @@
|
|||
import React from "react";
|
||||
|
||||
"use client"
|
||||
import { useState } from "react";
|
||||
import CountUp from "react-countup";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
const CounterDetail = () => {
|
||||
const [startCounting, setStartCounting] = useState(false);
|
||||
const { ref, inView } = useInView({
|
||||
triggerOnce: true, // Trigger counting only once
|
||||
threshold: 0.5, // Adjust the threshold as needed (0 to 1)
|
||||
});
|
||||
|
||||
// Start counting when it enters the viewport
|
||||
if (inView && !startCounting) {
|
||||
setStartCounting(true);
|
||||
}
|
||||
return (
|
||||
<div className="mt-[120px]">
|
||||
<div className="w-full bg-couner-data-landing">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3">
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Test For Fake Data
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Test In Landing Page
|
||||
</h3>
|
||||
<div className="w-full bg-couner-data-landing py-32 mb-44">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3">
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Shipping
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 "> +<CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={4300}
|
||||
duration={2.75}
|
||||
/></p>
|
||||
</div>
|
||||
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
5,523,222
|
||||
</p>
|
||||
</div>
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Happy Clients
|
||||
</h3>
|
||||
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Test For Fake
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">+225 </p>
|
||||
</div>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
+<CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={469}
|
||||
duration={2.75}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:my-10 lg:my-20">
|
||||
<p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
|
||||
<h3 className="mb-0 text-4xl text-gray-300 font-bold">
|
||||
Destinations
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
<CountUp
|
||||
start={startCounting ? 0 : undefined}
|
||||
end={32}
|
||||
duration={2.75}
|
||||
/> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import { Zap } from "lucide-react"
|
||||
import { Shield } from "lucide-react"
|
||||
import { Rocket } from "lucide-react"
|
||||
|
||||
export default function WhyHorizon() {
|
||||
return (
|
||||
<section className="w-full max-w-screen-xl mx-auto pb-40 pt-28 flex flex-col items-center justify-center">
|
||||
<div className="container px-4 md:px-6">
|
||||
<h2 className="text-5xl font-bold text-center mb-16 text-primary-700 w-fit mx-auto">"Why Horizon"</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon={<Rocket className="h-16 w-16 text-primary" />}
|
||||
title="Fast"
|
||||
subtitle="Build and deploy quickly with our streamlined tools and processes."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-16 w-16 text-primary" />}
|
||||
title="Secure"
|
||||
subtitle="Rest easy with our robust security measures and data protection."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Zap className="h-16 w-16 text-primary" />}
|
||||
title="Valuable"
|
||||
subtitle="Experience lightning-fast speeds and optimal efficiency."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function FeatureCard({ icon, title, subtitle }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center text-center ">
|
||||
<div className="mb-4">{icon}</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
||||
<p className="text-lg">{subtitle}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,16 +5,18 @@ import CounterDetail from "./components/CounterDetail";
|
|||
import Products from "./components/Products";
|
||||
import Footer from "./components/Footer";
|
||||
import Navbar from "src/components/NavBar";
|
||||
import WhyHorizon from "./components/Why";
|
||||
|
||||
const Landing = () => {
|
||||
return (
|
||||
<div className=" text-center text-6xl">
|
||||
{" "}
|
||||
<Navbar theme={1} />
|
||||
<HeroSection />
|
||||
{/* <HeroSection /> */}
|
||||
<AboutUs />
|
||||
<CounterDetail />
|
||||
<Products />
|
||||
<WhyHorizon/>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Footer from "../Landing/components/Footer";
|
|||
|
||||
const Product = ({ data }) => {
|
||||
const testDataCk =
|
||||
"<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul><li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li><li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li><li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li><li><strong>Dermatologically Tested:</strong> Safe for all skin types</li><li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Product Specifications</h2><table border='1' cellpadding='10' cellspacing='0' style='width:100%;border-collapse:collapse;'><tr><th>Attribute</th><th>Details</th></tr><tr><td>Product Name</td><td>Hydrating Cream</td></tr><tr><td>Brand</td><td>Premium Skincare</td></tr><tr><td>Volume</td><td>50ml</td></tr><tr><td>Skin Type</td><td>All Skin Types</td></tr><tr><td>Key Ingredients</td><td>Aloe Vera, Vitamin E, Hyaluronic Acid</td></tr><tr><td>Fragrance</td><td>Fragrance-Free</td></tr><tr><td>Texture</td><td>Lightweight & Creamy</td></tr><tr><td>Usage</td><td>Apply twice daily on clean skin</td></tr><tr><td>Packaging</td><td>Eco-friendly Glass Jar</td></tr><tr><td>Shelf Life</td><td>24 Months</td></tr><tr><td>Made In</td><td>USA</td></tr></table><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote><p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul><li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li><li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li><li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";
|
||||
"<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul> <li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li> <li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li> <li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li> <li><strong>Dermatologically Tested:</strong> Safe for all skin types</li> <li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote> <p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul> <li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li> <li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li> <li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -25,7 +25,7 @@ const Product = ({ data }) => {
|
|||
</div>
|
||||
|
||||
<div className="flex my-4">
|
||||
<div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
|
||||
<div className="px-3 py-1 ml-0 rounded-full bg-primary-400">
|
||||
<p className="mb-0 text-sm text-white ">orginal </p>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,15 +45,58 @@ const Product = ({ data }) => {
|
|||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-bold text-2xl py-8">
|
||||
|
||||
<button className="btn btn-primary px-20 text-base mt-10 ">
|
||||
${data.cost.toLocaleString()}
|
||||
</p>
|
||||
<button className="btn btn-primary px-20 text-base ">
|
||||
{" "}
|
||||
See All Products
|
||||
Contact and consultation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xs:px-5 lg:px-20 pb-20">
|
||||
<div dangerouslySetInnerHTML={{ __html: testDataCk }} />
|
||||
<div className="xs:px-5 lg:px-20 py-16">
|
||||
<table className="w-full text-left border-collapse lg:px-20">
|
||||
<thead>
|
||||
<tr className="bg-gray-200">
|
||||
<th className="p-2 border-b">Property</th>
|
||||
<th className="p-2 border-b">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border-b">Brand</td>
|
||||
<td className="p-2 border-b">Nature's Essence</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2 border-b">Volume</td>
|
||||
<td className="p-2 border-b">250ml</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2 border-b">Ingredients</td>
|
||||
<td className="p-2 border-b">
|
||||
<ul className="list-disc pl-4">
|
||||
<li>Aloe Vera</li>
|
||||
<li>Chamomile</li>
|
||||
<li>Tea Tree Oil</li>
|
||||
<li>Rosemary Extract</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="p-2 border-b">Category</td>
|
||||
<td className="p-2 border-b">Hair Care</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-2 border-b">For Hair Type</td>
|
||||
<td className="p-2 border-b">All Hair Types</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="xs:px-5 lg:px-20 pb-20 ">
|
||||
<div className="content" dangerouslySetInnerHTML={{ __html: testDataCk }} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default {
|
|||
100: "#FFFBE6",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT:"#e18c8c",
|
||||
50: "#fff5f5",
|
||||
100: "#fce8e8",
|
||||
200: "#f6caca",
|
||||
|
|
|
|||
Loading…
Reference in New Issue