@@ -70,255 +70,6 @@ Just instant, comprehensive context that LLMs actually understand.
7070
7171---
7272
73- ## 💬 What Developers Are Saying
74-
75- <div id =" testimonials-container " >
76- <div class =" testimonial-bubble " data-delay =" 0 " >
77- <div class="testimonial-content">
78- <div class="testimonial-quote">"⭐⭐⭐⭐⭐ Saves me 30 minutes every day. This tool is incredible for working with AI assistants!"</div>
79- <div class="testimonial-author">- @alexdev</div>
80- </div>
81- </div >
82-
83- <div class =" testimonial-bubble " data-delay =" 200 " >
84- <div class="testimonial-content">
85- <div class="testimonial-quote">"Game changer! Fixed a complex bug in 60 seconds by feeding the bundle to ChatGPT."</div>
86- <div class="testimonial-author">- @sarahcodes</div>
87- </div>
88- </div >
89-
90- <div class =" testimonial-bubble " data-delay =" 400 " >
91- <div class="testimonial-content">
92- <div class="testimonial-quote">"Our team onboarding went from hours to minutes. ContextCraft + AI = magic."</div>
93- <div class="testimonial-author">- @miketheteam</div>
94- </div>
95- </div >
96-
97- <div class =" testimonial-bubble " data-delay =" 600 " >
98- <div class="testimonial-content">
99- <div class="testimonial-quote">"No more 'it doesn't work' issues without context. Our OSS project loves this!"</div>
100- <div class="testimonial-author">- @opensource_emma</div>
101- </div>
102- </div >
103-
104- <div class =" testimonial-bubble " data-delay =" 800 " >
105- <div class="testimonial-content">
106- <div class="testimonial-quote">"The clipboard integration is genius. Copy → paste → profit!"</div>
107- <div class="testimonial-author">- @devtools_lover</div>
108- </div>
109- </div >
110-
111- <div class =" testimonial-bubble " data-delay =" 1000 " >
112- <div class="testimonial-content">
113- <div class="testimonial-quote">"Finally, a tool that speaks LLM. My AI pair programming just got 10x better."</div>
114- <div class="testimonial-author">- @aidev2024</div>
115- </div>
116- </div >
117-
118- <div class =" testimonial-bubble " data-delay =" 1200 " >
119- <div class="testimonial-content">
120- <div class="testimonial-quote">"Bundle command is pure gold. One command, complete context, happy AI."</div>
121- <div class="testimonial-author">- @productivityhacker</div>
122- </div>
123- </div >
124-
125- <div class =" testimonial-bubble " data-delay =" 1400 " >
126- <div class="testimonial-content">
127- <div class="testimonial-quote">"Elegant, simple, effective. This is how developer tools should be built."</div>
128- <div class="testimonial-author">- @cleancode_advocate</div>
129- </div>
130- </div >
131- </div >
132-
133- <style >
134- #testimonials-container {
135- display : flex ;
136- flex-wrap : wrap ;
137- gap : 1rem ;
138- justify-content : center ;
139- align-items : flex-start ;
140- margin : 2rem 0 ;
141- padding : 2rem ;
142- background : linear-gradient (135deg , #f8fafc 0% , #e2e8f0 100% );
143- border-radius : 20px ;
144- position : relative ;
145- overflow : hidden ;
146- }
147-
148- .testimonial-bubble {
149- background : white ;
150- border-radius : 15px ;
151- padding : 1.5rem ;
152- margin : 0.5rem ;
153- box-shadow : 0 4px 6px rgba (0 , 0 , 0 , 0.1 );
154- transition : all 0.3s cubic-bezier (0.25 , 0.46 , 0.45 , 0.94 );
155- max-width : 320px ;
156- min-width : 250px ;
157- position : relative ;
158- cursor : pointer ;
159- opacity : 0 ;
160- transform : translateY (20px ) scale (0.95 );
161- animation : bubbleFloat 0.6s ease-out forwards ;
162- border : 2px solid transparent ;
163- }
164-
165- .testimonial-bubble :hover {
166- transform : translateY (-8px ) scale (1.02 );
167- box-shadow : 0 12px 24px rgba (0 , 0 , 0 , 0.15 );
168- z-index : 10 ;
169- border-color : #3b82f6 ;
170- }
171-
172- .testimonial-bubble ::before {
173- content : ' ' ;
174- position : absolute ;
175- top : -1px ;
176- left : -1px ;
177- right : -1px ;
178- bottom : -1px ;
179- background : linear-gradient (45deg , #3b82f6 , #06b6d4 , #10b981 , #f59e0b );
180- border-radius : 16px ;
181- opacity : 0 ;
182- transition : opacity 0.3s ease ;
183- z-index : -1 ;
184- }
185-
186- .testimonial-bubble :hover ::before {
187- opacity : 0.3 ;
188- }
189-
190- .testimonial-content {
191- position : relative ;
192- z-index : 2 ;
193- }
194-
195- .testimonial-quote {
196- font-size : 0.95rem ;
197- line-height : 1.6 ;
198- color : #374151 ;
199- margin-bottom : 1rem ;
200- font-style : italic ;
201- position : relative ;
202- }
203-
204- .testimonial-quote ::before {
205- content : ' "' ;
206- font-size : 2rem ;
207- color : #3b82f6 ;
208- position : absolute ;
209- top : -0.5rem ;
210- left : -0.5rem ;
211- font-family : Georgia , serif ;
212- }
213-
214- .testimonial-author {
215- font-weight : 600 ;
216- color : #1f2937 ;
217- font-size : 0.9rem ;
218- text-align : right ;
219- }
220-
221- @keyframes bubbleFloat {
222- 0% {
223- opacity : 0 ;
224- transform : translateY (30px ) scale (0.9 );
225- }
226- 50% {
227- opacity : 0.8 ;
228- transform : translateY (-5px ) scale (0.98 );
229- }
230- 100% {
231- opacity : 1 ;
232- transform : translateY (0 ) scale (1 );
233- }
234- }
235-
236- @keyframes gentleFloat {
237- 0% , 100% {
238- transform : translateY (0px );
239- }
240- 50% {
241- transform : translateY (-3px );
242- }
243- }
244-
245- .testimonial-bubble :nth-child (odd ) {
246- animation-delay : 0.1s ;
247- }
248-
249- .testimonial-bubble :nth-child (even ) {
250- animation-delay : 0.3s ;
251- }
252-
253- .testimonial-bubble :nth-child (3n ) {
254- animation-delay : 0.5s ;
255- }
256-
257- .testimonial-bubble :hover {
258- animation : gentleFloat 2s ease-in-out infinite ;
259- }
260-
261- @media (max-width : 768px ) {
262- #testimonials-container {
263- padding : 1rem ;
264- }
265-
266- .testimonial-bubble {
267- min-width : 100% ;
268- max-width : 100% ;
269- margin : 0.5rem 0 ;
270- }
271- }
272-
273- @media (prefers-reduced-motion: reduce) {
274- .testimonial-bubble {
275- animation : none ;
276- opacity : 1 ;
277- transform : none ;
278- }
279-
280- .testimonial-bubble :hover {
281- animation : none ;
282- transform : translateY (-4px ) scale (1.01 );
283- }
284- }
285- </style >
286-
287- <script >
288- document .addEventListener (' DOMContentLoaded' , function () {
289- const bubbles = document .querySelectorAll (' .testimonial-bubble' );
290-
291- // Stagger the animation of bubbles
292- bubbles .forEach ((bubble , index ) => {
293- const delay = parseInt (bubble .dataset .delay ) || index * 200 ;
294- setTimeout (() => {
295- bubble .style .animationDelay = ' 0s' ;
296- bubble .classList .add (' animate' );
297- }, delay);
298- });
299-
300- // Add subtle random movement
301- bubbles .forEach (bubble => {
302- const randomDelay = Math .random () * 2000 ;
303- setTimeout (() => {
304- bubble .style .animationDelay = ` ${ Math .random () * 2 } s` ;
305- }, randomDelay);
306- });
307-
308- // Add click effect
309- bubbles .forEach (bubble => {
310- bubble .addEventListener (' click' , function () {
311- this .style .transform = ' scale(0.98)' ;
312- setTimeout (() => {
313- this .style .transform = ' ' ;
314- }, 150 );
315- });
316- });
317- });
318- </script >
319-
320- ---
321-
32273## 🚀 Quick Start
32374
32475### Installation
0 commit comments