initial

web/app/about/page.tsx

@@ -0,0 +1,135 @@
+import type { Metadata } from 'next';
+import CTASection from '@/components/CTASection';
+import site from '@/content/site.json';
+
+export const metadata: Metadata = {
+  title: 'About C & I Electrical Contractors | Corpus Christi Electrician',
+  description: 'Learn about C & I Electrical Contractors, serving Corpus Christi since 2005. Licensed, insured, and committed to safety and quality electrical work.',
+  openGraph: {
+    title: 'About C & I Electrical Contractors | Corpus Christi Electrician',
+    description: 'Learn about C & I Electrical Contractors, serving Corpus Christi since 2005. Licensed, insured, and committed to safety and quality electrical work.',
+    images: ['/og/about-electrician-1200x630.jpg']
+  }
+};
+
+export default function About() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
+        <div className="container-custom py-24">
+          <div className="inline-flex items-center gap-2 bg-brand-danger px-4 py-2 rounded-full text-sm font-semibold mb-6 text-black">
+            <span>⚡</span>
+            24/7 Emergency Electrician • Average response under 60 minutes in Corpus Christi
+          </div>
+          <h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
+            About C & I Electrical Contractors
+          </h1>
+          <p className="text-xl text-gray-300 mb-12 max-w-prose">
+            Serving Corpus Christi with reliable electrical solutions since 2005. Licensed, insured, and committed to safety and quality.
+          </p>
+          
+          {/* Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <Stat n="19+" label="Years in Business" />
+            <Stat n="1000+" label="Projects Completed" />
+            <Stat n="100%" label="Licensed & Insured" />
+            <Stat n="24/7" label="Emergency Service" />
+          </div>
+        </div>
+      </section>
+
+      {/* STORY */}
+      <section className="py-24 bg-white">
+        <div className="container-custom">
+          <div className="grid md:grid-cols-3 gap-12">
+            <div className="md:col-span-2 space-y-6">
+              <h2 className="font-heading font-bold text-3xl">Our Story</h2>
+              <div className="space-y-4 text-gray-700 font-body">
+                <p>
+                  C & I Electrical Contractors was founded by Henry Del Llano in 2005 with a simple mission: provide reliable, high-quality electrical services to the Corpus Christi community.
+                </p>
+                <p>
+                  What started as a small residential service has grown into a trusted contractor serving both residential and commercial clients throughout the greater Corpus Christi area.
+                </p>
+                <p>
+                  Today, we continue to uphold the same values that made us successful: safety first, quality work, reliable service, and a commitment to our community.
+                </p>
+              </div>
+            </div>
+            <div className="card">
+              <h3 className="font-heading font-semibold text-lg mb-3">Licensed & Insured</h3>
+              <p className="text-gray-600 text-sm">
+                Fully licensed electrical contractor in Texas with general liability and workers comp.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* VALUES */}
+      <section className="py-24 bg-brand-surface">
+        <div className="container-custom">
+          <h2 className="font-heading font-bold text-3xl text-center mb-12">Our Values</h2>
+          <div className="grid md:grid-cols-4 gap-8">
+            {[
+              {
+                title: 'Safety First',
+                desc: 'Every job starts with a safety assessment.',
+                icon: '🛡️'
+              },
+              {
+                title: 'Quality Work',
+                desc: 'Code-compliant electrical work done right the first time.',
+                icon: '✅'
+              },
+              {
+                title: 'Reliable Service',
+                desc: 'On time, clearly explained options, no surprises.',
+                icon: '⏰'
+              },
+              {
+                title: 'Community Focused',
+                desc: 'Proud to serve Corpus Christi.',
+                icon: '🏠'
+              }
+            ].map((value, i) => (
+              <div key={i} className="card text-center">
+                <div className="text-4xl mb-4">{value.icon}</div>
+                <h3 className="font-heading font-semibold text-lg mb-2">{value.title}</h3>
+                <p className="text-gray-600 text-sm">{value.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24 bg-brand-dark text-white">
+        <div className="container-custom text-center">
+          <h2 className="font-heading font-bold text-3xl mb-6">Ready to Work With Us?</h2>
+          <p className="text-xl text-gray-300 mb-8 max-w-prose mx-auto">
+            Experience the difference of safety, quality, and customer satisfaction.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a href="tel:+13618850315" className="btn-primary">
+              Call Now
+            </a>
+            <a href="/contact" className="btn-secondary">
+              Get Free Quote
+            </a>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function Stat({ n, label }: { n: string; label: string }) {
+  return (
+    <div className="card bg-white/10 border-white/20 text-center">
+      <div className="text-3xl font-bold text-black mb-2">{n}</div>
+      <div className="text-sm text-black">{label}</div>
+    </div>
+  );
+}