Components : Vision and Values

Preview content adapted to proportion

Vision and Values

AboutUs

It is used to present the company's mission, principles, and achievements to potential employees, customers, and stakeholders, fostering trust and engagement.

This component showcases the company's vision, core values, history, team, and career opportunities through a visually engaging layout with gradients, interactive elements, and a timeline.

Hover effects on grid items, timeline points, and buttons change scale, shadow, and background color. Buttons change color on hover to indicate interactivity.


The layout adjusts dynamically with grid columns that change from 1 to 3 on large screens, ensuring readability and visual appeal across devices.

Date : June 09, 2025
Views : 27
Copys : 0

fa-tags

Company websites, career pages, corporate presentations, promotional materials

Code

<div class="relative overflow-hidden bg-gradient-to-br from-[#2D3748]/30 via-[#6B7280]/20 to-[#004E7F]/10">
 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-24">
  <!-- Title Section -->
  <div class="space-y-6 text-center">
   <h2 class="text-4xl font-bold text-[#F7FAFC]">
    About Our Vision
   </h2>
   <p class="text-xl text-[#EDF2F7]/80 max-w-2xl mx-auto">
    Building tomorrow's solutions with today's innovation
   </p>
  </div>
  <!-- Core Values Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Innovation First
    </h3>
    <p class="text-[#EDF2F7]/80">
     Pioneering solutions through cutting-edge technology
    </p>
   </div>
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Global Impact
    </h3>
    <p class="text-[#EDF2F7]/80">
     Creating worldwide sustainable solutions
    </p>
   </div>
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Team Synergy
    </h3>
    <p class="text-[#EDF2F7]/80">
     Collaborative excellence drives success
    </p>
   </div>
  </div>
  <!-- Timeline Section -->
  <div class="flow-root">
   <div class="-mb-8">
    <div class="relative pb-8">
     <div class="relative flex items-start space-x-4">
      <div class="relative">
       <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
        ?
       </div>
       <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
       </div>
      </div>
      <div class="pt-1">
       <h4 class="text-xl font-semibold text-[#F7FAFC]">
        Founded in 2015
       </h4>
       <p class="mt-2 text-[#EDF2F7]/80">
        Started our journey with 5 team members
       </p>
      </div>
     </div>
    </div>
    <div class="relative pb-8">
     <div class="relative flex items-start space-x-4">
      <div class="relative">
       <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
        ?
       </div>
       <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
       </div>
      </div>
      <div class="pt-1">
       <h4 class="text-xl font-semibold text-[#F7FAFC]">
        First Product Launch
       </h4>
       <p class="mt-2 text-[#EDF2F7]/80">
        Revolutionized industry standards in 2018
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!-- Team Section -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
   <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
    <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
     <div class="w-full h-full flex items-center justify-center text-6xl">
      ??
     </div>
    </div>
    <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
     Sarah Chen
    </h3>
    <p class="text-[#EDF2F7]/80">
     CTO
    </p>
   </div>
   <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
    <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
     <div class="w-full h-full flex items-center justify-center text-6xl">
      ??
     </div>
    </div>
    <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
     Michael Johnson
    </h3>
    <p class="text-[#EDF2F7]/80">
     CEO
    </p>
   </div>
  </div>
  <!-- CTA Section -->
  <div class="flex flex-col md:flex-row items-center justify-center gap-6">
   <button class="px-8 py-3 bg-[#3182CE] hover:bg-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
    Join Our Team
   </button>
   <button class="px-8 py-3 border-2 border-[#6B7280] hover:border-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
    View Careers
   </button>
  </div>
 </section>
</div>


<template>
 <div class="relative overflow-hidden bg-gradient-to-br from-[#2D3748]/30 via-[#6B7280]/20 to-[#004E7F]/10">
  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-24">
   <!-- Title Section -->
   <div class="space-y-6 text-center">
    <h2 class="text-4xl font-bold text-[#F7FAFC]">
     About Our Vision
    </h2>
    <p class="text-xl text-[#EDF2F7]/80 max-w-2xl mx-auto">
     Building tomorrow's solutions with today's innovation
    </p>
   </div>
   <!-- Core Values Grid -->
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
    <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
     <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
      ?
     </div>
     <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
      Innovation First
     </h3>
     <p class="text-[#EDF2F7]/80">
      Pioneering solutions through cutting-edge technology
     </p>
    </div>
    <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
     <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
      ?
     </div>
     <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
      Global Impact
     </h3>
     <p class="text-[#EDF2F7]/80">
      Creating worldwide sustainable solutions
     </p>
    </div>
    <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
     <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
      ?
     </div>
     <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
      Team Synergy
     </h3>
     <p class="text-[#EDF2F7]/80">
      Collaborative excellence drives success
     </p>
    </div>
   </div>
   <!-- Timeline Section -->
   <div class="flow-root">
    <div class="-mb-8">
     <div class="relative pb-8">
      <div class="relative flex items-start space-x-4">
       <div class="relative">
        <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
         ?
        </div>
        <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
        </div>
       </div>
       <div class="pt-1">
        <h4 class="text-xl font-semibold text-[#F7FAFC]">
         Founded in 2015
        </h4>
        <p class="mt-2 text-[#EDF2F7]/80">
         Started our journey with 5 team members
        </p>
       </div>
      </div>
     </div>
     <div class="relative pb-8">
      <div class="relative flex items-start space-x-4">
       <div class="relative">
        <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
         ?
        </div>
        <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
        </div>
       </div>
       <div class="pt-1">
        <h4 class="text-xl font-semibold text-[#F7FAFC]">
         First Product Launch
        </h4>
        <p class="mt-2 text-[#EDF2F7]/80">
         Revolutionized industry standards in 2018
        </p>
       </div>
      </div>
     </div>
    </div>
   </div>
   <!-- Team Section -->
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
     <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
      <div class="w-full h-full flex items-center justify-center text-6xl">
       ??
      </div>
     </div>
     <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
      Sarah Chen
     </h3>
     <p class="text-[#EDF2F7]/80">
      CTO
     </p>
    </div>
    <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
     <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
      <div class="w-full h-full flex items-center justify-center text-6xl">
       ??
      </div>
     </div>
     <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
      Michael Johnson
     </h3>
     <p class="text-[#EDF2F7]/80">
      CEO
     </p>
    </div>
   </div>
   <!-- CTA Section -->
   <div class="flex flex-col md:flex-row items-center justify-center gap-6">
    <button class="px-8 py-3 bg-[#3182CE] hover:bg-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
     Join Our Team
    </button>
    <button class="px-8 py-3 border-2 border-[#6B7280] hover:border-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
     View Careers
    </button>
   </div>
  </section>
 </div>
