feat: Integrate AuroraBackground and GlowingEffect components across … by wiatrM · Pull Request #37 · cloudfloo/cloudfloo.io

wiatrM · 2025-07-09T11:46:12Z

…various pages

Added AuroraBackground component to enhance visual aesthetics on multiple service pages.
Implemented GlowingEffect component in contact forms and service sections for improved interactivity.
Updated package dependencies, including framer-motion and added motion package for animations.
Introduced tailwind.config.js for custom styling and animations.
Enhanced overall UI consistency and user experience across the application.

…various pages - Added AuroraBackground component to enhance visual aesthetics on multiple service pages. - Implemented GlowingEffect component in contact forms and service sections for improved interactivity. - Updated package dependencies, including framer-motion and added motion package for animations. - Introduced tailwind.config.js for custom styling and animations. - Enhanced overall UI consistency and user experience across the application.

Copilot

Pull Request Overview

This PR introduces two new UI components—AuroraBackground and GlowingEffect—and integrates them across a range of pages and sections to enhance visual aesthetics and interactivity.

Wrapped key service and content pages with AuroraBackground for animated gradient backdrops.
Applied GlowingEffect overlays on cards, forms, and demos for interactive glow animations.
Updated animation dependencies (framer-motion → v11.18.2, added motion package).

Reviewed Changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.

File	Description
package.json	Bumped `framer-motion` version and added `motion`.
components/ui/glowing-effect.tsx	Added new GlowingEffect component implementation.
components/ui/aurora-background.tsx	Added new AuroraBackground component implementation.

Copilot · 2025-07-09T11:47:18Z

            onClick={handleProjectClick}
          >
+            <GlowingEffect glow={true} disabled={false} borderWidth={1} />
+            <GlowingEffect glow={true} disabled={false} borderWidth={1} />


Duplicate GlowingEffect components detected; one instance should be removed to avoid redundant rendering and performance overhead.

Suggested change

<GlowingEffect glow={true} disabled={false} borderWidth={1} />

Copilot · 2025-07-09T11:47:18Z

