diff --git a/next.config.js b/next.config.js
index ca2117b..20e22ad 100755
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,15 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
- reactStrictMode: false,
+ reactStrictMode: true,
+ webpack(config) {
+ config.module.rules.push(
+ {
+ test: /\.svg$/i,
+ use: ['@svgr/webpack']
+ }
+ )
+ return config
+ }
}
module.exports = nextConfig
diff --git a/package.json b/package.json
index c01fe78..d3a9472 100755
--- a/package.json
+++ b/package.json
@@ -14,9 +14,11 @@
"next": "13.5.6",
"react": "^18",
"react-dom": "^18",
- "tailwind-variants": "^0.1.18"
+ "tailwind-variants": "^0.1.18",
+ "valtio": "^1.12.1"
},
"devDependencies": {
+ "@svgr/webpack": "^8.1.0",
"autoprefixer": "^10",
"eslint": "^8",
"eslint-config-next": "13.5.6",
diff --git a/public/CheckboxIcon.svg b/public/CheckboxIcon.svg
new file mode 100644
index 0000000..cda3c78
--- /dev/null
+++ b/public/CheckboxIcon.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/chatIcon.svg b/public/chatIcon.svg
new file mode 100644
index 0000000..d5d34bf
--- /dev/null
+++ b/public/chatIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/clockIcon.svg b/public/clockIcon.svg
new file mode 100644
index 0000000..c2aacb8
--- /dev/null
+++ b/public/clockIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/contacImage.svg b/public/contacImage.svg
new file mode 100644
index 0000000..ab7549d
--- /dev/null
+++ b/public/contacImage.svg
@@ -0,0 +1,227 @@
+
diff --git a/public/homeIcon.svg b/public/homeIcon.svg
new file mode 100644
index 0000000..3ff16fe
--- /dev/null
+++ b/public/homeIcon.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/logoBig.png b/public/logoBig.png
index d907105..879ec81 100644
Binary files a/public/logoBig.png and b/public/logoBig.png differ
diff --git a/public/logoMin.svg b/public/logoMin.svg
new file mode 100644
index 0000000..219b0d7
--- /dev/null
+++ b/public/logoMin.svg
@@ -0,0 +1,12 @@
+
diff --git a/public/menu-burger.svg b/public/menu-burger.svg
new file mode 100644
index 0000000..dc4d745
--- /dev/null
+++ b/public/menu-burger.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/phoneIcon.svg b/public/phoneIcon.svg
new file mode 100644
index 0000000..27fcc32
--- /dev/null
+++ b/public/phoneIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/telegramIcon.svg b/public/telegramIcon.svg
new file mode 100644
index 0000000..289fca4
--- /dev/null
+++ b/public/telegramIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/vkIcon.svg b/public/vkIcon.svg
new file mode 100644
index 0000000..936a5f9
--- /dev/null
+++ b/public/vkIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/IndexPage/advantages.jsx b/src/components/IndexPage/advantages.jsx
new file mode 100644
index 0000000..45b5f5e
--- /dev/null
+++ b/src/components/IndexPage/advantages.jsx
@@ -0,0 +1,48 @@
+import Card from "@/components/reusable/card";
+import {motion} from "framer-motion";
+import mainDataStore from "@/store/mainDataStore";
+import {useSnapshot} from "valtio";
+import HomeIcon from '@/../public/homeIcon.svg'
+import ChatIcon from '@/../public/chatIcon.svg'
+import CallIcon from '@/../public/phoneIcon.svg'
+import ClockIcon from '@/../public/clockIcon.svg'
+
+
+const SubBlock = ({title, text, image}) => {
+ const icons = {
+ 'homeIcon': ,
+ 'chatIcon' : ,
+ 'callIcon': ,
+ 'clockIcon':
+ }
+ return (
+
+
+ {icons[image]}
+
+
+
+
+)}
+
+const AdvantagesBlock = () => {
+ const {advantages: {title, subBlocks}} = useSnapshot(mainDataStore)
+ return (
+
+
+ {title}
+
+ {subBlocks.map((elem, idx) => (
+
+
+
+ ))}
+
+
+
+)}
+
+export default AdvantagesBlock;
\ No newline at end of file
diff --git a/src/components/IndexPage/hero.jsx b/src/components/IndexPage/hero.jsx
index f32a899..a788b32 100644
--- a/src/components/IndexPage/hero.jsx
+++ b/src/components/IndexPage/hero.jsx
@@ -8,6 +8,7 @@ import DeliveryIcon from '@/../public/delivery-icon.svg'
import LocationImg from '@/../public/location.svg'
import {motion} from 'framer-motion'
+import {tv} from "tailwind-variants";
const BlockAnimation = {
'hidden': {
@@ -55,13 +56,17 @@ const ItemAnimationTop = {
}
}
-const Hero = () => {
- return (
- {
+ const sectionVariant = tv({
+ base: `container mx-auto`
+ })
+
+ return (
+
-
-
+
+
+
+
+
Кешбэк 10%
+
Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении
+ месяца. Копите
+ баллы и оплачивайте до 99% следующих заказов
+
+
+
+
+
-
+
Забери свой подарок!
-
+
-
-
-
-
Кешбэк 10%
-
Кешбэк баллами вырастет до 10% после отправки 5 посылок в течении
- месяца. Копите
- баллы и оплачивайте до 99% следующих заказов
-
-
-
-
)
}
diff --git a/src/components/IndexPage/index.jsx b/src/components/IndexPage/index.jsx
index 33f36c1..b64f45c 100644
--- a/src/components/IndexPage/index.jsx
+++ b/src/components/IndexPage/index.jsx
@@ -1,12 +1,13 @@
-import Header from "@/components/reusable/header";
+
+
import Hero from "@/components/IndexPage/hero"
-import Image from "next/image";
-import Logo from '@/../public/logoBig.png'
+import Advantages from "@/components/IndexPage/advantages";
const MainPage = () => {
return (
<>
-
+
+
>
)
}
diff --git a/src/components/reusable/buttons.jsx b/src/components/reusable/buttons.jsx
index 99ffa5b..92ab742 100644
--- a/src/components/reusable/buttons.jsx
+++ b/src/components/reusable/buttons.jsx
@@ -1,26 +1,29 @@
import Image from "next/image";
import {tv} from "tailwind-variants";
-export const ButtonRaw = (props) => {
- const {children, className} = props
- console.log(className)
-
+export const ButtonRaw = ({children, className, ...props}) => {
const variant = tv({
- base: `bg-black text-white uppercase font-somic font-medium rounded-[40px]`,
+ base: `bg-black text-white uppercase font-somic font-medium rounded-[40px] text-base`,
})
return (
-
+
{children}
)}
-export const ButtonHref = ({title}) => (
-
+export const ButtonHref = ({title, className}) => {
+
+ const variants = tv({
+ base: `px-4 py-6`
+ })
+
+ return(
+
{title}
-)
+)}
export const ButtonHrefWithImage = ({title, imgSrc, position}) => {
return (
diff --git a/src/components/reusable/card.jsx b/src/components/reusable/card.jsx
index 97547fe..e0f9023 100644
--- a/src/components/reusable/card.jsx
+++ b/src/components/reusable/card.jsx
@@ -1,9 +1,6 @@
import {tv} from "tailwind-variants";
-const Card = (props) => {
- let {className, theme} = props
- const propsData = {...props, theme: undefined}
-
+const Card = ({className, theme, ...props}) => {
const variant = tv({
base: "bg-white-p rounded-[20px] px-[40px] py-[40px] h-full",
variants: {
@@ -15,7 +12,7 @@ const Card = (props) => {
theme = theme || 'white'
return (
-
+
{props.children}
)
diff --git a/src/components/reusable/footer.jsx b/src/components/reusable/footer.jsx
index 7da210c..a30121f 100644
--- a/src/components/reusable/footer.jsx
+++ b/src/components/reusable/footer.jsx
@@ -1,51 +1,55 @@
import Image from "next/image";
import Logo from "../../../public/logoBig.png";
+import Link from "next/link";
+import {useSnapshot} from "valtio";
+import state from "@/store/mainDataStore";
+import VkIcon from '@/../public/vkIcon.svg'
+import TelegramIcon from '@/../public/telegramIcon.svg'
-const Footer = () => (
+const SocialNetwork = ({title, value, icon}) => {
+ const icons = {
+ 'vkIcon':
,
+ 'telegramIcon':
+ }
+ return (
+
+ {icons[icon]}
+ {title}
+
+ )
+}
+
+const Footer = () => {
+
+ const store = useSnapshot(state)
+ return (