Skip to content

Commit

Permalink
Merge pull request #2 from IciaCarroBarallobre/feature/logo-animation
Browse files Browse the repository at this point in the history 
Feature/logo animation
  • Loading branch information
@IciaCarroBarallobre
IciaCarroBarallobre authored Aug 22, 2024
2 parents 00d82d5 + 1c90271 commit cbe6e74
Show file tree
Hide file tree
Showing 6 changed files with 371 additions and 53 deletions.
27 changes: 26 additions & 1 deletion assets/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,34 @@ module.exports = {
700: '#3C435F',
800: '#2A2F43',
900: '#292f42', // Dark shade
},
}
}
},
keyframes: {
'message-move-1': {
'0%': { transform: 'translateX(-2%) translateY(0%)'},
'50%': { transform: 'translateX(1%) translateY(0%)' },
'100%': { transform: 'translateX(-2%) translateY(0%)' },

},
'message-move-2': {
'0%': { transform: 'translateX(1%) translateY(0%)' },
'50%': { transform: 'translateX(-2%) translateY(1%)' },
'100%': { transform: 'translateX(1%) translateY(0%)' },
},
'message-move-3': {
'0%': { transform: 'translateX(0%) translateY(2%)' },
'50%': { transform: 'translateX(0%) translateY(-1%)' },
'100%': { transform: 'translateX(0%) translateY(2%)' },
},
},

