about us simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is about me

About us

Author QQ-VVN

Tailwind v3.4 1.1k

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
 <section class="min-h-screen px-4 py-14 text-white font-sans">
    <div class="max-w-6xl mx-auto">
        <div class="max-w-3xl mx-auto text-center mb-12 relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-indigo-600/20 blur-3xl opacity-30 rounded-full"></div>
            <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500 mb-4">Hakkımızda</h1>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 mx-auto mb-6 rounded-full"></div>
            <p class="text-lg text-gray-300 relative z-10">
                Mütevazı başlangıçlardan oyun dünyasında bir oyun değiştirici olmaya — 2015'ten beri en son teknoloji araçlar, eklentiler ve çözümler üretiyoruz. Sadece ürün geliştirmiyoruz; oyunun geleceğini şekillendiren deneyimler yaratıyoruz.
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-rocket text-blue-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Yolculuğumuz</h3>
                <p class="text-gray-300">
                    2015'te büyük bir vizyona sahip küçük bir ekip olarak başlayan serüvenimiz, şimdi yaratıcılık, teknoloji ve yeniliğin merkezi haline geldi. Misyonumuz her zaman netti: oyun dünyasında mümkün olanın sınırlarını zorlayan araçlar yaratmak.
                </p>
                <p class="text-gray-300 mt-4">
                    Üstlendiğimiz her projede, hem geliştiriciler hem de oyuncular için deneyimi yükseltmeyi hedefliyoruz. Çözümlerimiz sadece araç değil; yaratıcılığın katalizörleridir.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-lightbulb text-purple-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Özünde Yenilik</h3>
                <p class="text-gray-300">
                    Yenilik bizim için sadece bir sözcük değil — şirketimizin kalp atışıdır. Geliştirdiğimiz her ürün ilham vermek, meydan okumak ve dönüştürmek için tasarlanmıştır. Vizyoner ve uzman ekibimiz sürekli olarak sınırları zorluyor.
                </p>
                <p class="text-gray-300 mt-4">
                    En küçük detayı mükemmelleştirirken veya tamamen yeni bir şey yaratırken, odak noktamız her zaman kalite, performans ve kullanıcı deneyimidir. Sadece trendi takip etmiyoruz; trendi yaratıyoruz.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mb-16">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">8+</div>
                    <div class="text-gray-400">Yıllık Deneyim</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">50k+</div>
                    <div class="text-gray-400">Mutlu Kullanıcı</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div>
                    <div class="text-gray-400">Çalışma Süresi</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">7/24</div>
                    <div class="text-gray-400">Destek</div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-indigo-400/20 to-indigo-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-clock text-indigo-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Gelecek Şimdi</h3>
                <p class="text-gray-300">
                    Oyunun geleceği sınırsız ve vizyonumuz da öyle. Büyümeye ve gelişmeye devam ederken, gelecekte olacakları şekillendirmeye her zamankinden daha kararlıyız. Ekibimiz sürekli yenilik yapıyor, araştırıyor ve işbirliği yapıyor.
                </p>
                <p class="text-gray-300 mt-4">
                    Sadece yazılım geliştirmiyoruz; deneyimler şekillendiriyoruz. Odak noktamız, geliştiricileri güçlendiren, oyun deneyimini geliştiren ve interaktif eğlencenin geleceğini sunan yeni nesil oyun araçları yaratmak.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Neden Biz?</h3>
                <p class="text-gray-300">
                    Oyun dünyasının sürekli değiştiği bir ortamda, sadece ürün değil — bir ortaklık sunuyoruz. Oyun dünyasının rekabetçi, hızlı tempolu ve sürekli gelişen bir yapıya sahip olduğunu anlıyoruz.
                </p>
                <p class="text-gray-300 mt-4">
                    İş akışınızı düzene sokmak isteyen bir geliştirici veya deneyiminizi üst seviyeye çıkarmak isteyen bir oyuncu olun, yanınızdayız. Ürünlerimiz tek bir hedefle tasarlandı: en iyi işinizi yapmanızı, en iyi oyununuzu oynamanızı ve en iyi deneyiminizi yaratmanızı sağlamak.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mt-16">
            <h3 class="text-2xl font-bold text-white mb-8 text-center">Değerlerimiz</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-blue-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Güvenlik</h4>
                    <p class="text-gray-400 text-sm">En son güvenlik önlemleriyle güvenliğinizi ve gizliliğinizi önceliklendiriyoruz</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-tachometer-alt text-purple-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Performans</h4>
                    <p class="text-gray-400 text-sm">Araçlarımız minimum sistem etkisiyle maksimum performans için optimize edilmiştir</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-headset text-green-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Destek</h4>
                    <p class="text-gray-400 text-sm">Özel ekibimiz her türlü sorunuzda size yardımcı olmaya hazır</p>
                </div>
            </div>
        </div>
    </div>
</section>
</div>

Related Examples

Heading Style

KULDEEP

1 year ago

765
thyis is my play ground
this playground is responsive

bonheur dev

1 year ago

1.3k
bugger delivary animation
this playground is responsive and animated bugger delivary

Bonimater

1 year ago

1.4k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
Boimator welcoming back
Boimator welcoming back

Bonimater

1 year ago

1k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.7k
Questionnaire Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.2k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Bonimater

1 year ago

1.6k
basichtml
this is basic html

Anonymous

1 year ago

925