diff --git a/package-lock.json b/package-lock.json index 009ae03..eaa0b7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,14 @@ "dependencies": { "next": "14.2.3", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "swiper": "^11.1.3" }, "devDependencies": { "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", - "tailwindcss": "^3.4.1" + "tailwindcss": "^3.4.3" } }, "node_modules/@alloc/quick-lru": { @@ -4269,6 +4270,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.3.tgz", + "integrity": "sha512-80MSxonyTxrGcaWj9YgvvhD8OG0B9/9IVZP33vhIEvyWvmKjnQDBieO+29wKvMx285sAtvZyrWBdkxaw6+D3aw==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tailwindcss": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz", diff --git a/package.json b/package.json index a6050aa..90081c2 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,15 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.3", "react": "^18", "react-dom": "^18", - "next": "14.2.3" + "swiper": "^11.1.3" }, "devDependencies": { - "postcss": "^8", - "tailwindcss": "^3.4.1", "eslint": "^8", - "eslint-config-next": "14.2.3" + "eslint-config-next": "14.2.3", + "postcss": "^8", + "tailwindcss": "^3.4.3" } } diff --git a/public/images/card-1.webp b/public/images/card-1.webp new file mode 100644 index 0000000..0e68a7f Binary files /dev/null and b/public/images/card-1.webp differ diff --git a/public/images/card-2.webp b/public/images/card-2.webp new file mode 100644 index 0000000..43d3fe8 Binary files /dev/null and b/public/images/card-2.webp differ diff --git a/src/app/page.jsx b/src/app/page.jsx index 907fc34..e0b403d 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,9 +1,10 @@ -import { Banner } from "common/banner"; +import { Banner, Container } from "common"; -import { Header,Category } from "components"; +import { Header, Category } from "components"; +import { Items } from "components/items"; -import { SITENAME,SITENAME_DESCRİPTİON } from "contants"; +import { SITENAME, SITENAME_DESCRİPTİON } from "contants"; export const metadata = { title: SITENAME, @@ -13,9 +14,11 @@ export const metadata = { export default function Home() { return (
-
- - +
+ + + +
); } diff --git a/src/common/banner/Banner.jsx b/src/common/banner/Banner.jsx index 864ed9f..6ebe787 100644 --- a/src/common/banner/Banner.jsx +++ b/src/common/banner/Banner.jsx @@ -1,5 +1,23 @@ 'use client' + +import Image from "next/image"; + const Banner = () => { - return null + return
+ +
+
+

Support center

+

+ Get inspired to create something great. +

+
+
+
} export default Banner; \ No newline at end of file diff --git a/src/common/container/Container.jsx b/src/common/container/Container.jsx new file mode 100644 index 0000000..3fea587 --- /dev/null +++ b/src/common/container/Container.jsx @@ -0,0 +1,17 @@ +import Link from "next/link"; + +const Container = ({ children, title, href }) => { + return ( +
+
+

{title}

+ {href && + View All + + } +
+ {children} +
+ ) +} +export default Container; \ No newline at end of file diff --git a/src/common/container/index.js b/src/common/container/index.js new file mode 100644 index 0000000..968d3cd --- /dev/null +++ b/src/common/container/index.js @@ -0,0 +1 @@ +export {default as Container} from './Container' \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 4ba4fbf..a8fa736 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -1,2 +1,4 @@ export * from './banner' -export * from './button' \ No newline at end of file +export * from './button' +export * from './container' +export * from './list' \ No newline at end of file diff --git a/src/common/list/List.jsx b/src/common/list/List.jsx new file mode 100644 index 0000000..2e3b802 --- /dev/null +++ b/src/common/list/List.jsx @@ -0,0 +1,10 @@ + +const List =({children})=>{ + return ( + + ) +} + +export default List; \ No newline at end of file diff --git a/src/common/list/index.js b/src/common/list/index.js new file mode 100644 index 0000000..9e9a85a --- /dev/null +++ b/src/common/list/index.js @@ -0,0 +1 @@ +export {default as List} from './List'; \ No newline at end of file diff --git a/src/components/items/Items.jsx b/src/components/items/Items.jsx new file mode 100644 index 0000000..b38f6d1 --- /dev/null +++ b/src/components/items/Items.jsx @@ -0,0 +1,17 @@ +import { Container, List } from "common"; +import { Card } from "./ui"; +import { items } from "./consts"; + +const Items = () => { + return ( + + + {items.map((item) => ( + + ))} + + + ) +} + +export default Items; \ No newline at end of file diff --git a/src/components/items/consts.js b/src/components/items/consts.js new file mode 100644 index 0000000..cd3062b --- /dev/null +++ b/src/components/items/consts.js @@ -0,0 +1,66 @@ +export const items=[ + { + name: '2024 State of Marketing Report – by Hubspot', + author:"Hubspot", + likes: 100, + view: 200, + images:[ + { + url: '/images/card-1.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + { + url: '/images/card-2.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + ], + }, + { + name: '2024 State of Marketing Report – by Hubspot', + author:"Hubspot", + likes: 100, + view: 200, + images:[ + { + url: '/images/card-1.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + { + url: '/images/card-2.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + ], + }, + { + name: '2024 State of Marketing Report – by Hubspot', + author:"Hubspot", + likes: 100, + view: 200, + images:[ + { + url: '/images/card-1.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + { + url: '/images/card-2.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + ], + }, + { + name: '2024 State of Marketing Report – by Hubspot', + author:"Hubspot", + likes: 100, + view: 200, + images:[ + { + url: '/images/card-1.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + { + url: '/images/card-2.webp', + alt: '2024 State of Marketing Report – by Hubspot', + }, + ], + }, +] \ No newline at end of file diff --git a/src/components/items/index.js b/src/components/items/index.js new file mode 100644 index 0000000..404eaa2 --- /dev/null +++ b/src/components/items/index.js @@ -0,0 +1 @@ +export {default as Items} from './Items' \ No newline at end of file diff --git a/src/components/items/ui/Card/Card.jsx b/src/components/items/ui/Card/Card.jsx new file mode 100644 index 0000000..f329caa --- /dev/null +++ b/src/components/items/ui/Card/Card.jsx @@ -0,0 +1,27 @@ +import Link from "next/link"; + +import Slider from "../Slider/SliderCard"; + +const Card = ({ data }) => { + + return ( +
  • + + {data.name} +

    {data.author}

    + +
    • + ) +} +export default Card; \ No newline at end of file diff --git a/src/components/items/ui/Slider/SliderCard.jsx b/src/components/items/ui/Slider/SliderCard.jsx new file mode 100644 index 0000000..a0b8b3c --- /dev/null +++ b/src/components/items/ui/Slider/SliderCard.jsx @@ -0,0 +1,23 @@ +'use client' + +import { Swiper, SwiperSlide } from 'swiper/react'; + +import 'swiper/css'; +import 'swiper/css/pagination'; + +import { Pagination } from 'swiper/modules'; +import Image from 'next/image'; + + +const SliderCard = ({ images }) => { + return ( + + {images.map((image, index) => ( + + + + ))} + + ) +} +export default SliderCard; \ No newline at end of file diff --git a/src/components/items/ui/index.js b/src/components/items/ui/index.js new file mode 100644 index 0000000..fe3119b --- /dev/null +++ b/src/components/items/ui/index.js @@ -0,0 +1,2 @@ +export {default as Card} from './Card/Card'; +export {default as Slider} from './Slider/SliderCard'; diff --git a/tailwind.config.js b/tailwind.config.js index 33f989a..f0a9c06 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,7 @@ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/common/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { @@ -14,7 +15,7 @@ module.exports = { }, maxWidth:{ "fullScreen": "1920px", - + 'container':"1440px" } }, },