Merge pull request #2 from hesenv07/add-banner

add banner card

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"
   }
 }

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 (
     <main className="min-h-screen  max-h-auto relative">
-    <Header />
-    <Category/>
-    <Banner/>
+      <Header />
+      <Category />
+      <Banner />
+      <Items />
+      <Items />
     </main>
   );
 }

src/common/banner/Banner.jsx

@@ -1,5 +1,23 @@
 'use client'
+
+import Image from "next/image";
+
 const Banner = () => {
-    return null
+    return <div className="relative mt-2 max-w-fullScreen max-h-80 mx-auto md:mt-8 isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
+        <Image
+            fill
+            src='/images/banner.webp'
+            alt=""
+            className="absolute inset-0 -z-10 h-auto w-full object-cover"
+        />
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mx-auto max-w-2xl lg:mx-0">
+                <h2 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">Support center</h2>
+                <p className="mt-6 text-lg leading-8 text-gray-300">
+                Get inspired to create something great.
+                </p>
+            </div>
+        </div>
+    </div>
 }
 export default Banner;

src/common/container/Container.jsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+const Container = ({ children, title, href }) => {
+    return (
+        <div className="max-w-container my-8 mx-auto">
+            <div className="flex justify-between ">
+                <h2 className="text-lg md:text-xl font-bold">{title}</h2>
+                {href && <Link className="text-main font-semibold" href={href} >
+                    View All
+                </Link>
+                }
+            </div>
+            {children}
+        </div>
+    )
+}
+export default Container;

src/common/container/index.js

@@ -0,0 +1 @@
+export {default as Container} from './Container'    

src/common/index.js

@@ -1,2 +1,4 @@
 export * from './banner'
-export * from './button'
+export * from './button'
+export * from './container'
+export * from './list'

src/common/list/List.jsx

@@ -0,0 +1,10 @@
+
+const List =({children})=>{
+    return (
+        <ul role="list" className="grid grid-cols-2 gap-x-4 gap-y-4 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+        {children}
+        </ul>
+    )
+}
+
+export default List;

src/common/list/index.js

@@ -0,0 +1 @@
+export  {default as List} from './List';

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 (
+        <Container href={'/'} title='Featured'>
+            <List>
+               {items.map((item) => (
+                    <Card key={item.id} data={item} />
+                ))}
+            </List>
+        </Container>
+    )
+}
+
+export default Items;

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',
+            },
+        ],
+       },
+]

src/components/items/index.js

@@ -0,0 +1 @@
+export {default as Items} from './Items'

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 (
+        <li key={data.id}>
+            <Slider images={data?.images}/>
+            <Link href='/' className="text-base font-semibold leading-2 tracking-tight line-clamp-2 text-gray-900">{data.name}</Link>
+            <p className="text-sm leading-7 text-main font-semibold">{data.author}</p>
+            <ul role="list" className="mt-4 flex gap-x-2">
+                <li>
+                    <div className="text-gray-400 text-xs hover:text-gray-500">
+                        <span>{data.likes} likes</span>
+                    </div>
+                </li>
+                <li>
+                    <div className="text-gray-400 text-xs hover:text-gray-500">
+                        <span>{data.view} viewa</span>
+                    </div>
+                </li>
+            </ul>
+        </li>
+    )
+}
+export default Card;

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 (
+        <Swiper pa pagination={true}  modules={[Pagination]} className="mySwiper">
+            {images.map((image, index) => (
+                <SwiperSlide key={index}>
+                    <Image width={200} height={200} className="aspect-[3/2] w-full rounded-2xl object-cover" src={image.url} alt="" />
+                </SwiperSlide>
+            ))}
+        </Swiper>
+    )
+}
+export default SliderCard;

src/components/items/ui/index.js

@@ -0,0 +1,2 @@
+export {default as Card} from './Card/Card'; 
+export {default as Slider} from './Slider/SliderCard';   

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"
       }
     },
   },