animation: {
'message-move-1': 'message-move-1 3s ease-in-out 1 forwards',
'message-move-2': 'message-move-2 3s ease-in-out 1 forwards',
'message-move-3': 'message-move-3 3s ease-in-out 1 forwards',

},
},
plugins: [
require("@tailwindcss/forms"),
Expand Down
119 changes: 119 additions & 0 deletions lib/exploring_beam_community_web/components/complex_logo.ex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
defmodule ExploringBeamCommunityWeb.ComplexLogo do
use Phoenix.Component
attr(:width, :integer, default: 250)
attr(:height, :integer, default: 250)

def complex_logo(assigns) do
~H"""
<svg width={@width} height={@height} version="1.1" viewBox="0 0 409.81 410.9">
<g transform="translate(342.2 585.46)">
<path d="m-11.528-434.19-6.2811-12.562s-5.6813 3.1483-6.1863 5.2285c-0.54262 2.235 1.8128 7.0862 4.0071 8.7425 2.1942 1.6563 8.4603-1.4086 8.4603-1.4086z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-68.212-405.48-6.2528-12.577s5.9335-2.6426 7.8987-1.794c2.1114 0.91171 4.5684 5.7123 4.5706 8.4615 2e-3 2.7492-6.2165 5.909-6.2165 5.909z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-22.633-437.06-41.658 21.587" class="stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-14.133-324.06 3.6355-13.566s-6.3396-1.4139-8.0976-0.19265c-1.8888 1.3122-3.3453 6.5046-2.8025 9.1997 0.54277 2.6951 7.2645 4.5594 7.2645 4.5594z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-75.593-340.18 3.6661-13.558s6.1927 1.9596 7.1 3.8984c0.97485 2.083-0.37199 7.3049-2.1945 9.3633-1.8226 2.0582-8.5717 0.29652-8.5717 0.29652z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4" />
<path d="m-20.54-333.57-45.491-11.488" class="stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-130.52-305.3-14.042-0.30088s0.13613 6.4939 1.7409 7.9106c1.7242 1.5221 7.114 1.7004 9.6024 0.53148 2.4884-1.1688 2.6986-8.1412 2.6986-8.1412z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-131.55-241.76-14.041-0.33252s0.42876-6.4812 2.0958-7.824c1.791-1.4428 7.1834-1.3779 9.6166-0.098 2.4331 1.2799 2.3289 8.2546 2.3289 8.2546z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-105.91-217.42-5.9226-12.735s6.0004-2.487 7.9428-1.5874c2.0869 0.96648 4.4178 5.8295 4.3483 8.5779-0.0695 2.7483-6.3685 5.7449-6.3685 5.7449z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-173.65-215.86 5.9226-12.735s-6.0004-2.487-7.9428-1.5874c-2.0869 0.96648-4.4178 5.8295-4.3483 8.5779 0.0695 2.7483 6.3685 5.7449 6.3685 5.7449z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-138.24-296.81-0.32647 46.918" class="stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m25.4-352.81-14.043 0.25143s0.15897-6.4934 1.7687-7.9044c1.7295-1.516 7.1199-1.6753 9.6042-0.49766 2.4842 1.1776 2.67 8.1506 2.67 8.1506z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-0.63686-290.25-9.2411-10.577s-4.7059 4.477-4.671 6.6174c0.0375 2.2996 3.5382 6.4017 6.0787 7.4523 2.5405 1.0506 7.8333-3.4929 7.8333-3.4929z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-1.2701-485.01-10.222 9.6322s-4.2502-4.9117-4.0082-7.0386c0.26001-2.2851 4.1415-6.029 6.7719-6.8286 2.6303-0.79961 7.4583 4.2351 7.4583 4.2351z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m21.546-421.2-13.953-1.6102s-0.47061 6.4783 0.99494 8.0385c1.5746 1.6763 6.9242 2.357 9.5108 1.4254 2.5866-0.93154 3.4467-7.8538 3.4467-7.8538z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-266.37-322.59 6.5383 12.43s5.6153-3.2646 6.0774-5.3547c0.49651-2.2456-1.9582-7.0474-4.1862-8.6582-2.2279-1.6108-8.4295 1.5824-8.4295 1.5824z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-210.29-351.6 6.5103 12.445s-5.8778 2.7642-7.8601 1.9562c-2.1298-0.86806-4.6849-5.6171-4.7437-8.3657-0.0586-2.7486 6.0936-6.0357 6.0936-6.0357z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-255.21-319.95 41.205-22.44" class="stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-266.03-432.75-3.3556 13.638s6.3673 1.2832 8.0998 0.026c1.8614-1.3507 3.2107-6.572 2.6125-9.2554-0.59812-2.6834-7.3568-4.4089-7.3568-4.4089z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-207.3-416.56-4.5276 13.295s-6.0544-2.3525-6.8356-4.3455c-0.83933-2.1412 0.83945-7.266 2.7901-9.2034 1.9507-1.9372 8.573 0.25352 8.573 0.25352z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-259.46-423.51 41.454 9.9441" class="stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-150.05-453.9 14.045 0.0118s-0.26974-6.4897-1.9033-7.8731c-1.7551-1.4863-7.1475-1.5536-9.6113-0.33375-2.4638 1.2198-2.5306 8.195-2.5306 8.195z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-150.33-517.45 14.045 0.0435s-0.29529 6.4886-1.9343 7.8655c-1.761 1.4793-7.1535 1.5255-9.6125 0.29589-2.4589-1.2295-2.4982-8.2049-2.4982-8.2049z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-176.47-541.26 6.1834 12.611s-5.9479 2.6099-7.9084 1.7505c-2.1064-0.92333-4.5368-5.7374-4.5239-8.4866 0.0129-2.7492 6.249-5.8747 6.249-5.8747z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-108.77-544.21-5.6592 12.855s6.0503 2.363 7.9738 1.4236c2.0666-1.0092 4.2969-5.9192 4.1708-8.6656-0.12604-2.7463-6.4854-5.6126-6.4854-5.6126z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-142.52-462.55-0.63914-46.915" class=" stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-304.96-403.19 14.035-0.54038s-0.0253 6.4953-1.6057 7.9391c-1.6979 1.5512-7.084 1.8215-9.5919 0.6952-2.5079-1.1263-2.8372-8.094-2.8372-8.094z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-280.22-466.28 9.4568 10.384s4.6128-4.573 4.5338-6.7121c-0.0848-2.2983-3.6692-6.3275-6.2308-7.3256-2.5616-0.99808-7.7598 3.6534-7.7598 3.6534z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-275.58-271.57 10.022-9.8405s4.3504 4.8232 4.1522 6.9546c-0.21294 2.29-4.0165 6.1129-6.6299 6.9665-2.6133 0.85357-7.5438-4.0807-7.5438-4.0807z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-299.7-334.89 13.983 1.3227s0.3372-6.4866-1.1602-8.0163c-1.6087-1.6436-6.9713-2.214-9.5382-1.2294-2.5668 0.98457-3.2844 7.923-3.2844 7.923z" class="fill-zinc-200 stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-298.27-393.85 6.2153 50.05" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-269.49-467.78 87.833-62.481" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-104.45-534.35 90.613 47.269" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m12.821-412.33 5.3976 50.541" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-101.16-229.25 89.71-60.686" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-179.98-228.26c-1.3192-1.3193-84.762-42.546-84.762-42.546" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<circle transform="rotate(-66.085)" cx="299.16" cy="-111.82" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<circle transform="rotate(178.82)" cx="131.64" cy="552.75" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<circle transform="rotate(70.463)" cx="-381.75" cy="176.88" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<ellipse cx="-294.91" cy="-300.68" rx="23.816" ry="23.484" class="fill-main-900 dark:fill-white"/>
<ellipse cx="19.145" cy="-318.78" rx="23.816" ry="23.484" class="fill-main-900 dark:fill-white"/>
<ellipse cx="-142.75" cy="-550.1" rx="23.816" ry="23.484" class="fill-main-900 dark:fill-white"/>
<g id = "people_circle">
<circle cx="-140.1" cy="-379.54" r="74.311" class="stroke-main-900 dark:stroke-white fill-transparent" stroke-width="4"/>
<ellipse cx="-97.011" cy="-390.51" rx="15.618" ry="15.288" class="fill-main-900 dark:fill-white"/>
<ellipse cx="-137.65" cy="-403.8" rx="18.915" ry="18.515" class="fill-main-900 dark:fill-white"/>
<ellipse cx="-184.83" cy="-390.99" rx="15.618" ry="15.288" class="fill-main-900 dark:fill-white"/>
<path d="m-208.6-353.39c0.70034-9.9763 1.4137-25.364 13.419-27.937 7.2592-1.3199 11.659-0.87991 15.838 0 13.167 2.4315 12.489 9.2836 17.615 20.28 2.5634 5.4994 4.3739 23.368 4.3739 23.368-24.875-2.9219-34.876 0.33133-51.246-15.711z" class="fill-main-900 dark:fill-white"/>
<path d="m-169.31-346.72c0.84816-12.082 6.5074-37.91 21.046-41.027 8.7914-1.5984 14.12-1.0656 19.181 0 15.946 2.9447 16.603 10.349 16.517 25.042-0.26641 6.6602 0 26.374 0 26.374-30.125-3.5386-36.919 9.0389-56.744-10.39z" class="fill-main-900 dark:fill-white"/>
<path d="m-209.92-352.73s8.3591 18.698 10.339 20.018 9.679 9.239 10.779 9.899c1.0999 0.65993 25.737 12.979 25.737 12.979l26.177 4.1796 25.957-5.0595 23.977-17.158 17.236-26.545s-2.8389-16.487-11.435-20.413c-4.4294-2.0228-18.341-6.1907-19.881-5.9707-1.5398 0.21997-81.83 18.832-81.83 18.832l-16.058-16.278s-12.539 7.2592-10.999 25.517z" class="fill-main-900 dark:fill-white"/>
</g>
<g id="gleam">
<a
href="https://gleam.run"
target="_blank"
>
<circle cx="-139.56" cy="-209.44" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-151.8-219.56c0.42391-0.63665 4.1237-12.948 4.1237-12.948 1.8866-4.1157 4.1171-2.6814 5.2143-1.723 3.5603 2.6374 5.5212 7.9113 9.4473 9.989 0.7808 0.26252 13.992-0.0204 13.992-0.0204s1.3586 0.26886 2.2405 0.79327c2.1477 1.277-6.7227 14.105-6.4573 16.858 0.12257 1.2698 4.2131 11.356 4.2131 11.356 0.73026 2.6712-0.63592 4.7579-3.8072 4.0441 0 0-10.588-3.0307-12.845-2.291-2.2565 0.73965-9.2495 6.6852-9.7163 7.0318-3.0033 2.2298-5.3422 0.8868-6.2291-1.7947-0.043-0.7636 0.47676-10.598-1.114-12.551-2.0857-2.5611-12.625-7.9238-12.612-9.9644 0.0358-5.5892 8.773-4.5179 13.55-8.7794z" class="fill-main-900 dark:fill-white hover:fill-pink-300 focus:fill-pink-300"/>
<ellipse transform="rotate(-3.2172)" cx="-135.94" cy="-216.54" rx="2.0307" ry="2.0518" class="fill-white dark:fill-main-900"/>
<ellipse transform="rotate(-3.2172)" cx="-119.56" cy="-219.46" rx="2.0307" ry="2.0518" class="fill-white dark:fill-main-900"/>
<path d="m-141.5-205.86c1.7989 2.91 5.168 1.0408 5.2068-0.84352 0.12562-1.2412-0.67986-2.0829-1.2022-0.95614-0.31199 0.67301-0.67454 1.632-1.1842 1.7031-1.8693 0.26072-3.0739-1.3916-2.8204 0.0966z" class="fill-white dark:fill-main-900"/>
</a>
</g>
<g id="erl" class="group">
<a
href="https://www.erlang.org"
target="_blank"
class="group-hover:fill-red-600 group-focus:fill-red-600"
>
<circle transform="rotate(251.64)" cx="427.07" cy="159.53" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white" stroke-width="4"/>
<path d="m-10.776-469.42 5.2448 36.478 15.926-4.0458c-13.768-12.915-5.3768-33.995-5.1101-34.39z" class="fill-main-900 dark:fill-white group-hover:fill-red-600 group-focus:fill-red-600 group-focus:fill-red-600"/>
<path d="m13.328-459.25 14.301-1.394c0.7357-6.16-4.503-7.5927-5.2776-7.7701-1.7025-0.38997-3.9157-0.29247-4.6818 0-4.988 1.5305-4.7891 6.6059-4.3413 9.1642z" class="fill-main-900 dark:fill-white group-hover:fill-red-600 group-focus:fill-red-600"/>
<path d="m14.001-453.42 20.877-2.1281c0.2138-1.8844 0.92858-11.459-5.5131-18.642l10.665-1.4471 7.1515 32.446-8.5631 1.8129-4.0111-5.6572c-8.1608 5.6577-22.817 2.637-20.606-6.3842z" class="fill-main-900 dark:fill-white group-hover:fill-red-600 group-focus:fill-red-600"/>
<path d="m-10.633-469.53-5.3565 9.7893 1.57 12.19 3.9711 9.7893 5.0794 6.0952 1.7547-7.7576-3.417-24.381z" class="fill-main-900 dark:fill-white group-hover:fill-red-600"/>
<path d="m40.115-475.55 6.5564 5.3403 2.2208 8.6186 0.31722 8.4071-1.4804 6.7151-0.35587 2.4235-4.5404 1.7578-3.8809-31.465z" class="fill-main-900 dark:fill-white group-hover:fill-red-600 group-focus:fill-red-600"/>
</a>
</g>
<g id="elixir" class="group">
<a href="https://elixir-lang.org" target="_blank" class="underline">
<path d="m-314.37-436.11c-1.0568 7.9256-0.41111 20.747 14.225 22.625 14.507 0.90669 15.706-9.3574 15.793-11.649 0.633-6.5787-3.8905-9.5966-8.6245-13.105-5.9182-4.4386-8.6422-14.468-5.4883-22.737-9.1199 7.0472-14.394 13.537-15.905 24.865z" class="fill-main-900 dark:fill-white group-hover:fill-purple-500 group-focus:fill-purple-500"/>
<circle transform="rotate(112.74)" cx="-287.66" cy="445.07" r="32.663" class="fill-transparent stroke-main-900 dark:stroke-white " stroke-width="4"/>
</a>
</g>
<g id="msg1" class="animate-message-move-1">
<rect transform="rotate(10.376)" x="-321.15" y="-400.35" width="32.449" height="21.033" ry="6.0017" class="dark:fill-white fill-main-900 fill-main-900"/>
<path d="m-240.21-451.87 12.801 11.84 15.065-7.7266" class="fill-zinc-200 stroke-white dark:stroke-main-900" stroke-width="4"/>
</g>
<g id="msg2" class="animate-message-move-2">
<rect transform="rotate(-28.382)" x="149.33" y="-387.98" width="32.449" height="21.033" ry="6.0017" class="dark:fill-white fill-main-900 fill-main-900" />
<path d="m-53.079-413.15 20.394 1.2188 6.9107-15.456" class="fill-zinc-200 stroke-white dark:stroke-main-900" stroke-width="4"/>
</g>
<g id="msg3" class="animate-message-move-3">
<rect transform="rotate(-89.136)" x="256.39" y="-171.88" width="32.449" height="21.033" ry="6.0017" class="dark:fill-white fill-main-900 fill-main-900"/>
<path d="m-169.52-260.96 8.5615-14.582-9.11-13.581" class="fill-zinc-200 stroke-white dark:stroke-main-900" stroke-width="4"/>
</g>
</g>
</svg>
"""
end
end
2 changes: 1 addition & 1 deletion lib/exploring_beam_community_web/components/footer.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ defmodule ExploringBeamCommunityWeb.Footer do
def footer(assigns) do
~H"""
<footer class={
"text-sm bottom-0 left-0 w-full md:px-10 " <>
"text-xs md:text-sm bottom-0 left-0 w-full md:px-10 " <>
"border-t border-main-900/30 dark:border-white/30 p-2 " <>
"flex justify-between items-center"
}>
Expand Down
17 changes: 5 additions & 12 deletions lib/exploring_beam_community_web/controllers/home_html.ex
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
defmodule ExploringBeamCommunityWeb.HomeHTML do
use ExploringBeamCommunityWeb, :html

import ExploringBeamCommunityWeb.ComplexLogo, only: [complex_logo: 1]

embed_templates("subscription_html/*")

@doc """
Expand All @@ -23,18 +25,9 @@ defmodule ExploringBeamCommunityWeb.HomeHTML do
We invite you to explore and participate in our surveys to help us understand the adoption, diversity, and challenges of BEAM languages across Europe.
</h2>
</div>
<div class="flex-1 flex justify-center ">
<img
src="/images/logo_complex.svg"
class="w-2/3 md:w-4/5 block dark:hidden"
alt="Logo Light Mode"
/>
<img
src="/images/logo_complex_dark.svg"
class="w-2/3 md:w-4/5 hidden dark:block"
alt="Logo Dark Mode"
/>
</div>
<div class="flex-1 flex justify-center w-2/3 md:w-1/3">
<.complex_logo width={260} height={260}/>
</div>
</div>
<div class="flex justify-center pt-8">
<form action={~p"/survey"} method="get">
Expand Down
Loading

0 comments on commit cbe6e74

Please sign in to comment.