|
1 | | -<div |
2 | | - x-data |
3 | | - class="mx-auto w-full max-w-screen-lg px-10 pt-40 lg:px-5" |
4 | | -> |
| 1 | +<section class="mx-auto w-full max-w-screen-lg px-10 pt-20 lg:px-5"> |
5 | 2 | <div |
6 | | - x-data |
7 | 3 | x-init=" |
8 | 4 | () => { |
9 | 5 | if (reducedMotion) return |
10 | | - gsap.timeline({ |
11 | | - delay: 0.2, |
12 | | - scrollTrigger: { |
13 | | - trigger: $refs.header, |
14 | | - start: 'top bottom', |
| 6 | + gsap.fromTo( |
| 7 | + $el, |
| 8 | + { |
| 9 | + autoAlpha: 0, |
| 10 | + y: 10, |
15 | 11 | }, |
16 | | - }) |
17 | | - .fromTo( |
18 | | - $refs.header, |
19 | | - { |
20 | | - autoAlpha: 0, |
21 | | - }, |
22 | | - { |
23 | | - autoAlpha: 1, |
24 | | - duration: 0.7, |
25 | | - ease: 'circ.out', |
26 | | - }, |
27 | | - ) |
28 | | - .fromTo( |
29 | | - $refs.mockup, |
30 | | - { |
31 | | - autoAlpha: 0, |
32 | | - }, |
33 | | - { |
34 | | - autoAlpha: 1, |
35 | | - duration: 0.7, |
36 | | - ease: 'circ.out', |
37 | | - }, |
38 | | - '>-0.5', |
39 | | - ) |
| 12 | + { |
| 13 | + autoAlpha: 1, |
| 14 | + y: 0, |
| 15 | + duration: 0.5, |
| 16 | + ease: 'power1.out', |
| 17 | + }, |
| 18 | + ) |
40 | 19 | } |
41 | 20 | " |
42 | | - class="flex flex-col items-center justify-center gap-20 md:flex-row md:gap-10 lg:justify-between" |
| 21 | + class="relative isolate z-0 grid place-items-center" |
43 | 22 | > |
44 | | - <div x-ref="header"> |
45 | | - {{-- Live Demo --}} |
46 | | - <div class="text-3xl"> |
47 | | - <span>Try our</span> |
48 | | - <span class="font-bold">Live Demo</span> |
49 | | - </div> |
| 23 | + {{-- Fade --}} |
| 24 | + <div |
| 25 | + class="z-10 h-60 w-full self-end justify-self-start bg-gradient-to-t from-cream to-transparent [grid-area:1/-1]" |
| 26 | + ></div> |
| 27 | + |
| 28 | + {{-- Screenshot --}} |
| 29 | + <img |
| 30 | + src="{{ Vite::asset('resources/images/home/filament-demo.webp') }}" |
| 31 | + alt="Filament demo" |
| 32 | + class="relative z-0 w-full rounded-xl [grid-area:1/-1]" |
| 33 | + loading="lazy" |
| 34 | + /> |
50 | 35 |
|
51 | | - {{-- Description --}} |
| 36 | + {{-- Button --}} |
| 37 | + <a |
| 38 | + href="https://demo.filamentphp.com" |
| 39 | + class="group relative z-20 inline-flex items-center gap-3 self-center justify-self-center rounded-3xl bg-[#ffe8ce] py-2 pl-5 pr-2 text-lg font-medium transition duration-300 ease-in-out [grid-area:1/-1]" |
| 40 | + > |
52 | 41 | <div |
53 | | - class="min-w-[18rem] max-w-[22rem] pt-7 font-medium text-dolphin" |
| 42 | + class="transition duration-300 ease-in-out will-change-transform group-hover:-translate-x-px" |
54 | 43 | > |
55 | | - We've put together a feature-rich demo application to showcase |
56 | | - many features. |
57 | | - <br /> |
58 | | - It's completely open-source! |
| 44 | + Visit the demo |
59 | 45 | </div> |
60 | | - |
61 | | - {{-- Links --}} |
62 | | - <div class="flex flex-wrap items-center gap-5 pt-20"> |
63 | | - <a |
64 | | - href="https://demo.filamentphp.com" |
65 | | - class="group/button flex items-center justify-center gap-3 rounded-xl bg-butter px-7 py-3 text-white transition duration-200 motion-reduce:transition-none" |
66 | | - > |
67 | | - <div>Visit the Demo</div> |
68 | | - <div |
69 | | - class="transition duration-300 group-hover/button:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover/button:transform-none" |
70 | | - > |
71 | | - <svg |
72 | | - width="24" |
73 | | - height="25" |
74 | | - fill="none" |
75 | | - xmlns="http://www.w3.org/2000/svg" |
76 | | - > |
77 | | - <path |
78 | | - d="M4 12.992h2.5m13.5 0-6-6m6 6-6 6m6-6H9.5" |
79 | | - stroke="#fff" |
80 | | - stroke-width="1.5" |
81 | | - stroke-linecap="round" |
82 | | - stroke-linejoin="round" |
83 | | - /> |
84 | | - </svg> |
85 | | - </div> |
86 | | - </a> |
87 | | - <a |
88 | | - target="_blank" |
89 | | - href="https://github.com/filamentphp/demo" |
90 | | - class="flex items-center justify-center gap-3 rounded-xl bg-dawn-pink px-7 py-3 text-hurricane transition duration-300 hover:bg-dawn-pink/70 motion-reduce:transition-none" |
91 | | - > |
92 | | - <div>Source Code</div> |
93 | | - </a> |
94 | | - </div> |
95 | | - </div> |
96 | | - |
97 | | - {{-- Demo Mockup --}} |
98 | | - <div |
99 | | - x-ref="mockup" |
100 | | - class="group/mockup relative grid w-full max-w-lg" |
101 | | - > |
102 | | - {{-- Mockup --}} |
103 | 46 | <div |
104 | | - class="w-[95%] self-center justify-self-center overflow-hidden rounded-bl-xl rounded-br-xl rounded-tl-lg rounded-tr-lg shadow-lg shadow-black/5 transition-all duration-1000 [grid-area:1/-1] [transform-style:preserve-3d] group-hover/mockup:[transform:perspective(1500px)_rotateY(0deg)_rotateX(0deg)_translateZ(0)] motion-reduce:transition-none motion-reduce:group-hover/mockup:transform-none md:[transform:perspective(1500px)_rotateY(-10deg)_rotateX(5deg)_translateZ(0)]" |
| 47 | + class="isolate grid size-12 place-items-center rounded-2xl bg-[#ffdeb3] transition duration-300 ease-in-out" |
105 | 48 | > |
106 | | - {{-- Window Header --}} |
107 | | - <div |
108 | | - class="flex h-6 w-full items-center gap-5 bg-[#262B2F]/80 px-3" |
| 49 | + <svg |
| 50 | + xmlns="http://www.w3.org/2000/svg" |
| 51 | + viewBox="0 0 14 12" |
| 52 | + fill="none" |
| 53 | + class="h-3.5 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-px" |
109 | 54 | > |
110 | | - <div class="flex items-center gap-1"> |
111 | | - <div class="h-1.5 w-1.5 rounded-full bg-red-400"></div> |
112 | | - <div |
113 | | - class="h-1.5 w-1.5 rounded-full bg-yellow-400" |
114 | | - ></div> |
115 | | - <div |
116 | | - class="h-1.5 w-1.5 rounded-full bg-emerald-400" |
117 | | - ></div> |
118 | | - </div> |
119 | | - <div |
120 | | - class="flex-1 pr-10 text-center text-[0.6rem] text-white/40" |
121 | | - > |
122 | | - demo.filamentphp.com |
123 | | - </div> |
124 | | - </div> |
125 | | - |
126 | | - {{-- Screenshot --}} |
127 | | - <img |
128 | | - src="{{ Vite::asset('resources/images/home/filament-demo.webp') }}" |
129 | | - alt="Filament demo" |
130 | | - class="w-full" |
131 | | - /> |
| 55 | + <path |
| 56 | + fill-rule="evenodd" |
| 57 | + clip-rule="evenodd" |
| 58 | + d="M13.0381 7.36407C13.6556 6.5515 13.6539 5.42531 13.0335 4.61482C11.6929 2.86344 10.2936 1.27364 8.57415 0.326571C7.87624 -0.0578285 7.14008 0.0681162 6.60975 0.482662C6.09024 0.888756 5.76689 1.56733 5.8111 2.31051C5.83588 2.72711 5.87076 3.14792 5.92567 3.56034C4.72749 3.50805 3.53531 3.54171 2.33 3.66123C1.44553 3.74894 0.621722 4.38869 0.529937 5.36349C0.490021 5.78741 0.490021 6.2214 0.529937 6.64532C0.621722 7.62012 1.44553 8.25987 2.33 8.34757C3.53846 8.46741 4.73372 8.50093 5.93505 8.44806C5.88216 8.86051 5.84903 9.28107 5.82589 9.69736C5.78454 10.4411 6.11081 11.1186 6.6323 11.5224C7.16468 11.9347 7.90168 12.057 8.59792 11.6689C10.3115 10.7136 11.7045 9.11875 13.0381 7.36407Z" |
| 59 | + fill="#D9B88F" |
| 60 | + /> |
| 61 | + </svg> |
132 | 62 | </div> |
133 | | - |
134 | | - {{-- Decoration Background --}} |
135 | | - <div |
136 | | - class="relative -z-10 h-[120%] w-full self-center justify-self-center rounded-[3rem] bg-gradient-to-br from-dawn-pink to-transparent [grid-area:1/-1] md:left-10 md:rotate-2 md:justify-self-start lg:h-[25rem] lg:w-[110%]" |
137 | | - ></div> |
138 | | - </div> |
| 63 | + </a> |
139 | 64 | </div> |
140 | | -</div> |
| 65 | +</section> |
0 commit comments