pixelforge/service.jsx at main · Logashree03/pixelforge · 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
import "./service.css";

import pic1 from "../assets/uiux.png";
import pic2 from "../assets/web-development.png";
import pic3 from "../assets/digital.png";
import pic4 from "../assets/branding.png";

const services = [
  {
    title: "UI/UX design",
    desc: "We design seamless digital experiences that blend creativity with usability, ensuring every interaction feels effortless.",
    img: pic1,
    tag: "UX",
    color: "purple",
  },
  {
    title: "Web Development",
    desc: "We build modern, scalable, and high-performance websites that turn ideas into powerful digital experiences.",
    img: pic2,
    tag: "DEV",
    color: "blue",
  },
  {
    title: "Branding",
    desc: "We craft impactful brand identities that connect, communicate, and leave a lasting impression.",
    img: pic3,
    tag: "BR",
    color: "yellow",
  },
  {
    title: "Digital Marketing",
    desc: "We drive growth through data-driven digital marketing strategies that increase visibility, engagement, and conversions.",
    img: pic4,
    tag: "DM",
    color: "pink",
  },
];

const Service = () => {
  return (
    <section id="service" className="service-section">
      <div className="container">

        {/* Heading */}
        <div className="text-center text-lg-start mb-5">
          <p className="service-tag">GET MORE INFO</p>
          <h1 className="service-title">Our Services</h1>
          <p className="service-desc">
            Premium digital experiences for brands that want sharp design,
            fast websites, and memorable campaigns.
          </p>
        </div>

        {/* Cards */}
        <div className="row g-4 justify-content-center">
          {services.map((item, index) => (
            <div className="col-xxl-3 col-xl-3 col-lg-5 col-md-6" key={index}>
              <div className={`service-card ${item.color}`}>

                <div className="img-box">
                  <img src={item.img} alt="" />
                  <span className="tag-badge">{item.tag}</span>
                </div>

                <h3>{item.title}</h3>
                <p>{item.desc}</p>

                <button className="learn-btn">Learn More</button>

              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

export default Service;