fw.github.io/index.html at main · edwin3v3/fw.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FW Cakes - www.fw.co.ke</title>

  <!-- In <head> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-gray-50 text-gray-800 font-sans">
  <!-- Hero Section -->
  <header class="bg-white shadow-sm">
    <div class="max-w-6xl mx-auto px-4 pt-12 pb-4">

      <!-- <nav class="hidden md:flex gap-6 text-sm">
        <a href="#cakes" class="hover:text-gray-500">Cakes</a>
        <a href="#testimonials" class="hover:text-gray-500">Testimonials</a>
        <a href="#contact" class="hover:text-gray-500">Contact</a>
      </nav> -->
      <nav class="flex justify-between max-w-4xl mx-auto px-4">
        <ul class="flex space-x-6">
          <a href="#cakes" class="hover:text-gray-500">Cakes</a>
          <a href="#testimonials" class="hover:text-gray-500">Testimonials</a>
          <!-- Left nav links -->
        </ul>
        <a class="text-2xl font-bold text-gray-600 bg-white block" href="./index.html"
          title="Flavors n Wishes - fw.co.ke">
          <img src="./fw-logo-june5_03.png" class="w-[100px] absolute top-1 left-1/2 transform -translate-x-1/2 "
            alt="Flavor n Wish Logo"></a>
        <ul class="flex space-x-6">
          <!-- Right nav links -->
          <a href="#contact" class="hover:text-gray-500">Contact</a>
        </ul>
      </nav>


    </div>
  </header>

  <!-- Immediate Call to Action -->

  <section id="cakes" class="text-center px-4 pt-32 pb-10 bg-gray-100"
    style="background-image: linear-gradient(to bottom, rgba(240, 240, 237, 0.651), rgba(251, 255, 198, 0.014)), url('banner-repeat1.jpg');">
    <h2 class="text-5xl font-extrabold text-[#000] mb-4" style="-webkit-text-stroke: 1px #ffbb009f">Delicious Cakes, One
      Call Away</h2>
    <p class="text-gray-700 mb-8 text-lg">Made fresh for your enjoyment or celebration. Quick ordering by phone.</p>
    <a href="tel:0768240578"
      class="inline-block inline-flex items-center gap-4 px-8 py-4 bg-[#333] text-white rounded-full text-lg font-semibold hover:bg-gray-800 transition">
      Call to Order: <img src="https://flagcdn.com/w40/ke.png" alt="Kenya flag"
        class="w-6 h-4 border-white/45 border" /> <span class="text-[23px]">0768 240578</span>
    </a>
    <div class="text-[13px] text-[#8c3a3a] pt-2">“Speak <span class="font-bold">directly</span> to our baker. Orders
      confirmed instantly.”</div>

    <div class="max-w-6xl mx-auto px-4 pt-20 pb-10">
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white rounded-2xl shadow-md p-4">
          <img src="./cheesecake-cropped.jpg" alt="Cake" class="rounded-xl mb-4 w-full h-48 object-cover" />
          <h4 class="text-lg font-semibold">Unforgetable Cheesecake</h4>
          <p class="text-gray-500 text-sm">Just a classic - Delicious with a smooth texture contrasting with a crunchy
            base with chocolate or nutty topping</p>
        </div>
        <div class="bg-white rounded-2xl shadow-md p-4">
          <img src="./IMG_20230701_133237.jpg" alt="Cake" class="rounded-xl mb-4 w-full h-48 object-cover" />
          <h4 class="text-lg font-semibold">Blue Berry Lemon Cake</h4>

          <p class="text-gray-500 text-sm">A perfect balance of sweet and tangy. Lemon cake with blue berry filling or
            Blueberry cake with lemon curd filling</p>
        </div>
        <div class="bg-white rounded-2xl shadow-md p-4">
          <img src="./cropped-brownie-fudgy1.jpg" alt="Cake" class="rounded-xl mb-4 w-full h-48 object-cover" />
          <h4 class="text-lg font-semibold">Chocolate Chunk Brownie</h4>
          <p class="text-gray-500 text-sm">Dense, fudgy - packed with melty chocolate chunks in every bite. Crisp on the
            edges and gooey at the center,</p>
        </div>
      </div>
    </div>
  </section>


  <section id="gallery" class="bg-white py-16 px-4">
    <h3 class="text-3xl font-semibold text-center text-gray-600 mb-10">Cake Gallery</h3>

    <div class="swiper w-full max-w-4xl mx-auto rounded-xl overflow-hidden">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./gallery/IMG_20220809_165824.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230702_083544.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230128_115538.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/cake-corpdex.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230702_083537.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230702_083418.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230718_152120.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230718_171629.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230719_114359.jpg" class="w-full h-64 object-cover" />
        </div>
        <div class="swiper-slide">
          <img src="./gallery/IMG_20230719_120740.jpg" class="w-full h-64 object-cover" />
        </div>
        <!-- Add more slides if needed -->
      </div>

      <!-- Optional navigation buttons -->
      <div class="swiper-button-next text-gray-500"></div>
      <div class="swiper-button-prev text-gray-500"></div>
      <div class="swiper-pagination"></div>
    </div>
  </section>

  <!-- Stronger Testimonial for orders-->


  <section class="bg-gray-50 py-20 px-4" id="testimonials">
    <h3 class="text-3xl text-center font-bold text-black mb-10">Happy Customers</h3>
    <div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
      <blockquote class="bg-white p-6 rounded shadow text-sm text-gray-700">
        “The Vanilla cake for my boy was a hit! Easy to order and super fast delivery.”<cite
          class="block mt-4 text-gray-500 font-semibold">– Rose Chege</cite>
      </blockquote>

      <blockquote class="bg-white rounded-xl p-6 shadow text-sm text-gray-700">
        “Absolutely delicious and stunning! My golf birthday cake was everything I dreamed of.”
        <cite class="block mt-4 text-gray-500 font-semibold">– Benedict Macharia.</cite>
      </blockquote>

      <blockquote class="bg-white rounded-xl p-6 shadow text-sm text-gray-700">
        “Perfect for my cousin's birthday – moist, flavorful, and beautifully decorated.”
        <cite class="block mt-4 text-gray-500 font-semibold">– Daniel Kimathi.</cite>
      </blockquote>
      <!-- Repeat -->
    </div>
  </section>

  <!-- Order section -->

  <!-- Contact / Footer -->
  <footer id="contact" class="bg-white border-t py-10 px-4">
    <div class="max-w-4xl mx-auto text-center">
      <h3 class="text-3xl font-bold text-black mb-6">Ready to Order?</h3>
      <p class="text-gray-700 mb-6 max-w-md mx-auto">Give us a quick call to customize your cake. No forms. No hassle.
      </p>
      <a href="tel:+254768240578"
        class="inline-block bg-black text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-800 transition">
        📞 0768 240578
      </a>
      <p class="text-sm text-gray-600 pt-7">© 2025 FW Cakes - <a class="underline"
          href="https://fw.co.ke">www.fw.co.ke</a> All rights reserved.</p>
    </div>
  </footer>

  <!-- Before </body> -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    const swiper = new Swiper('.swiper', {
      loop: true,
      spaceBetween: 20,
      slidesPerView: 1,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      breakpoints: {
        768: {
          slidesPerView: 2
        },
        1024: {
          slidesPerView: 3
        }
      }
    });
  </script>


</body>

</html>