+  ...props
+}: AuroraBackgroundProps) => {
+  return (
+    <main>


Using a
element inside AuroraBackground may lead to multiple tags per page, which is semantically incorrect. Consider replacing it with a
or React.Fragment to maintain a single main landmark.

Suggested change

<main>

<div>

Copilot · 2025-07-09T11:47:19Z

+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => handleMove(e);
+
+      window.addEventListener("scroll", handleScroll, { passive: true });


Each GlowingEffect instance adds its own global scroll and pointermove listeners, which can cause performance issues when many instances are rendered. Consider centralizing these listeners or using a shared context/provider.

cursor

Bug: Duplicate Components Cause DOM Overlap

Two identical GlowingEffect components are rendered on the same Card element with identical props (glow={true} disabled={false} borderWidth={1}). This accidental duplication creates redundant DOM elements and may lead to performance issues or visual artifacts.

components/enhanced-projects-heavy.tsx#L164-L166

cloudfloo.io/components/enhanced-projects-heavy.tsx

Lines 164 to 166 in 88a6d4f

    
           > 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} />

Fix in Cursor • Fix in Web

Bug: Framer Motion Version Conflict

Dependency version conflict: package.json lists framer-motion@^11.18.2 and motion@^12.23.0. However, motion@12.23.0 internally depends on framer-motion@^12.23.0, causing two different versions of framer-motion to be installed. This can lead to runtime conflicts and unpredictable behavior.

package.json#L68-L82

cloudfloo.io/package.json

Lines 68 to 82 in 88a6d4f

    
           "class-variance-authority": "^0.7.0", 
        
           "clsx": "^2.1.1", 
        
           "cmdk": "^1.0.0", 
        
           "compression-webpack-plugin": "^11.1.0", 
        
           "cross-env": "^7.0.3", 
        
           "date-fns": "^3.6.0", 
        
           "embla-carousel-react": "^8.3.0", 
        
           "eslint": "8.49.0", 
        
           "eslint-config-next": "13.5.1", 
        
           "framer-motion": "^11.18.2", 
        
           "highlight.js": "^11.11.1", 
        
           "input-otp": "^1.2.4", 
        
           "lowlight": "^3.1.0", 
        
           "lucide-react": "^0.446.0", 
        
           "motion": "^12.23.0",

Fix in Cursor • Fix in Web

Bug: Semantic HTML Violation: Multiple `` Tags

The AuroraBackground component incorrectly uses a <main> tag as its root, violating HTML semantics by creating multiple <main> elements when used. Furthermore, the AIMachineLearningClient component now redundantly wraps its content with AuroraBackground, even though it's already wrapped by AuroraBackground in its parent page. This leads to nested AuroraBackground components and multiple <main> tags, causing potential rendering and accessibility issues. The AuroraBackground component's root element should be a <div>.

components/ui/aurora-background.tsx#L17-L53

cloudfloo.io/components/ui/aurora-background.tsx

Lines 17 to 53 in 88a6d4f

    
             return ( 
        
               <main> 
        
                 <div 
        
                   className={cn( 
        
                     "relative flex flex-col min-h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-900 text-slate-950 transition-bg", 
        
                     className 
        
                   )} 
        
                   {...props} 
        
                 > 
        
                   <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none"> 
        
                     <div 
        
                       className={cn( 
        
                         ` 
        
                       [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] 
        
                       [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] 
        
                       [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] 
        
                       [background-image:var(--white-gradient),var(--aurora)] 
        
                       dark:[background-image:var(--dark-gradient),var(--aurora)] 
        
                       [background-size:300%,_200%] 
        
                       [background-position:50%_50%,50%_50%] 
        
                       filter blur-[10px] invert dark:invert-0 
        
                       after:content-[''] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)]  
        
                       after:dark:[background-image:var(--dark-gradient),var(--aurora)] 
        
                       after:[background-size:200%,_100%]  
        
                       after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference 
        
                       pointer-events-none 
        
                       absolute -inset-[10px] opacity-50 will-change-transform`, 
        
                         showRadialGradient && 
        
                           `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`, 
        
                         className // allow accent color override 
        
                       )} 
        
                     ></div> 
        
                   </div> 
        
                   {children} 
        
                 </div> 
        
               </main> 
        
             );

app/services/ai-ml/client.tsx#L88-L271

cloudfloo.io/app/services/ai-ml/client.tsx

Lines 88 to 271 in 88a6d4f

    
           return ( 
        
             <AuroraBackground className="aurora-purple"> 
        
               <div className="min-h-screen bg-background"> 
        
                 {/* Header */} 
        
                 <header className="border-b border-gray-800 bg-black/50"> 
        
                   <div className="container mx-auto px-6 py-4"> 
        
                     <div className="flex items-center space-x-4"> 
        
                       <BackToHomeButton /> 
        
                       <div className="text-gray-500">/</div> 
        
                       <div className="text-neon">{t('services.aiMl.title')}</div> 
        
                     </div> 
        
                   </div> 
        
                 </header> 
        
                 {/* Hero Section */} 
        
                 <section className="py-20 relative overflow-hidden"> 
        
                   {/* Removed bg-gradient-to-br background */} 
        
                   <div className="container mx-auto px-6 relative z-10"> 
        
                     <div className="max-w-4xl mx-auto text-center"> 
        
                       <div className="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-8"> 
        
                         <Brain className="w-10 h-10 text-white" /> 
        
                       </div> 
        
                       <h1  
        
                         id="ai-ml-solutions" 
        
                         className="text-5xl md:text-6xl font-bold mb-6" 
        
                         dangerouslySetInnerHTML={{ __html: t('services.aiMl.heroTitle') }} 
        
                       /> 
        
                       <p className="text-xl text-gray-300 mb-8 leading-relaxed"> 
        
                         {t('services.aiMl.heroDescription')} 
        
                       </p> 
        
                       <div className="flex flex-col sm:flex-row gap-4 justify-center"> 
        
                         <Button size="lg" className="bg-gradient-neon text-white"> 
        
                           {t('services.aiMl.ctaMain')} 
        
                         </Button> 
        
                         <Button size="lg" variant="outline" className="border-neon text-neon hover:bg-neon/10"> 
        
                           {t('services.aiMl.ctaSecondary')} 
        
                         </Button> 
        
                       </div> 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
                 {/* Features Section */} 
        
                 <section className="py-20"> 
        
                   <div className="container mx-auto px-6"> 
        
                     <div className="text-center mb-16"> 
        
                       <h2 className="text-4xl font-bold mb-6">{t('services.aiMl.featuresTitle')}</h2> 
        
                       <p className="text-xl text-gray-300 max-w-3xl mx-auto"> 
        
                         {t('services.aiMl.featuresDescription')} 
        
                       </p> 
        
                     </div> 
        
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 
        
                       {features.map((feature, index) => { 
        
                         const Icon = feature.icon; 
        
                         return ( 
        
                           <Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300"> 
        
                             <CardHeader> 
        
                               <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4"> 
        
                                 <Icon className="w-6 h-6 text-white" /> 
        
                               </div> 
        
                               <CardTitle className="text-white">{feature.title}</CardTitle> 
        
                             </CardHeader> 
        
                             <CardContent> 
        
                               <CardDescription className="text-gray-300"> 
        
                                 {feature.description} 
        
                               </CardDescription> 
        
                             </CardContent> 
        
                           </Card> 
        
                         ); 
        
                       })} 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
                 {/* AI Services Grid */} 
        
                 <section className="py-20 bg-black/30"> 
        
                   <div className="container mx-auto px-6"> 
        
                     <div className="text-center mb-16"> 
        
                       <h2 className="text-4xl font-bold mb-6">{t('services.aiMl.aiServicesTitle')}</h2> 
        
                       <p className="text-xl text-gray-300 max-w-3xl mx-auto"> 
        
                         {t('services.aiMl.aiServicesDescription')} 
        
                       </p> 
        
                     </div> 
        
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> 
        
                       {aiServices.map((category, index) => ( 
        
                         <Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300"> 
        
                           <CardHeader> 
        
                             <CardTitle className="text-white">{category.category}</CardTitle> 
        
                           </CardHeader> 
        
                           <CardContent> 
        
                             <div className="grid grid-cols-2 gap-3"> 
        
                               {category.services.map((service, serviceIndex) => ( 
        
                                 <div key={serviceIndex} className="flex items-center"> 
        
                                   <div className="w-2 h-2 bg-neon rounded-full mr-3"></div> 
        
                                   <span className="text-sm text-gray-300">{service}</span> 
        
                                 </div> 
        
                               ))} 
        
                             </div> 
        
                           </CardContent> 
        
                         </Card> 
        
                       ))} 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
                 {/* Technologies Section */} 
        
                 <section className="py-20"> 
        
                   <div className="container mx-auto px-6"> 
        
                     <div className="text-center mb-16"> 
        
                       <h2 className="text-4xl font-bold mb-6">{t('services.aiMl.technologiesTitle')}</h2> 
        
                       <p className="text-xl text-gray-300 max-w-3xl mx-auto"> 
        
                         {t('services.aiMl.technologiesDescription')} 
        
                       </p> 
        
                     </div> 
        
                     <div className="flex flex-wrap justify-center gap-4"> 
        
                       {technologies.map((tech, index) => ( 
        
                         <div 
        
                           key={index} 
        
                           className="px-6 py-3 glass rounded-full border border-gray-700 hover:border-neon/50 transition-all duration-300" 
        
                         > 
        
                           <span className="text-gray-300">{tech}</span> 
        
                         </div> 
        
                       ))} 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
                 {/* Use Cases Section */} 
        
                 <section className="py-20 bg-black/30"> 
        
                   <div className="container mx-auto px-6"> 
        
                     <div className="text-center mb-16"> 
        
                       <h2 className="text-4xl font-bold mb-6">{t('services.aiMl.useCasesTitle')}</h2> 
        
                       <p className="text-xl text-gray-300 max-w-3xl mx-auto"> 
        
                         {t('services.aiMl.useCasesDescription')} 
        
                       </p> 
        
                     </div> 
        
                     <div className="grid grid-cols-1 lg:grid-cols-3 gap-8"> 
        
                       {useCases.map((useCase, index) => ( 
        
                         <Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300"> 
        
                           <CardHeader> 
        
                             <CardTitle className="text-white">{useCase.title}</CardTitle> 
        
                             <CardDescription className="text-gray-300"> 
        
                               {useCase.description} 
        
                             </CardDescription> 
        
                           </CardHeader> 
        
                           <CardContent> 
        
                             <div className="space-y-2"> 
        
                               {useCase.metrics.map((metric, metricIndex) => ( 
        
                                 <div key={metricIndex} className="flex items-center"> 
        
                                   <div className="w-2 h-2 bg-neon rounded-full mr-3"></div> 
        
                                   <span className="text-sm text-gray-300">{metric}</span> 
        
                                 </div> 
        
                               ))} 
        
                             </div> 
        
                           </CardContent> 
        
                         </Card> 
        
                       ))} 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
                 {/* CTA Section */} 
        
                 <section className="py-20 bg-gradient-to-r from-purple-900/20 to-pink-900/20"> 
        
                   <div className="container mx-auto px-6 text-center"> 
        
                     <h2 className="text-4xl font-bold mb-6">{t('services.aiMl.readyTitle')}</h2> 
        
                     <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> 
        
                       {t('services.aiMl.readyDescription')} 
        
                     </p> 
        
                     <div className="flex flex-col sm:flex-row gap-4 justify-center"> 
        
                       <Button size="lg" className="bg-gradient-neon text-white"> 
        
                         {t('services.aiMl.ctaProject')} 
        
                       </Button> 
        
                       <Button size="lg" variant="outline" className="border-neon text-neon hover:bg-neon/10"> 
        
                         {t('services.aiMl.ctaGuide')} 
        
                       </Button> 
        
                     </div> 
        
                   </div> 
        
                 </section> 
        
               </div> 
        
             </AuroraBackground>

Fix in Cursor • Fix in Web

Bug: GlowingEffect Misplacement Causes Layout Chaos

Eight GlowingEffect components are incorrectly placed as standalone elements between various page sections. These components are designed for absolute positioning within a parent container, not as top-level siblings. This misplacement results in a lack of proper positioning context, causing layout issues, unintended rendering, redundant visual effects, and DOM clutter.

app/page.tsx#L56-L75

cloudfloo.io/app/page.tsx

Lines 56 to 75 in 88a6d4f

    
           <main className="relative"> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <EnhancedHeader /> 
        
             <AuroraBackground> 
        
               <Hero /> 
        
             </AuroraBackground> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <EnhancedServices /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <EnhancedAbout /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <TeamSection /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <EnhancedProjects /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <FAQSection /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <EnhancedContact /> 
        
             <GlowingEffect glow={true} disabled={false} borderWidth={1} /> 
        
             <Footer />

Fix in Cursor • Fix in Web

BugBot free trial expires on July 22, 2025
You have used $0.00 of your $5.00 spend limit so far. Manage your spend limit in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎

Copilot AI review requested due to automatic review settings July 9, 2025 11:46

wiatrM requested a review from Sebastian-Debicki as a code owner July 9, 2025 11:46

Copilot AI reviewed Jul 9, 2025

View reviewed changes

cursor Bot reviewed Jul 9, 2025

View reviewed changes

Navigation Menu

Uh oh!

feat: Integrate AuroraBackground and GlowingEffect components across … - #37

feat: Integrate AuroraBackground and GlowingEffect components across …#37
wiatrM wants to merge 1 commit into
mainfrom
feature/change-hero

wiatrM commented Jul 9, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 9, 2025

Uh oh!

Copilot AI Jul 9, 2025

Uh oh!

Copilot AI Jul 9, 2025

Uh oh!

cursor Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	>
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />

	"class-variance-authority": "^0.7.0",
	"clsx": "^2.1.1",
	"cmdk": "^1.0.0",
	"compression-webpack-plugin": "^11.1.0",
	"cross-env": "^7.0.3",
	"date-fns": "^3.6.0",
	"embla-carousel-react": "^8.3.0",
	"eslint": "8.49.0",
	"eslint-config-next": "13.5.1",
	"framer-motion": "^11.18.2",
	"highlight.js": "^11.11.1",
	"input-otp": "^1.2.4",
	"lowlight": "^3.1.0",
	"lucide-react": "^0.446.0",
	"motion": "^12.23.0",

	return (
	<main>
	<div
	className={cn(
	"relative flex flex-col min-h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-900 text-slate-950 transition-bg",
	className
	)}
	{...props}
	>
	<div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
	<div
	className={cn(
	`
	[--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)]
	[--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]
	[--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)]
	[background-image:var(--white-gradient),var(--aurora)]
	dark:[background-image:var(--dark-gradient),var(--aurora)]
	[background-size:300%,_200%]
	[background-position:50%_50%,50%_50%]
	filter blur-[10px] invert dark:invert-0
	after:content-[''] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)]
	after:dark:[background-image:var(--dark-gradient),var(--aurora)]
	after:[background-size:200%,_100%]
	after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference
	pointer-events-none
	absolute -inset-[10px] opacity-50 will-change-transform`,
	showRadialGradient &&
	`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
	className // allow accent color override
	)}
	></div>
	</div>
	{children}
	</div>
	</main>
	);

	return (
	<AuroraBackground className="aurora-purple">
	<div className="min-h-screen bg-background">
	{/* Header */}
	<header className="border-b border-gray-800 bg-black/50">
	<div className="container mx-auto px-6 py-4">
	<div className="flex items-center space-x-4">
	<BackToHomeButton />
	<div className="text-gray-500">/</div>
	<div className="text-neon">{t('services.aiMl.title')}</div>
	</div>
	</div>
	</header>

	{/* Hero Section */}
	<section className="py-20 relative overflow-hidden">
	{/* Removed bg-gradient-to-br background */}
	<div className="container mx-auto px-6 relative z-10">
	<div className="max-w-4xl mx-auto text-center">
	<div className="w-20 h-20 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-8">
	<Brain className="w-10 h-10 text-white" />
	</div>
	<h1
	id="ai-ml-solutions"
	className="text-5xl md:text-6xl font-bold mb-6"
	dangerouslySetInnerHTML={{ __html: t('services.aiMl.heroTitle') }}
	/>
	<p className="text-xl text-gray-300 mb-8 leading-relaxed">
	{t('services.aiMl.heroDescription')}
	</p>
	<div className="flex flex-col sm:flex-row gap-4 justify-center">
	<Button size="lg" className="bg-gradient-neon text-white">
	{t('services.aiMl.ctaMain')}
	</Button>
	<Button size="lg" variant="outline" className="border-neon text-neon hover:bg-neon/10">
	{t('services.aiMl.ctaSecondary')}
	</Button>
	</div>
	</div>
	</div>
	</section>

	{/* Features Section */}
	<section className="py-20">
	<div className="container mx-auto px-6">
	<div className="text-center mb-16">
	<h2 className="text-4xl font-bold mb-6">{t('services.aiMl.featuresTitle')}</h2>
	<p className="text-xl text-gray-300 max-w-3xl mx-auto">
	{t('services.aiMl.featuresDescription')}
	</p>
	</div>

	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	{features.map((feature, index) => {
	const Icon = feature.icon;
	return (
	<Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300">
	<CardHeader>
	<div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4">
	<Icon className="w-6 h-6 text-white" />
	</div>
	<CardTitle className="text-white">{feature.title}</CardTitle>
	</CardHeader>
	<CardContent>
	<CardDescription className="text-gray-300">
	{feature.description}
	</CardDescription>
	</CardContent>
	</Card>
	);
	})}
	</div>
	</div>
	</section>

	{/* AI Services Grid */}
	<section className="py-20 bg-black/30">
	<div className="container mx-auto px-6">
	<div className="text-center mb-16">
	<h2 className="text-4xl font-bold mb-6">{t('services.aiMl.aiServicesTitle')}</h2>
	<p className="text-xl text-gray-300 max-w-3xl mx-auto">
	{t('services.aiMl.aiServicesDescription')}
	</p>
	</div>

	<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
	{aiServices.map((category, index) => (
	<Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300">
	<CardHeader>
	<CardTitle className="text-white">{category.category}</CardTitle>
	</CardHeader>
	<CardContent>
	<div className="grid grid-cols-2 gap-3">
	{category.services.map((service, serviceIndex) => (
	<div key={serviceIndex} className="flex items-center">
	<div className="w-2 h-2 bg-neon rounded-full mr-3"></div>
	<span className="text-sm text-gray-300">{service}</span>
	</div>
	))}
	</div>
	</CardContent>
	</Card>
	))}
	</div>
	</div>
	</section>

	{/* Technologies Section */}
	<section className="py-20">
	<div className="container mx-auto px-6">
	<div className="text-center mb-16">
	<h2 className="text-4xl font-bold mb-6">{t('services.aiMl.technologiesTitle')}</h2>
	<p className="text-xl text-gray-300 max-w-3xl mx-auto">
	{t('services.aiMl.technologiesDescription')}
	</p>
	</div>

	<div className="flex flex-wrap justify-center gap-4">
	{technologies.map((tech, index) => (
	<div
	key={index}
	className="px-6 py-3 glass rounded-full border border-gray-700 hover:border-neon/50 transition-all duration-300"
	>
	<span className="text-gray-300">{tech}</span>
	</div>
	))}
	</div>
	</div>
	</section>

	{/* Use Cases Section */}
	<section className="py-20 bg-black/30">
	<div className="container mx-auto px-6">
	<div className="text-center mb-16">
	<h2 className="text-4xl font-bold mb-6">{t('services.aiMl.useCasesTitle')}</h2>
	<p className="text-xl text-gray-300 max-w-3xl mx-auto">
	{t('services.aiMl.useCasesDescription')}
	</p>
	</div>

	<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
	{useCases.map((useCase, index) => (
	<Card key={index} className="glass border-gray-700 hover:border-neon/50 transition-all duration-300">
	<CardHeader>
	<CardTitle className="text-white">{useCase.title}</CardTitle>
	<CardDescription className="text-gray-300">
	{useCase.description}
	</CardDescription>
	</CardHeader>
	<CardContent>
	<div className="space-y-2">
	{useCase.metrics.map((metric, metricIndex) => (
	<div key={metricIndex} className="flex items-center">
	<div className="w-2 h-2 bg-neon rounded-full mr-3"></div>
	<span className="text-sm text-gray-300">{metric}</span>
	</div>
	))}
	</div>
	</CardContent>
	</Card>
	))}
	</div>
	</div>
	</section>

	{/* CTA Section */}
	<section className="py-20 bg-gradient-to-r from-purple-900/20 to-pink-900/20">
	<div className="container mx-auto px-6 text-center">
	<h2 className="text-4xl font-bold mb-6">{t('services.aiMl.readyTitle')}</h2>
	<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
	{t('services.aiMl.readyDescription')}
	</p>
	<div className="flex flex-col sm:flex-row gap-4 justify-center">
	<Button size="lg" className="bg-gradient-neon text-white">
	{t('services.aiMl.ctaProject')}
	</Button>
	<Button size="lg" variant="outline" className="border-neon text-neon hover:bg-neon/10">
	{t('services.aiMl.ctaGuide')}
	</Button>
	</div>
	</div>
	</section>
	</div>
	</AuroraBackground>

	<main className="relative">
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<EnhancedHeader />
	<AuroraBackground>
	<Hero />
	</AuroraBackground>
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<EnhancedServices />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<EnhancedAbout />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<TeamSection />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<EnhancedProjects />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<FAQSection />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<EnhancedContact />
	<GlowingEffect glow={true} disabled={false} borderWidth={1} />
	<Footer />

Uh oh!

Conversation

wiatrM commented Jul 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Bug: Duplicate Components Cause DOM Overlap

Bug: Framer Motion Version Conflict

Bug: Semantic HTML Violation: Multiple `` Tags

Bug: GlowingEffect Misplacement Causes Layout Chaos

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants