mova-store/app/blog/page.jsx at main · ghzhost/mova-store · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import Image from "next/image";
import Link from "next/link";
import shoe1 from "../../public/images/shoe3.png";
import shoe2 from "../../public/images/shoe4.png";
import shoe3 from "../../public/images/shoe5.png";

const posts = [
  {
    id: 1,
    title: "The Art of Choosing the Perfect Pair of Shoes",
    excerpt:
      "Learn how to select shoes that combine comfort, style, and durability.",
    image: shoe1,
  },
  {
    id: 2,
    title: "Top Shoe Trends for 2024",
    excerpt:
      "Discover the top shoe trends that are taking the fashion world by storm this year.",
    image: shoe2,
  },
  {
    id: 3,
    title: "How to Care for Your Shoes",
    excerpt:
      "Tips and tricks for maintaining your shoes to keep them looking new and lasting longer.",
    image: shoe3,
  },
  {
    id: 4,
    title: "How to Care for Your Shoes",
    excerpt:
      "Tips and tricks for maintaining your shoes to keep them looking new and lasting longer.",
    image: shoe1,
  },
  {
    id: 5,
    title: "How to Care for Your Shoes",
    excerpt:
      "Tips and tricks for maintaining your shoes to keep them looking new and lasting longer.",
    image: shoe2,
  },
  {
    id: 6,
    title: "How to Care for Your Shoes",
    excerpt:
      "Tips and tricks for maintaining your shoes to keep them looking new and lasting longer.",
    image: shoe3,
  },
];

export default function Blog() {
  return (
    <div className="bg-gray-100 ">
      <header className="bg-gradient-to-r from-mova-deep via-purple-700 to-purple-600 text-white py-10 px-4 text-center mt-16">
        <h1 className="font-display text-3xl font-bold sm:text-4xl">Mova Store Blog</h1>
        <p className="mt-2 text-lg text-purple-100">Insights and tips for shoe enthusiasts</p>
      </header>

      <main className="py-12 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {posts.map((post) => (
              <div
                key={post.id}
                className="bg-white rounded-lg shadow-lg overflow-hidden"
              >
                <Image
                  src={post.image}
                  alt={post.title}
                  width={600}
                  height={400}
                  className="object-cover w-full h-48"
                />
                <div className="p-6">
                  <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
                  <p className="text-gray-600 mb-4">{post.excerpt}</p>
                  <Link href={`/blog/${post.id}`}
                className="text-purple-700 hover:text-purple-500 font-semibold">
                      Read More

                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}