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 diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..e69de29 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 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 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); + } +} 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; +} 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(); 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;