diff --git a/package.json b/package.json index 3801da6..8e55110 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,25 @@ { - "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.17.0", "@testing-library/react": "^13.4.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" + }, + "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" + ] }, "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" + "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "typescript": "^4.9.5", "tailwindcss": "^3.3.3", "autoprefixer": "^10.4.14", "postcss": "^8.4.27" } -} +} \ No newline at end of file diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..96bb01e --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} \ No newline at end of file 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/src/App.js b/src/App.js new file mode 100644 index 0000000..f8d2f8e --- /dev/null +++ b/src/App.js @@ -0,0 +1,19 @@ +import React from 'react'; +import ThemeProvider from './components/theme/ThemeProvider'; +import NavbarStyleApple from './components/navbar/NavbarStyleApple/NavbarStyleApple'; +import HeroBillboard from './components/sections/hero/HeroBillboard'; +import FeatureCardOne from './components/sections/feature/FeatureCardOne'; + +function App() { + return ( + +
+ + + +
+ + ); +} + +export default App; \ No newline at end of file diff --git a/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js new file mode 100644 index 0000000..c6d400e --- /dev/null +++ b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { Menu, X } from 'lucide-react'; + +function NavbarStyleApple() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( + + ); +} + +export default NavbarStyleApple; \ No newline at end of file diff --git a/src/components/sections/feature/FeatureCardOne.js b/src/components/sections/feature/FeatureCardOne.js new file mode 100644 index 0000000..4da2f80 --- /dev/null +++ b/src/components/sections/feature/FeatureCardOne.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { Rocket, Zap, Shield, Users } from 'lucide-react'; + +function FeatureCardOne() { + const features = [ + { + icon: , + title: "Fast Performance", description: "Lightning-fast loading times with optimized components and modern build tools.", image: "/images/rocket.518dadfa-1768917245450.svg" + }, + { + icon: , + title: "Easy to Use", description: "Simple APIs and intuitive design make development a breeze for teams of all sizes.", image: "/images/magic-wand.ff01fe1d-1768917245455.svg" + }, + { + icon: , + title: "Type Safe", description: "Built with TypeScript for better developer experience and fewer runtime errors.", image: "/images/type-safety.34453790-1768917245458.svg" + }, + { + icon: , + title: "Team Friendly", description: "Collaborative tools and documentation to help your team work together effectively.", image: "/images/quality.d1d04ce8-1768917245456.svg" + } + ]; + + return ( +
+
+
+

+ Why Choose Our Platform? +

+

+ We've built everything you need to create amazing web experiences, + from the ground up with modern best practices. +

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

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+
+ ); +} + +export default FeatureCardOne; \ No newline at end of file diff --git a/src/components/sections/hero/HeroBillboard.js b/src/components/sections/hero/HeroBillboard.js new file mode 100644 index 0000000..8f47c5a --- /dev/null +++ b/src/components/sections/hero/HeroBillboard.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { ArrowRight } from 'lucide-react'; + +function HeroBillboard() { + return ( +
+
+ +
+
+

+ Build Amazing + Web Experiences +

+ +

+ Create stunning, responsive websites with our modern component library. + Fast, accessible, and beautifully designed. +

+ +
+ + + +
+ +
+ Hero Banner +
+
+
+
+ ); +} + +export default HeroBillboard; \ No newline at end of file diff --git a/src/components/theme/ThemeProvider.js b/src/components/theme/ThemeProvider.js new file mode 100644 index 0000000..6462b50 --- /dev/null +++ b/src/components/theme/ThemeProvider.js @@ -0,0 +1,29 @@ +import React, { createContext, useContext, useState } from 'react'; + +const ThemeContext = createContext(); + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; + +function ThemeProvider({ children }) { + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light'); + }; + + return ( + +
+ {children} +
+ + ); +} + +export default ThemeProvider; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..4bf1c5d --- /dev/null +++ b/src/index.css @@ -0,0 +1,17 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +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; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..1675893 --- /dev/null +++ b/src/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..92a7d97 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file