</template>
<script>
 export default {
    name: 'MyAboutUsComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyAboutUsComponent = () => {
    return (
<div>
<div class="relative overflow-hidden bg-gradient-to-br from-[#2D3748]/30 via-[#6B7280]/20 to-[#004E7F]/10">
 <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-24">
  <!-- Title Section -->
  <div class="space-y-6 text-center">
   <h2 class="text-4xl font-bold text-[#F7FAFC]">
    About Our Vision
   </h2>
   <p class="text-xl text-[#EDF2F7]/80 max-w-2xl mx-auto">
    Building tomorrow's solutions with today's innovation
   </p>
  </div>
  <!-- Core Values Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Innovation First
    </h3>
    <p class="text-[#EDF2F7]/80">
     Pioneering solutions through cutting-edge technology
    </p>
   </div>
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Global Impact
    </h3>
    <p class="text-[#EDF2F7]/80">
     Creating worldwide sustainable solutions
    </p>
   </div>
   <div class="p-8 bg-[#2D3748] rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-[#3182CE]/20">
    <div class="w-16 h-16 mb-6 bg-[#10B981] rounded-2xl flex items-center justify-center text-3xl">
     ?
    </div>
    <h3 class="text-2xl font-semibold text-[#F7FAFC] mb-4">
     Team Synergy
    </h3>
    <p class="text-[#EDF2F7]/80">
     Collaborative excellence drives success
    </p>
   </div>
  </div>
  <!-- Timeline Section -->
  <div class="flow-root">
   <div class="-mb-8">
    <div class="relative pb-8">
     <div class="relative flex items-start space-x-4">
      <div class="relative">
       <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
        ?
       </div>
       <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
       </div>
      </div>
      <div class="pt-1">
       <h4 class="text-xl font-semibold text-[#F7FAFC]">
        Founded in 2015
       </h4>
       <p class="mt-2 text-[#EDF2F7]/80">
        Started our journey with 5 team members
       </p>
      </div>
     </div>
    </div>
    <div class="relative pb-8">
     <div class="relative flex items-start space-x-4">
      <div class="relative">
       <div class="h-8 w-8 bg-[#3182CE] rounded-full flex items-center justify-center">
        ?
       </div>
       <div class="absolute h-full w-0.5 bg-[#6B7280] left-4 -top-4">
       </div>
      </div>
      <div class="pt-1">
       <h4 class="text-xl font-semibold text-[#F7FAFC]">
        First Product Launch
       </h4>
       <p class="mt-2 text-[#EDF2F7]/80">
        Revolutionized industry standards in 2018
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!-- Team Section -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
   <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
    <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
     <div class="w-full h-full flex items-center justify-center text-6xl">
      ??
     </div>
    </div>
    <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
     Sarah Chen
    </h3>
    <p class="text-[#EDF2F7]/80">
     CTO
    </p>
   </div>
   <div class="group relative bg-[#2D3748] p-6 rounded-xl hover:shadow-lg transition-all duration-300">
    <div class="aspect-square rounded-xl overflow-hidden bg-[#6B7280]">
     <div class="w-full h-full flex items-center justify-center text-6xl">
      ??
     </div>
    </div>
    <h3 class="mt-4 text-xl font-semibold text-[#F7FAFC]">
     Michael Johnson
    </h3>
    <p class="text-[#EDF2F7]/80">
     CEO
    </p>
   </div>
  </div>
  <!-- CTA Section -->
  <div class="flex flex-col md:flex-row items-center justify-center gap-6">
   <button class="px-8 py-3 bg-[#3182CE] hover:bg-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
    Join Our Team
   </button>
   <button class="px-8 py-3 border-2 border-[#6B7280] hover:border-[#10B981] rounded-lg text-[#F7FAFC] transition-all duration-300">
    View Careers
   </button>
  </div>
 </section>
</div>

</div>
    )
}
export default MyAboutUsComponent;

Recommended Related Components

More+

About Our Vision

It is used to present the company's mission, core values, and achievements in a visually appealing and engaging manner.

39
0

About Our Vision

It is used to present the company's mission and core values in a visually engaging manner.

38
0

Vision and Values

It is used to present the company's mission, principles, and achievements to potential employees, customers, and stakeholders, fostering trust and engagement.

27
0

About Our Company

The component is used to present company information on a website, highlighting key aspects such as innovation, collaboration, and growth.

19
0