Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
## SenangStart CSS Code
```html
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div space="m-b:big tw-lg:m-b:big-3x" visual="text:center">
<span layout="inline" space="p-y:tiny p-x:small-3x m-b:medium" visual="rounded:round text-size:small font:tw-semibold text:blue-600 bg:blue-100 uppercase">Our Evolution</span>
<h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Adapting and Thriving: Our Story of Change</h2>
<p space="max-w:[3xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.</p>
</div>
<div layout="grid grid-cols:1 tw-lg:grid-cols:2 items:stretch" space="g:large tw-lg:g:big">
<!-- Section 1: Our Roots -->
<div layout="flex col" space="p:large" visual="bg:neutral-50 rounded:medium shadow:big hover:shadow:giant transition:shadow duration:slow">
<div layout="overflow:hidden" space="m-b:medium-3x" visual="rounded:medium">
<img src="https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles" alt="Our Roots" layout="object:cover" space="w:[100%] h:vast-3x" visual="rounded:medium transition:transform duration:slow" class="transform hover:scale-105">
</div>
<h3 space="m-b:medium" visual="text-size:huge tw-lg:text-size:grand font:tw-bold text:blue-700">Our Roots: The Foundation</h3>
<p layout="grow" space="m-b:medium" visual="text:neutral-600">Established in [Year], our company was born from a desire to [Original Mission/Problem Solved]. Our founding principles of [Value 1], [Value 2], and [Value 3] have guided us through every stage of our development, creating a strong base for future growth.</p>
<a href="#history" layout="inline" space="m-t:auto" visual="text:blue-600 font:tw-semibold hover:text:blue-800" class="group">
Learn more about our history
<i space="m-l:tiny" visual="transition:transform duration:normal" class="fas fa-arrow-right transform group-hover:translate-x-1"></i>
</a>
</div>
<!-- Section 2: Growth and Adaptation -->
<div layout="flex col" space="p:large" visual="bg:blue-600 text:white rounded:medium shadow:big hover:shadow:giant transition:shadow duration:slow">
<div layout="overflow:hidden" space="m-b:medium-3x" visual="rounded:medium">
<img src="https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward" alt="Growth and Adaptation" layout="object:cover" space="w:[100%] h:vast-3x" visual="rounded:medium transition:transform duration:slow" class="transform hover:scale-105">
</div>
<h3 space="m-b:medium" visual="text-size:huge tw-lg:text-size:grand font:tw-bold">Our Growth: Embracing the Future</h3>
<p layout="grow" space="m-b:medium" visual="text:blue-100">As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include [New Service 1] and [New Service 2], adopted cutting-edge [Technology/Methodology], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.</p>
<a href="#innovations" layout="inline" space="m-t:auto" visual="text:blue-200 font:tw-semibold hover:text:white" class="group">
Explore our innovations
<i space="m-l:tiny" visual="transition:transform duration:normal" class="fas fa-arrow-right transform group-hover:translate-x-1"></i>
</a>
</div>
</div>
<div space="m-t:big tw-lg:m-t:big-3x p:large" visual="text:center bg:neutral-100 rounded:medium">
<p visual="text-size:big tw-lg:text-size:huge text:neutral-800 font:tw-semibold">Our story is one of continuous improvement and unwavering commitment.</p>
<p space="m-t:small" visual="text:neutral-600">We are proud of our past and excited about building an even brighter future alongside our partners and clients.</p>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="text-center mb-12 lg:mb-16">
<span class="inline-block py-1 px-3 rounded-full text-sm font-semibold text-blue-600 bg-blue-100 uppercase mb-4">Our Evolution</span>
<h2 class="text-3xl lg:text-5xl font-bold mb-4">Adapting and Thriving: Our Story of Change</h2>
<p class="text-lg lg:text-xl text-neutral-700 max-w-3xl mx-auto">In a dynamic world, growth means more than just expansion; it means evolving with purpose and embracing change to better serve our community.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">
<!-- Section 1: Our Roots -->
<div class="bg-neutral-50 p-8 rounded-xl shadow-lg flex flex-col hover:shadow-xl transition-shadow duration-300">
<div class="mb-6 overflow-hidden rounded-lg">
<img src="https://placehold.co/500x300/a5b4fc/1e3a8a?text=Our+Founding+Principles" alt="Our Roots" class="rounded-lg w-full object-cover h-48 transform hover:scale-105 transition-transform duration-300">
</div>
<h3 class="text-2xl lg:text-3xl font-bold mb-4 text-blue-700">Our Roots: The Foundation</h3>
<p class="text-neutral-600 mb-4 flex-grow">Established in [Year], our company was born from a desire to [Original Mission/Problem Solved]. Our founding principles of [Value 1], [Value 2], and [Value 3] have guided us through every stage of our development, creating a strong base for future growth.</p>
<a href="#history" class="inline-block mt-auto text-blue-600 font-semibold hover:text-blue-800 group">
Learn more about our history
<i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform duration-200"></i>
</a>
</div>
<!-- Section 2: Growth and Adaptation -->
<div class="bg-blue-600 text-white p-8 rounded-xl shadow-lg flex flex-col hover:shadow-xl transition-shadow duration-300">
<div class="mb-6 overflow-hidden rounded-lg">
<img src="https://placehold.co/500x300/60a5fa/ffffff?text=Future+Forward" alt="Growth and Adaptation" class="rounded-lg w-full object-cover h-48 transform hover:scale-105 transition-transform duration-300">
</div>
<h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Growth: Embracing the Future</h3>
<p class="text-blue-100 mb-4 flex-grow">As markets shifted and new technologies emerged, we embraced change as an opportunity. We've expanded our services to include [New Service 1] and [New Service 2], adopted cutting-edge [Technology/Methodology], and consistently listened to our clients to refine our offerings. This adaptability ensures we remain at the forefront of innovation.</p>
<a href="#innovations" class="inline-block mt-auto text-blue-200 font-semibold hover:text-white group">
Explore our innovations
<i class="fas fa-arrow-right ml-1 transform group-hover:translate-x-1 transition-transform duration-200"></i>
</a>
</div>
</div>
<div class="mt-12 lg:mt-16 text-center bg-neutral-100 p-8 rounded-xl">
<p class="text-xl lg:text-2xl text-neutral-800 font-semibold">Our story is one of continuous improvement and unwavering commitment.</p>
<p class="text-neutral-600 mt-2">We are proud of our past and excited about building an even brighter future alongside our partners and clients.</p>
</div>
</section>
```