Projet.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <div id="contact">
  3. <LayoutContainer>
  4. <v-row>
  5. <div class="project-container" />
  6. <v-col cols="4">
  7. <div class="contact-container">
  8. <div class="d-flex justify-center align-center">
  9. <v-icon
  10. size="10"
  11. class="fa-solid fa-circle icon-title"
  12. />
  13. <h5 class="contact">
  14. Contactez-nous
  15. </h5>
  16. </div>
  17. <v-img
  18. src="/images/logiciels/school/femme-casque.jpg"
  19. class="femme-casque"
  20. />
  21. </div>
  22. </v-col>
  23. <v-col cols="6">
  24. <div class="project-container">
  25. <h5 class="title">
  26. Vous avez un projet ?
  27. </h5>
  28. <h6 class="subtitle">
  29. N'attendez plus, appelez-nous
  30. </h6>
  31. <p class="contact-details">
  32. Vous avez une identité, des besoins, des projets... On est là pour
  33. vous écouter et vous offrir une offre personnalisée ! Que vous
  34. soyez une petite ou une structure plus conséquente, notre offre
  35. s'adapte à toutes les tailles : le prix de l’abonnement au
  36. logiciel varie en fonction du nombre d'élèves, tout en conservant
  37. l'intégralité des fonctionnalités.
  38. </p>
  39. <v-btn class="btn-contact">
  40. Nous contacter
  41. </v-btn>
  42. </div>
  43. </v-col>
  44. </v-row>
  45. <v-row class="border-row">
  46. <v-col cols="2">
  47. <v-img
  48. class="logo-cmf"
  49. src="/images/logiciels/school/cmf_logo_orange.png"
  50. />
  51. </v-col>
  52. <v-col cols="10">
  53. <div class="cmf-container">
  54. <h5>Adhérents CMF : bénéficiez de conditions privilégiées</h5>
  55. <p>
  56. Si votre établissement d’enseignement artistique est adhérent à la
  57. Confédération Musicale de France (CMF), vous bénéficiez
  58. gratuitement, dans le cadre de votre adhésion, de la version
  59. Opentalent Artist standard et de conditions priviliégiés pour la
  60. version Opentalent School. Contactez nous direcetement ou
  61. contactez votre fédération pour obtenir vos codes d’accès.
  62. </p>
  63. </div>
  64. </v-col>
  65. </v-row>
  66. <v-row>
  67. <v-col
  68. cols="4"
  69. class="border-col"
  70. >
  71. <div class="d-flex justify-center align-center">
  72. <v-icon
  73. size="35"
  74. class="fa-brands fa-react icon"
  75. />
  76. </div>
  77. <p class="d-flex justify-center align-center details">
  78. Paiement Sécurisé
  79. </p>
  80. </v-col>
  81. <v-col
  82. cols="4"
  83. class="border-col"
  84. >
  85. <div class="d-flex justify-center align-center">
  86. <v-icon
  87. size="35"
  88. class="fa-brands fa-react icon"
  89. />
  90. </div>
  91. <p class="d-flex justify-center align-center details">
  92. Service clef en main
  93. </p>
  94. </v-col>
  95. <v-col
  96. cols="4"
  97. class="border-col"
  98. >
  99. <div class="d-flex justify-center align-center">
  100. <v-icon
  101. size="35"
  102. class="fa-brands fa-react icon"
  103. />
  104. </div>
  105. <p class="d-flex justify-center align-center details">
  106. Soutien pour votre activité
  107. </p>
  108. </v-col>
  109. </v-row>
  110. </LayoutContainer>
  111. </div>
  112. </template>
  113. <script setup></script>
  114. <style scoped>
  115. .details {
  116. color: var(--vert-100, #091d20);
  117. margin-right: auto;
  118. margin-left: auto;
  119. width: 8rem;
  120. text-align: center;
  121. margin-top: 0.7rem;
  122. font-size: 1rem;
  123. font-family: "Barlow";
  124. font-weight: 300;
  125. line-height: 14px;
  126. }
  127. .border-col {
  128. border-top: 1px solid #e5e5e5;
  129. border-right: 1px solid #e5e5e5;
  130. height: 8rem;
  131. }
  132. .border-row {
  133. border: 1px solid #e5e5e5;
  134. margin-left: 10rem;
  135. margin-right: 28rem;
  136. margin-bottom: 3rem;
  137. }
  138. .cmf-container {
  139. margin-left: 3rem;
  140. margin-top: 4rem;
  141. margin-bottom: 4rem;
  142. width: 30rem;
  143. }
  144. .logo-cmf {
  145. width: 10rem;
  146. height: 10rem;
  147. margin-top: 3rem;
  148. margin-bottom: 4rem;
  149. margin-left: 3rem;
  150. }
  151. .project-container {
  152. margin-top: 4rem;
  153. margin-bottom: 4rem;
  154. }
  155. .btn-contact {
  156. background: #f4aa2a;
  157. border-radius: 6px;
  158. color: #fff;
  159. font-weight: 600;
  160. font-size: 12px;
  161. line-height: 16px;
  162. letter-spacing: 0.18em;
  163. text-transform: uppercase;
  164. margin-top: 2rem;
  165. margin-bottom: 3rem;
  166. font-family: "Barlow";
  167. font-style: normal;
  168. }
  169. .contact-details {
  170. font-weight: 300;
  171. font-size: 16px;
  172. line-height: 20px;
  173. color: #091d20;
  174. width: 20rem;
  175. font-family: "Barlow";
  176. font-style: normal;
  177. }
  178. .contact {
  179. margin-bottom: 0.5rem;
  180. margin-right: 10rem;
  181. }
  182. .icon-title {
  183. margin-bottom: 0.5rem;
  184. margin-right: 1rem;
  185. color: rgba(32, 147, 190, 0.6);
  186. }
  187. .title {
  188. margin-top: 2rem;
  189. margin-bottom: 1rem;
  190. font-weight: 600;
  191. font-size: 42px;
  192. line-height: 42px;
  193. color: #071b1f;
  194. font-family: "Barlow";
  195. font-style: normal;
  196. }
  197. .subtitle {
  198. font-weight: 400;
  199. font-size: 34px;
  200. line-height: 38px;
  201. color: #071b1f;
  202. margin-bottom: 2rem;
  203. font-family: "Barlow";
  204. font-style: normal;
  205. }
  206. .contact-container {
  207. margin-left: 5rem;
  208. font-weight: 600;
  209. font-size: 12px;
  210. line-height: 16px;
  211. letter-spacing: 0.18em;
  212. text-transform: uppercase;
  213. margin-top: 4rem;
  214. margin-bottom: 2rem;
  215. }
  216. .icon {
  217. margin-top: 1rem;
  218. color: #0e2d32;
  219. }
  220. .femme-casque {
  221. width: 18rem;
  222. }
  223. </style>