Palani-Projects/about.html at main · Zoof36/Palani-Projects · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About – Palani Projects</title>
  <link rel="icon" type="image/png" href="logo.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <style>
    .page-wrap {
      background: linear-gradient(160deg, #3D0505 0%, #5C0A0A 50%, #4A0808 100%);
    }

    .about-content {
      max-width: 1100px;
      margin: 0 auto;
      padding: 3rem 2rem 5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }

    .about-logo-wrap {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 1rem;
      position: sticky;
      top: 90px;
    }

    .about-logo-wrap img {
      width: 100%;
      max-width: 320px;
      filter: drop-shadow(0 0 30px rgba(201,150,58,0.35));
      animation: logoFloat 6s ease-in-out infinite;
    }

    .about-text h3 {
      font-family: 'Cinzel', serif;
      font-size: 1.4rem;
      color: var(--gold-light);
      margin-bottom: 1rem;
      margin-top: 2.5rem;
      letter-spacing: 0.04em;
    }

    .about-text h3:first-child { margin-top: 0; }

    .about-text p {
      font-size: 1.05rem;
      line-height: 1.9;
      color: var(--ivory-dim);
      margin-bottom: 1.2rem;
    }

    /* Stats */
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      margin-top: 2.5rem;
    }

    .stat-box {
      background: rgba(201,150,58,0.08);
      border: 1px solid rgba(201,150,58,0.2);
      border-radius: 4px;
      padding: 1.5rem;
      text-align: center;
      transition: border-color 0.3s, transform 0.3s;
    }

    .stat-box:hover {
      border-color: rgba(201,150,58,0.5);
      transform: translateY(-3px);
    }

    .stat-number {
      font-family: 'Cinzel', serif;
      font-size: 2.5rem;
      font-weight: 900;
      color: var(--gold-bright);
      display: block;
      line-height: 1.1;
    }

    .stat-label {
      font-size: 0.85rem;
      color: var(--ivory-dim);
      font-style: italic;
      letter-spacing: 0.05em;
      margin-top: 0.4rem;
      display: block;
    }

    /* Values strip */
    .values-strip {
      background: rgba(0,0,0,0.2);
      border-top: 1px solid rgba(201,150,58,0.15);
      border-bottom: 1px solid rgba(201,150,58,0.15);
      padding: 4rem 2rem;
      text-align: center;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      max-width: 900px;
      margin: 2rem auto 0;
    }

    .value-item { padding: 1rem; }

    .value-icon {
      font-size: 2rem;
      display: block;
      margin-bottom: 0.8rem;
    }

    .value-title {
      font-family: 'Cinzel', serif;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 0.5rem;
    }

    .value-desc {
      font-size: 0.95rem;
      color: var(--ivory-dim);
      font-style: italic;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .about-content       { grid-template-columns: 1fr; gap: 2rem; }
      .about-logo-wrap     { order: -1; position: static; }
      .stat-grid           { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 480px) {
      .stat-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<!-- NAV -->
<nav>
  <a class="nav-logo" href="index.html">
    <img src="logo.png" alt="Palani Projects Logo">
    <div class="nav-logo-text">PALANI<br>PROJECTS</div>
  </a>
  <ul class="nav-links" id="navLinks">
    <li><a href="index.html"  >Home</a></li>
    <li><a href="about.html"   class="active">About</a></li>
    <li><a href="gallery.html" >Gallery</a></li>
    <li><a href="reviews.html" >Reviews</a></li>
    <li><a href="contact.html" >Contact</a></li>
  </ul>
  <button class="nav-hamburger" onclick="toggleMenu()" aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
</nav>

<!-- PAGE -->
<div class="page-wrap">

  <!-- HEADER -->
  <div class="page-header">
    <div class="section-label">Who We Are</div>
    <h1 class="section-title">The Story of Palani Projects</h1>
    <div class="ornament">
      <div class="ornament-line"></div>
      <div class="ornament-symbol">✦</div>
      <div class="ornament-line"></div>
    </div>
  </div>

  <!-- MAIN CONTENT -->
  <div class="about-content">

    <div class="about-logo-wrap">
      <img src="logo.png" alt="Palani Projects Logo">
    </div>

    <div class="about-text">

      <h3>Our Beginning</h3>
      <p>Palani Projects was born from a deep love of craftsmanship and a profound respect our Hindu religion. For over 15 years, we have been creating handmade wooden products from our base in Durban, South Africa — each piece a labour of devotion.</p>
      <p>What started as a passion project has grown into a trusted name for families seeking sacred items that carry genuine spiritual intention and uncompromising quality.</p>

      <h3>What We Create</h3>
      <p>Our specialty lies in handcrafted Hindu religious items — chariots, kavadies, bhangas, prayer items, decorative items, and more. We are not limited to religious work; we also craft custom wooden gifts, home décor, and keepsakes for any occasion.</p>
      <p>Almost every product we make is a custom order. We take the time to understand your vision, consult the relevant religious texts and traditions where applicable, and produce something uniquely yours.</p>
      <p>We also are not limited to the Hindu religion. We welcome and have worked with builds and people from all faiths, beliefs and cultures!</p>

      <h3>Rooted in Tradition</h3>
      <p>All our work is created within the bounds of Hindu religious laws and customs. Where sacred proportions, iconographic rules, or scriptural guidance apply, we research thoroughly and apply it faithfully. You can commission with confidence.</p>

      <h3>Our Promise</h3>
      <p>We stand behind our craft with a lifetime guarantee on all products. As long as your piece is cared for with respect, we guarantee it will endure. This isn't just a policy — it's our word, backed by 15 years of standing behind every item we have ever made.</p>

      <div class="stat-grid">
        <div class="stat-box">
          <span class="stat-number">15+</span>
          <span class="stat-label">Years of Craft</span>
        </div>
        <div class="stat-box">
          <span class="stat-number">∞</span>
          <span class="stat-label">Lifetime Guarantee</span>
        </div>
        <div class="stat-box">
          <span class="stat-number">100%</span>
          <span class="stat-label">Custom Orders</span>
        </div>
        <div class="stat-box">
          <span class="stat-number">🕉️</span>
          <span class="stat-label">Rooted in Tradition</span>
        </div>
      </div>
    </div>
  </div>

  <!-- VALUES -->
  <section class="values-strip">
    <div class="section-label">What Drives Us</div>
    <h2 class="section-title">Our Values</h2>
    <div class="values-grid">
      <div class="value-item">
        <span class="value-icon">🙏</span>
        <div class="value-title">Devotion</div>
        <div class="value-desc">Every cut and carve is made with prayer and purpose.</div>
      </div>
      <div class="value-item">
        <span class="value-icon">📖</span>
        <div class="value-title">Scholarship</div>
        <div class="value-desc">We research scripture and tradition before every sacred commission.</div>
      </div>
      <div class="value-item">
        <span class="value-icon">🤝</span>
        <div class="value-title">Integrity</div>
        <div class="value-desc">Our lifetime guarantee is a promise, not a marketing line.</div>
      </div>
      <div class="value-item">
        <span class="value-icon">🌿</span>
        <div class="value-title">Care</div>
        <div class="value-desc">We select quality wood and finish every piece as if it were our own.</div>
      </div>
    </div>
  </section>

</div><!-- /page-wrap -->

<footer>
  <img src="logo.png" alt="Palani Projects" class="footer-logo">
  <div class="footer-name">Palani Projects</div>
  <div class="footer-mantra">✦ &nbsp; Aum Saravanabava &nbsp; ✦</div>
  <div class="footer-copy">© 2025 Palani Projects · Durban, South Africa · Handcrafted with Devotion</div>
</footer>

<script>
  function toggleMenu() {
    document.getElementById('navLinks').classList.toggle('open');
  }
</script>
</body>
</html>