From cf2a663733e5ac455d4a2ac1da40d07ff9e9cbe2 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:56:59 +0000 Subject: [PATCH 01/17] Update package.json --- package.json | 55 +++++++++++++++++----------------------------------- 1 file changed, 18 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 3801da6..4711594 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,22 @@ { - "name": "webild-components-2", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev --turbopack", - "build": "next build --turbopack", - "start": "next start", - "lint": "eslint" - }, + "name": "webild-components-2", "version": "0.1.0", "private": true, "dependencies": { - "@gsap/react": "^2.1.2", - "@react-three/drei": "^10.7.7", - "@react-three/fiber": "^9.4.0", - "clsx": "^2.1.1", - "cobe": "^0.6.5", - "embla-carousel-auto-scroll": "^8.6.0", - "embla-carousel-react": "^8.6.0", - "gsap": "^3.13.0", - "lenis": "^1.3.15", - "lucide-react": "^0.555.0", - "motion-number": "^1.0.0", - "next": "16.0.7", - "react": "19.2.1", - "react-dom": "19.2.1", - "react-fast-marquee": "^1.6.5", - "tailwind-merge": "^3.4.0", - "three": "^0.181.2" + "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4", "lucide-react": "^0.263.1" }, - "devDependencies": { - "@eslint/eslintrc": "^3", - "@tailwindcss/postcss": "^4", - "@types/node": "^20", - "@types/react": "^19", - "@types/react-dom": "^19", - "eslint": "^9", - "eslint-config-next": "16.0.7", - "tailwindcss": "^4", - "typescript": "^5" + "scripts": { + "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", "not dead", "not op_mini all" + ], + "development": [ + "last 1 chrome version", "last 1 firefox version", "last 1 safari version" + ] } -} +} \ No newline at end of file From f25470ee14e202da72655faee6fa5b67381a4124 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:00 +0000 Subject: [PATCH 02/17] Add public/favicon.ico --- public/favicon.ico | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/favicon.ico diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..e69de29 From 9185ac9dea4065b6d6fc2c2c201a7e013243bb84 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:01 +0000 Subject: [PATCH 03/17] Add public/index.html --- public/index.html | 1237 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1237 insertions(+) create mode 100644 public/index.html diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5eec8fc --- /dev/null +++ b/public/index.html @@ -0,0 +1,1237 @@ + + + + + + + + + + + React App + + + +
+ + + + + \ No newline at end of file From f0677f5368083b5cf073d94ee70f8a5063c61cd6 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:02 +0000 Subject: [PATCH 04/17] Add public/manifest.json --- public/manifest.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 public/manifest.json diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..4573176 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,8 @@ +{ + "short_name": "React App", "name": "Create React App Sample", "icons": [ + { + "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" + } + ], + "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" +} \ No newline at end of file From 10b2aeb8b76522cf20d9b935c21976c485272ebf Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:03 +0000 Subject: [PATCH 05/17] Add src/App.css --- src/App.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/App.css diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..20f1519 --- /dev/null +++ b/src/App.css @@ -0,0 +1,33 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + padding: 20px; + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} From 2efbb306fe30b07e6b1c8b828cc70a337070abc3 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:04 +0000 Subject: [PATCH 06/17] Add src/App.js --- src/App.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/App.js diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..a24ab2f --- /dev/null +++ b/src/App.js @@ -0,0 +1,27 @@ +import React from 'react'; +import './App.css'; +import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple'; +import HeroBillboard from './components/sections/hero/HeroBillboard'; +import AboutMetric from './components/sections/about/AboutMetric'; +import AboutFeatureGrid from './components/sections/about/AboutFeatureGrid'; +import AboutCardFeature from './components/sections/about/AboutCardFeature'; +import TestimonialsStorybook from './components/sections/testimonials/TestimonialsStorybook'; +import BlogGrid from './components/sections/blog/BlogGrid'; +import FooterLinksColumns from './components/footer/FooterLinksColumns/FooterLinksColumns'; + +function App() { + return ( +
+ + + + + + + + +
+ ); +} + +export default App; From ce53202d370406b0916dc6d38b3f72e4bfcf76bb Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:05 +0000 Subject: [PATCH 07/17] Add src/components/footer/FooterLinksColumns/FooterLinksColumns.js --- .../FooterLinksColumns/FooterLinksColumns.js | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/footer/FooterLinksColumns/FooterLinksColumns.js diff --git a/src/components/footer/FooterLinksColumns/FooterLinksColumns.js b/src/components/footer/FooterLinksColumns/FooterLinksColumns.js new file mode 100644 index 0000000..9316ecc --- /dev/null +++ b/src/components/footer/FooterLinksColumns/FooterLinksColumns.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { Facebook, Twitter, Github, Linkedin } from 'lucide-react'; + +function FooterLinksColumns() { + const footerLinks = { + Product: ['Features', 'Pricing', 'Documentation', 'API Reference'], + Company: ['About', 'Blog', 'Careers', 'Press'], + Resources: ['Community', 'Support', 'Status', 'Security'], + Legal: ['Privacy', 'Terms', 'Cookies', 'Licenses'] + }; + + const socialLinks = [ + { icon: , href: '#' }, + { icon: , href: '#' }, + { icon: , href: '#' }, + { icon: , href: '#' } + ]; + + return ( +
+
+
+
+
+ Logo + Brand +
+

+ Building the future of web development with modern tools and exceptional developer experience. +

+
+ {socialLinks.map((social, index) => ( + + {social.icon} + + ))} +
+
+ + {Object.entries(footerLinks).map(([category, links]) => ( +
+

{category}

+ +
+ ))} +
+ +
+

+ © 2024 Brand. All rights reserved. +

+ +
+
+
+ ); +} + +export default FooterLinksColumns; From ac2343f9c4bcf761ebe5a62883be328dddcb98ac Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:06 +0000 Subject: [PATCH 08/17] Add src/components/navbar/NavbarStyleApple/NavbarStyleApple.js --- .../NavbarStyleApple/NavbarStyleApple.js | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/components/navbar/NavbarStyleApple/NavbarStyleApple.js diff --git a/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js new file mode 100644 index 0000000..5cde8e7 --- /dev/null +++ b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Menu, X } from 'lucide-react'; + +function NavbarStyleApple() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + return ( + + ); +} + +export default NavbarStyleApple; From 8285f8941d76dafa0c4657ce24192f8ea7145a22 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:07 +0000 Subject: [PATCH 09/17] Add src/components/sections/about/AboutCardFeature.js --- .../sections/about/AboutCardFeature.js | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/components/sections/about/AboutCardFeature.js diff --git a/src/components/sections/about/AboutCardFeature.js b/src/components/sections/about/AboutCardFeature.js new file mode 100644 index 0000000..e707ff8 --- /dev/null +++ b/src/components/sections/about/AboutCardFeature.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { CheckCircle } from 'lucide-react'; + +function AboutCardFeature() { + const features = [ + 'Modern React components', + 'TypeScript support', + 'Responsive design', + 'Accessibility built-in', + 'Custom theming', + 'Developer tools' + ]; + + return ( +
+
+
+
+

+ Everything you need to build faster +

+

+ Our comprehensive component library includes everything you need to build modern web applications quickly and efficiently. +

+ +
+ {features.map((feature, index) => ( +
+ + {feature} +
+ ))} +
+ + +
+ +
+ Features +
+
+
+
+ ); +} + +export default AboutCardFeature; From c6d259cfe1de7a7e0d9b8086088ce738564adb98 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:08 +0000 Subject: [PATCH 10/17] Add src/components/sections/about/AboutFeatureGrid.js --- .../sections/about/AboutFeatureGrid.js | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/sections/about/AboutFeatureGrid.js diff --git a/src/components/sections/about/AboutFeatureGrid.js b/src/components/sections/about/AboutFeatureGrid.js new file mode 100644 index 0000000..930b579 --- /dev/null +++ b/src/components/sections/about/AboutFeatureGrid.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { Zap, Shield, Globe, Code } from 'lucide-react'; + +function AboutFeatureGrid() { + const features = [ + { + icon: , + title: 'Lightning Fast', + description: 'Optimized for performance with modern web standards' + }, + { + icon: , + title: 'Secure by Default', + description: 'Built with security best practices from the ground up' + }, + { + icon: , + title: 'Global Scale', + description: 'Deploy worldwide with our global infrastructure' + }, + { + icon: , + title: 'Developer First', + description: 'Clean APIs and excellent developer experience' + } + ]; + + return ( +
+
+
+

+ Why choose our platform? +

+

+ Everything you need to build modern web applications +

+
+ +
+ {features.map((feature, index) => ( +
+
+ {feature.icon} +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+
+ ); +} + +export default AboutFeatureGrid; From ceea391b35c5e3ec5481cf49a1882430d7ddf67a Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:09 +0000 Subject: [PATCH 11/17] Add src/components/sections/about/AboutMetric.js --- src/components/sections/about/AboutMetric.js | 40 ++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/components/sections/about/AboutMetric.js diff --git a/src/components/sections/about/AboutMetric.js b/src/components/sections/about/AboutMetric.js new file mode 100644 index 0000000..65800be --- /dev/null +++ b/src/components/sections/about/AboutMetric.js @@ -0,0 +1,40 @@ +import React from 'react'; + +function AboutMetric() { + const metrics = [ + { value: '10K+', label: 'Happy Customers' }, + { value: '50+', label: 'Components' }, + { value: '99.9%', label: 'Uptime' }, + { value: '24/7', label: 'Support' } + ]; + + return ( +
+
+
+

+ Trusted by developers worldwide +

+

+ Our platform is used by thousands of developers and companies to build amazing web experiences. +

+
+ +
+ {metrics.map((metric, index) => ( +
+
+ {metric.value} +
+
+ {metric.label} +
+
+ ))} +
+
+
+ ); +} + +export default AboutMetric; From 4f407234d995febb293d0d5cc495aafb7d545254 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:10 +0000 Subject: [PATCH 12/17] Add src/components/sections/blog/BlogGrid.js --- src/components/sections/blog/BlogGrid.js | 77 ++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 src/components/sections/blog/BlogGrid.js diff --git a/src/components/sections/blog/BlogGrid.js b/src/components/sections/blog/BlogGrid.js new file mode 100644 index 0000000..c488150 --- /dev/null +++ b/src/components/sections/blog/BlogGrid.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { Calendar, User } from 'lucide-react'; + +function BlogGrid() { + const blogPosts = [ + { + title: 'Getting Started with Modern React', + excerpt: 'Learn the fundamentals of React 18 and build amazing user interfaces.', + author: 'John Doe', + date: '2024-01-15', + image: '/images/courses.aee168f4-1768917228064.png', + category: 'React' + }, + { + title: 'Building Scalable Web Applications', + excerpt: 'Best practices for creating maintainable and scalable web applications.', + author: 'Jane Smith', + date: '2024-01-10', + image: '/images/courses-box-1.e8498908-1768917228039.png', + category: 'Architecture' + }, + { + title: 'The Future of Web Development', + excerpt: 'Explore emerging trends and technologies shaping the future of web development.', + author: 'Mike Johnson', + date: '2024-01-05', + image: '/images/courses-box-2.2e36a41b-1768917228024.png', + category: 'Trends' + } + ]; + + return ( +
+
+
+

+ Latest from our blog +

+

+ Stay updated with the latest trends and best practices in web development +

+
+ +
+ {blogPosts.map((post, index) => ( +
+ {post.title} + +
+
+ {post.category} +
+ +

+ {post.title} +

+ +

+ {post.excerpt} +

+ +
+ + {post.author} + + {post.date} +
+
+
+ ))} +
+
+
+ ); +} + +export default BlogGrid; From c06f872c0218151b142283d2a3afb1e2762ae8f3 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:11 +0000 Subject: [PATCH 13/17] Add src/components/sections/hero/HeroBillboard.js --- src/components/sections/hero/HeroBillboard.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/sections/hero/HeroBillboard.js diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js new file mode 100644 index 0000000..38b87fb --- /dev/null +++ b/src/components/sections/hero/HeroBillboard.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { ArrowRight } from 'lucide-react'; + +function HeroBillboard() { + return ( +
+
+
+

+ Build Amazing Web Experiences +

+

+ Create stunning websites and applications with our comprehensive component library and design system. +

+
+ + +
+
+
+ Hero +
+
+
+ ); +} + +export default HeroBillboard; From 6cf7da9dc0d05d4c416a293b429f1b8b29915b98 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:12 +0000 Subject: [PATCH 14/17] Add src/components/sections/testimonials/TestimonialsStorybook.js --- .../testimonials/TestimonialsStorybook.js | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/components/sections/testimonials/TestimonialsStorybook.js diff --git a/src/components/sections/testimonials/TestimonialsStorybook.js b/src/components/sections/testimonials/TestimonialsStorybook.js new file mode 100644 index 0000000..e0da406 --- /dev/null +++ b/src/components/sections/testimonials/TestimonialsStorybook.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { Star } from 'lucide-react'; + +function TestimonialsStorybook() { + const testimonials = [ + { + name: 'John Doe', + role: 'Frontend Developer', + company: 'TechCorp', + content: 'This component library has saved us countless hours of development time. The quality is exceptional.', + rating: 5, + avatar: '/images/256-1768917228018.png' + }, + { + name: 'Jane Smith', + role: 'Product Manager', + company: 'StartupXYZ', + content: 'Clean, modern components that work perfectly out of the box. Highly recommended!', + rating: 5, + avatar: '/images/256-1768917228018.png' + }, + { + name: 'Mike Johnson', + role: 'Full Stack Developer', + company: 'WebAgency', + content: 'The documentation is excellent and the components are very well designed.', + rating: 5, + avatar: '/images/256-1768917228018.png' + } + ]; + + return ( +
+
+
+

+ What developers are saying +

+

+ Join thousands of developers who trust our components +

+
+ +
+ {testimonials.map((testimonial, index) => ( +
+
+ {[...Array(testimonial.rating)].map((_, i) => ( + + ))} +
+ +

+ "{testimonial.content}" +

+ +
+ {testimonial.name} +
+
{testimonial.name}
+
{testimonial.role} at {testimonial.company}
+
+
+
+ ))} +
+
+
+ ); +} + +export default TestimonialsStorybook; From f337637c2fdd7d4a85f57e9769ea7686a424f0c5 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:13 +0000 Subject: [PATCH 15/17] Add src/index.css --- src/index.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} From c6376c5f74392a771deb4dcb4cb343029353d488 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:14 +0000 Subject: [PATCH 16/17] Add src/index.js --- src/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/index.js diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..d563c0f --- /dev/null +++ b/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); From 263e09dd8447e007370c9caf590f2b1fae77d629 Mon Sep 17 00:00:00 2001 From: development Date: Tue, 20 Jan 2026 13:57:15 +0000 Subject: [PATCH 17/17] Add src/reportWebVitals.js --- src/reportWebVitals.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/reportWebVitals.js diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals;