Skip to content

Commit 78cc13f

Browse files
DarkModder33DarkModder33
authored
Enhance index.html with updates and new sections
Updated the meta description and improved the hero section text. Adjusted styles for better visual consistency and added testimonials carousel.
1 parent 5072a38 commit 78cc13f

1 file changed

Lines changed: 165 additions & 37 deletions

File tree

‎index.html‎

Lines changed: 165 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,25 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta name="description" content="Jersey Girl's Public Adjusting LLC - Heather Barile, Licensed NJ Public Adjuster in Vineland. Free inspections. We fight for policyholders to get every dollar you deserve.">
6+
<meta name="description" content="Jersey Girl's Public Adjusting LLC - Heather Barile, Licensed NJ Public Adjuster in Vineland. Free claim inspections & consultations. We fight for your full settlement.">
77
<title>Jersey Girl's Public Adjusting LLC | Heather Barile • Vineland, NJ</title>
8+
89
<script src="https://cdn.tailwindcss.com"></script>
910
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
1011
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
12+
1113
<style>
1214
body { font-family: 'Inter', system-ui, sans-serif; }
1315
.heading { font-family: 'Playfair Display', serif; }
14-
.hero-bg { background: linear-gradient(rgba(6,95,70,0.85), rgba(6,95,70,0.85)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&q=80') center/cover no-repeat fixed; }
16+
.hero-bg {
17+
background: linear-gradient(rgba(6,95,70,0.85), rgba(6,95,70,0.85)),
18+
url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&q=80') center/cover no-repeat fixed;
19+
}
1520
.card-hover { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
16-
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
21+
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
1722
.testimonial-slide { display: none; }
18-
.testimonial-slide.active { display: block; }
23+
.testimonial-slide.active { display: block; animation: fadeIn 0.8s; }
24+
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
1925
</style>
2026
</head>
2127
<body class="bg-stone-50 text-slate-800">
@@ -30,43 +36,104 @@
3036
<div class="hidden md:flex gap-8 text-sm font-medium">
3137
<a href="#services" class="hover:text-emerald-700">Services</a>
3238
<a href="#process" class="hover:text-emerald-700">Process</a>
33-
<a href="#heather" class="hover:text-emerald-700">About Heather</a>
34-
<a href="#areas" class="hover:text-emerald-700">Service Areas</a>
39+
<a href="#heather" class="hover:text-emerald-700">About</a>
40+
<a href="#areas" class="hover:text-emerald-700">Areas</a>
3541
<a href="#book" class="hover:text-emerald-700">Book Now</a>
3642
</div>
37-
<a href="tel:8565286726" class="bg-emerald-800 text-white px-6 py-3 rounded-3xl font-semibold flex items-center gap-2 hover:bg-emerald-900">Call (856) 528-6726</a>
43+
<a href="tel:8565286726" class="bg-emerald-800 text-white px-6 py-3 rounded-3xl font-semibold flex items-center gap-2 hover:bg-emerald-900 transition">
44+
<i class="fas fa-phone"></i> (856) 528-6726
45+
</a>
3846
</div>
3947
</nav>
4048

41-
<!-- HERO, TRUST BAR, SERVICES, PROCESS, ABOUT HEATHER, CALENDLY (unchanged from last version) -->
42-
<!-- [All previous sections are included in the full file – abbreviated here for message length] -->
49+
<!-- HERO - LANDING PAGE FOCAL POINT -->
50+
<section class="hero-bg h-screen flex items-center text-white">
51+
<div class="max-w-5xl mx-auto px-6 text-center">
52+
<p class="uppercase text-amber-200 tracking-widest text-sm font-medium mb-4">South Jersey • Independent • Woman-Owned</p>
53+
<h1 class="heading text-6xl md:text-7xl font-bold leading-none">Your Personal Advocate.<br>Your Dedicated Fighter.</h1>
54+
<p class="mt-8 text-xl max-w-3xl mx-auto">Heather Barile personally handles every claim — no call centers, no hand-offs. Free inspections. No upfront fees.</p>
55+
<div class="mt-12 flex flex-wrap justify-center gap-6">
56+
<a href="#book" class="bg-white text-emerald-900 px-10 py-5 rounded-3xl text-lg font-semibold hover:bg-amber-50 transition shadow-xl">Book Free Consultation</a>
57+
<a href="tel:8565286726" class="border-2 border-white px-10 py-5 rounded-3xl text-lg font-semibold hover:bg-white/10 transition">Call Heather Now</a>
58+
</div>
59+
</div>
60+
</section>
4361

44-
<!-- NEW: TESTIMONIALS CAROUSEL -->
45-
<section class="py-20 bg-emerald-50">
46-
<div class="max-w-4xl mx-auto px-6 text-center">
47-
<h2 class="heading text-5xl text-emerald-800 mb-12">What Our Clients Say</h2>
48-
<div id="testimonialCarousel">
49-
<div class="testimonial-slide active bg-white p-10 rounded-3xl shadow-lg">
50-
<p class="italic text-lg">"Heather got me $48,000 more than the insurance company offered. She's a true fighter!"</p>
51-
<p class="mt-6 font-semibold">— Michael T., Vineland</p>
52-
</div>
53-
<div class="testimonial-slide bg-white p-10 rounded-3xl shadow-lg">
54-
<p class="italic text-lg">"Professional, fast, and caring. I finally have the money to repair my home properly."</p>
55-
<p class="mt-6 font-semibold">— Lisa R., Millville</p>
56-
</div>
62+
<!-- TRUST BAR -->
63+
<div class="bg-white py-7 border-b">
64+
<div class="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-5 gap-6 text-center text-sm font-medium text-slate-600">
65+
<div>✅ Licensed & Bonded NJ</div>
66+
<div>👩‍💼 Woman-Owned</div>
67+
<div>🔍 Free Inspections</div>
68+
<div>💰 $0 Upfront</div>
69+
<div>🏠 Vineland Local</div>
70+
</div>
71+
</div>
72+
73+
<!-- SERVICES -->
74+
<section id="services" class="py-20 bg-white">
75+
<div class="max-w-6xl mx-auto px-6">
76+
<h2 class="heading text-5xl text-center mb-12 text-emerald-800">Claim Types We Handle</h2>
77+
<div class="grid md:grid-cols-3 gap-8">
78+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Water & Flood</strong><p class="mt-3 text-slate-600">Burst pipes, leaks, storms</p></div>
79+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Fire & Smoke</strong><p class="mt-3 text-slate-600">Structure, contents, soot</p></div>
80+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Wind & Hail</strong><p class="mt-3 text-slate-600">Roof, siding, structural</p></div>
81+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Mold (Covered)</strong><p class="mt-3 text-slate-600">From covered events</p></div>
82+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Business Interruption</strong><p class="mt-3 text-slate-600">Income loss claims</p></div>
83+
<div class="bg-stone-50 p-8 rounded-3xl card-hover"><strong>Other Perils</strong><p class="mt-3 text-slate-600">Vandalism, theft, collapse</p></div>
84+
</div>
85+
</div>
86+
</section>
87+
88+
<!-- PROCESS -->
89+
<section id="process" class="py-20 bg-stone-100">
90+
<div class="max-w-5xl mx-auto px-6">
91+
<h2 class="heading text-5xl text-center mb-12 text-emerald-800">Our 5-Step Process</h2>
92+
<div class="grid md:grid-cols-5 gap-8 text-center">
93+
<div><div class="w-12 h-12 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto text-xl font-bold">1</div><p class="mt-4 font-medium">Free Inspection</p></div>
94+
<div><div class="w-12 h-12 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto text-xl font-bold">2</div><p class="mt-4 font-medium">Documentation</p></div>
95+
<div><div class="w-12 h-12 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto text-xl font-bold">3</div><p class="mt-4 font-medium">Estimate</p></div>
96+
<div><div class="w-12 h-12 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto text-xl font-bold">4</div><p class="mt-4 font-medium">Negotiation</p></div>
97+
<div><div class="w-12 h-12 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto text-xl font-bold">5</div><p class="mt-4 font-medium">Settlement</p></div>
5798
</div>
5899
</div>
59100
</section>
60101

61-
<!-- NEW: SERVICE AREAS + GOOGLE MAP -->
62-
<section id="areas" class="py-20 bg-white">
102+
<!-- ABOUT HEATHER -->
103+
<section id="heather" class="py-20 bg-white">
104+
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
105+
<div>
106+
<h2 class="heading text-5xl text-emerald-800 mb-8">Meet Heather Barile</h2>
107+
<p class="text-lg text-slate-600 leading-relaxed">Licensed NJ Public Adjuster and proud owner. Rutgers-educated, South Jersey raised. I personally manage every claim from inspection to final settlement — direct access, no hand-offs, always fighting for you.</p>
108+
</div>
109+
<div class="bg-stone-100 rounded-3xl aspect-square flex items-center justify-center text-9xl">👩‍💼</div>
110+
</div>
111+
</section>
112+
113+
<!-- BOOKING SECTION - CALENDLY INLINE -->
114+
<section id="book" class="py-20 bg-white border-t border-stone-200">
115+
<div class="max-w-5xl mx-auto px-6 text-center">
116+
<h2 class="heading text-5xl text-emerald-800 mb-6">Book Your Free Consultation</h2>
117+
<p class="text-xl text-slate-600 mb-10">Pick a time that works — Heather will personally review your claim. No cost, no obligation.</p>
118+
<div class="calendly-inline-widget mx-auto" data-url="https://calendly.com/jerseygirlspublicadjuster/new-meeting?hide_event_type_details=1" style="min-width:320px;height:700px;"></div>
119+
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
120+
</div>
121+
</section>
122+
123+
<!-- SERVICE AREAS + MAP -->
124+
<section id="areas" class="py-20 bg-stone-50">
63125
<div class="max-w-6xl mx-auto px-6">
64-
<h2 class="heading text-5xl text-center text-emerald-800 mb-8">South Jersey Service Areas</h2>
126+
<h2 class="heading text-5xl text-center text-emerald-800 mb-10">South Jersey Service Areas</h2>
65127
<div class="grid md:grid-cols-2 gap-12 items-center">
66128
<div>
67-
<p class="text-lg mb-6">We proudly serve all of South Jersey from our Vineland office:</p>
129+
<p class="text-lg mb-6">Serving all of South Jersey from Vineland:</p>
68130
<ul class="grid grid-cols-2 gap-3 text-slate-600">
69-
<li>Cumberland County</li><li>Atlantic County</li><li>Cape May County</li><li>Salem County</li><li>Gloucester County</li><li>Camden County</li>
131+
<li>Cumberland County</li>
132+
<li>Atlantic County</li>
133+
<li>Cape May County</li>
134+
<li>Salem County</li>
135+
<li>Gloucester County</li>
136+
<li>Camden County</li>
70137
</ul>
71138
</div>
72139
<div class="rounded-3xl overflow-hidden shadow-xl">
@@ -76,30 +143,91 @@ <h2 class="heading text-5xl text-center text-emerald-800 mb-8">South Jersey Serv
76143
</div>
77144
</section>
78145

79-
<!-- NEW: FAQ ACCORDION -->
146+
<!-- TESTIMONIALS CAROUSEL -->
147+
<section class="py-20 bg-white">
148+
<div class="max-w-4xl mx-auto px-6 text-center">
149+
<h2 class="heading text-5xl text-emerald-800 mb-12">What Clients Say</h2>
150+
<div id="testimonialCarousel">
151+
<div class="testimonial-slide active bg-stone-50 p-10 rounded-3xl shadow-lg">
152+
<p class="italic text-lg">"Heather fought hard and got me thousands more than the insurance offer. Highly recommend!"</p>
153+
<p class="mt-6 font-semibold">— Michael T., Vineland</p>
154+
</div>
155+
<div class="testimonial-slide bg-stone-50 p-10 rounded-3xl shadow-lg">
156+
<p class="italic text-lg">"Fast, caring, and professional. Finally got the settlement I deserved."</p>
157+
<p class="mt-6 font-semibold">— Lisa R., Millville</p>
158+
</div>
159+
</div>
160+
</div>
161+
</section>
162+
163+
<!-- FAQ ACCORDION -->
80164
<section class="py-20 bg-stone-100">
81165
<div class="max-w-4xl mx-auto px-6">
82166
<h2 class="heading text-5xl text-center mb-12">Frequently Asked Questions</h2>
83-
<!-- FAQ items with Tailwind + simple JS toggle -->
84167
<div class="space-y-4">
85-
<details class="bg-white rounded-3xl p-6">
86-
<summary class="font-semibold cursor-pointer">How much does it cost to hire you?</summary>
87-
<p class="mt-4 text-slate-600">Nothing upfront. We only get paid if we recover money for you.</p>
168+
<details class="bg-white rounded-3xl p-6 shadow-sm">
169+
<summary class="font-semibold cursor-pointer">How much does it cost?</summary>
170+
<p class="mt-4 text-slate-600">Nothing upfront. We only get paid a percentage of what we recover for you.</p>
171+
</details>
172+
<details class="bg-white rounded-3xl p-6 shadow-sm">
173+
<summary class="font-semibold cursor-pointer">Do you offer free inspections?</summary>
174+
<p class="mt-4 text-slate-600">Yes — completely free property inspections to document all damage.</p>
175+
</details>
176+
<details class="bg-white rounded-3xl p-6 shadow-sm">
177+
<summary class="font-semibold cursor-pointer">What areas do you serve?</summary>
178+
<p class="mt-4 text-slate-600">All of South Jersey, based in Vineland.</p>
88179
</details>
89-
<!-- Add 4 more real FAQs the same way -->
90180
</div>
91181
</div>
92182
</section>
93183

94-
<!-- BOOK CONSULTATION (Calendly) + CONTACT FORM (kept from previous) -->
184+
<!-- CONTACT FORM -->
185+
<section id="contact" class="py-20 bg-white">
186+
<div class="max-w-4xl mx-auto px-6">
187+
<h2 class="heading text-5xl text-center mb-12 text-emerald-800">Or Submit for Free Review</h2>
188+
<form action="https://formspree.io/f/YOUR_FORMSPREE_ID" method="POST" class="grid md:grid-cols-2 gap-6 bg-stone-50 p-10 rounded-3xl shadow-lg">
189+
<input type="text" name="name" placeholder="Your Name" required class="border rounded-2xl px-6 py-4 focus:outline-none focus:border-emerald-700">
190+
<input type="tel" name="phone" placeholder="Phone" required class="border rounded-2xl px-6 py-4 focus:outline-none focus:border-emerald-700">
191+
<input type="email" name="email" placeholder="Email" required class="border rounded-2xl px-6 py-4 focus:outline-none focus:border-emerald-700 md:col-span-2">
192+
<textarea name="message" rows="5" placeholder="Tell us about your claim..." class="md:col-span-2 border rounded-3xl px-6 py-4 focus:outline-none focus:border-emerald-700"></textarea>
193+
<button type="submit" class="md:col-span-2 bg-emerald-800 text-white py-6 rounded-3xl text-xl font-semibold hover:bg-emerald-900">Submit →</button>
194+
</form>
195+
</div>
196+
</section>
197+
198+
<!-- FOOTER -->
199+
<footer class="bg-slate-900 text-white py-12 text-center">
200+
<div class="max-w-7xl mx-auto px-6">
201+
<p class="text-2xl heading mb-4">Jersey Girl's Public Adjusting LLC</p>
202+
<p>901 E Elmer Road • Vineland, NJ 08360</p>
203+
<p class="mt-2">(856) 528-6726 • Heather Barile, Owner</p>
204+
<p class="text-sm mt-8 text-slate-400">© 2026 • Independent NJ Licensed Public Adjuster</p>
205+
</div>
206+
</footer>
95207

96208
<!-- FLOATING CALL BUTTON -->
97-
<a href="tel:8565286726" class="fixed bottom-8 right-8 bg-emerald-800 text-white w-16 h-16 rounded-3xl flex items-center justify-center shadow-2xl hover:bg-emerald-900 z-50 text-3xl">📞</a>
209+
<a href="tel:8565286726" class="fixed bottom-8 right-8 bg-emerald-800 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-2xl hover:bg-emerald-900 z-50 text-2xl">
210+
<i class="fas fa-phone"></i>
211+
</a>
98212

99-
<!-- Chatbase Script (your exact code) at the very end before </body> -->
213+
<!-- Chatbase Widget -->
214+
<script>
215+
(function(){if(!window.chatbase||window.chatbase("getState")!=="initialized"){window.chatbase=(...arguments)=>{if(!window.chatbase.q){window.chatbase.q=[]}window.chatbase.q.push(arguments)};window.chatbase=new Proxy(window.chatbase,{get(target,prop){if(prop==="q"){return target.q}return(...args)=>target(prop,...args)}})}const onLoad=function(){const script=document.createElement("script");script.src="https://www.chatbase.co/embed.min.js";script.id="NAZ9TRG3hwywidlXD2UMf";script.domain="www.chatbase.co";document.body.appendChild(script)};if(document.readyState==="complete"){onLoad()}else{window.addEventListener("load",onLoad)}})();
216+
</script>
100217

218+
<!-- Simple Carousel Auto-Rotate -->
101219
<script>
102-
// Simple carousel + accordion logic included
220+
const slides = document.querySelectorAll('.testimonial-slide');
221+
let current = 0;
222+
if (slides.length > 0) {
223+
slides[current].classList.add('active');
224+
setInterval(() => {
225+
slides[current].classList.remove('active');
226+
current = (current + 1) % slides.length;
227+
slides[current].classList.add('active');
228+
}, 8000);
229+
}
103230
</script>
231+
104232
</body>
105233
</html>

0 commit comments

Comments
 (0)