feat : in intro component button andd scroll to products(configs) section(div)
This commit is contained in:
22
src/components/scrollLink/index.tsx
Normal file
22
src/components/scrollLink/index.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// components/SmoothScrollLink.tsx
|
||||
import React from 'react';
|
||||
import { ScrollLinkProps } from '../../types/props';
|
||||
|
||||
|
||||
const SmoothScrollLink: React.FC<ScrollLinkProps> = ({ to, children }) => {
|
||||
const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
||||
event.preventDefault();
|
||||
const targetElement = document.querySelector(to);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<a href={to} onClick={handleClick}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default SmoothScrollLink;
|
||||
@@ -1,6 +1,7 @@
|
||||
import Button from "../../../../components/button";
|
||||
|
||||
import Rocket3D from "../../../../assets/ui/Rocket.png";
|
||||
import SmoothScrollLink from "../../../../components/scrollLink";
|
||||
|
||||
const Intro = () => {
|
||||
return (
|
||||
@@ -15,7 +16,9 @@ const Intro = () => {
|
||||
<p className="text-center text-xl text-gray-600">
|
||||
سال ها تجربه پشت یک کانفیگ شماست
|
||||
</p>
|
||||
<Button extra="max-md:!hidden">همین الان میخرم</Button>
|
||||
<SmoothScrollLink to="#configs">
|
||||
<Button >برو به فروشگاه</Button>
|
||||
</SmoothScrollLink>
|
||||
</div>
|
||||
<div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden">
|
||||
<img
|
||||
|
||||
@@ -14,10 +14,10 @@ const ProductList = () => {
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="relative w-full h-full max-md:mt-4 md:mt-8 ">
|
||||
<div className="relative w-full h-full max-md:mt-4 md:mt-8 " id="configs">
|
||||
<div className="w-full h-full gap-4 md:gap-6 flex flex-col p-5 justify-center items-center">
|
||||
<h1 className="max-md:text-lg text-center text-2xl font-bold">
|
||||
برای انتخاب پلن مورد نظر کلیک کنید تا پلن و سرویس ها براتون نمایش داده
|
||||
<h1 className="max-md:text-sm text-center text-2xl font-bold">
|
||||
برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده
|
||||
شود
|
||||
</h1>
|
||||
<ButtonList
|
||||
|
||||
5
src/types/props.d.ts
vendored
5
src/types/props.d.ts
vendored
@@ -225,3 +225,8 @@ interface ProfileDetailsProps {
|
||||
error: Error | AxiosError | null;
|
||||
userTitle: string;
|
||||
}
|
||||
|
||||
interface ScrollLinkProps {
|
||||
to: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user