Presentation.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <AnchoredSection id="about">
  3. <LayoutContainer>
  4. <v-row class="mt-12 center-90">
  5. <v-col md="4">
  6. <LayoutUISubTitle>
  7. Qui sommes-nous ?
  8. </LayoutUISubTitle>
  9. </v-col>
  10. <v-col md="8">
  11. <div class="italic-title mr-8">
  12. “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
  13. la référence pour la gestion et la promotion du spectacle vivant sur
  14. les territoires.”
  15. </div>
  16. </v-col>
  17. </v-row>
  18. <v-row class="history mb-12">
  19. <v-col md="6">
  20. <v-img src="/images/about/passion.jpg" cover />
  21. </v-col>
  22. <v-col md="6">
  23. <h3>
  24. Une histoire de passionnés
  25. </h3>
  26. <p class="mb-8">
  27. En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment là
  28. président d'un orchestre d'harmonie, mais également membre du conseil
  29. d'administration de sa fédération, réfléchit à un outil pour
  30. centraliser les informations de sa structure, mais également au niveau
  31. fédéral. Il souhaite simplifier la gestion des structures culturelles
  32. et en faire la promotion, car pour lui, le milieu culturel est
  33. indispensable. Il est rapidement rejoint par Michel PERNET-SOLLIET,
  34. lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
  35. quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
  36. 3 logiciels spécialement dédiés à la culture et un agenda culturel
  37. pour en faire la promotion.
  38. </p>
  39. <h3>
  40. La Culture au service du développement territorial
  41. </h3>
  42. <p>
  43. Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
  44. , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
  45. tout un facteur de lien social incroyable. On se retrouve, on échange,
  46. on partage... on vit ensemble. On crée des vrais moments et on
  47. développe des groupes de passionnés. On participe à rendre nos
  48. collectivités attractives et surtout on les fait vivre, toute l'année,
  49. à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
  50. territoires s'appuie sur le développement de la culture comme un outil
  51. de développement territorial pour faire face à la
  52. désindustrialisation, à une croissance démographique ralentie ou
  53. encore une image défavorable. Ce modèle de développement par la
  54. culture pour pallier un déficit d’attractivité touristique inspire de
  55. plus en plus de politiques de développement territorial.
  56. </p>
  57. </v-col>
  58. </v-row>
  59. </LayoutContainer>
  60. </AnchoredSection>
  61. </template>
  62. <script setup lang="ts">
  63. import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
  64. </script>
  65. <style scoped lang="scss">
  66. .italic-title {
  67. text-align: justify;
  68. font-style: italic;
  69. font-weight: 300;
  70. font-size: 34px;
  71. line-height: 40px;
  72. color: var(--primary-color);
  73. width: 80%;
  74. margin-left: auto;
  75. margin-bottom: auto;
  76. }
  77. .v-row.history {
  78. width: 80%;
  79. margin-left: auto;
  80. margin-right: auto;
  81. .v-img {
  82. background-repeat: no-repeat;
  83. background-position: center;
  84. width: 400px;
  85. height: 100%;
  86. border-radius: 20px;
  87. @media (max-width: 600px) {
  88. width: 90%;
  89. }
  90. }
  91. h3 {
  92. font-weight: 600;
  93. font-size: 42px;
  94. line-height: 42px;
  95. flex: none;
  96. margin-bottom: 3rem;
  97. }
  98. h4 {
  99. font-weight: 400;
  100. font-size: 34px;
  101. line-height: 38px;
  102. color: var(--primary-color);
  103. margin-bottom: 3rem;
  104. width: 25rem;
  105. text-align: justify;
  106. @media (max-width: 600px) {
  107. width: 100%;
  108. }
  109. }
  110. p {
  111. text-align: justify;
  112. font-weight: 300;
  113. font-size: 16px;
  114. line-height: 20px;
  115. width: 30rem;
  116. margin-bottom: 2rem;
  117. @media (max-width: 600px) {
  118. width: 100%;
  119. }
  120. }
  121. }
  122. </style>