react-toolkit/about.html at main · DonaldValentine/react-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn about Redux Toolkit and our mission to simplify state management in React applications">
    <title>About - Redux Toolkit</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="navbar" id="navbar">
        <div class="container nav-container">
            <div class="nav-brand">
                <a href="index.html">Redux<span>Toolkit</span></a>
            </div>
            <button class="mobile-toggle" id="mobileToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-menu" id="navMenu">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="active">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank" class="github-link">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    GitHub
                </a></li>
                <li><a href="download.html" class="btn-download">Download</a></li>
            </ul>
        </div>
    </nav>

    <section class="page-header">
        <div class="container">
            <h1>About Redux Toolkit</h1>
            <p>Simplifying state management for modern React applications</p>
        </div>
    </section>

    <section class="about-content">
        <div class="container">
            <div class="about-intro">
                <h2>Our Story</h2>
                <p>Redux Toolkit represents the evolution of Redux state management. Born from the need to simplify Redux development and eliminate common pain points, Redux Toolkit has become the official recommended approach for writing Redux logic.</p>
                <p>We believe that state management shouldn't be complicated. With Redux Toolkit, developers can focus on building features rather than wrestling with boilerplate code. Our toolkit provides opinionated defaults that work for most use cases while remaining flexible enough for advanced scenarios.</p>
            </div>

            <div class="mission-vision-grid">
                <div class="mission-card">
                    <div class="card-icon">🎯</div>
                    <h3>Our Mission</h3>
                    <p>To empower developers with powerful yet simple tools for managing application state. We strive to eliminate unnecessary complexity while maintaining the flexibility and predictability that makes Redux great.</p>
                    <p>Our mission is to make Redux accessible to developers of all skill levels, from beginners taking their first steps in state management to experienced engineers building enterprise-scale applications.</p>
                </div>

                <div class="vision-card">
                    <div class="card-icon">🚀</div>
                    <h3>Our Vision</h3>
                    <p>We envision a future where state management is intuitive, efficient, and enjoyable. Redux Toolkit is our commitment to that future—a toolkit that evolves with the needs of the React ecosystem.</p>
                    <p>By integrating best practices, modern patterns, and community feedback, we're building the foundation for the next generation of React applications. Our vision is to remain the go-to solution for predictable state management.</p>
                </div>
            </div>

            <div class="values-section">
                <h2>Our Core Values</h2>
                <div class="values-grid">
                    <div class="value-item">
                        <h4>✨ Simplicity First</h4>
                        <p>We prioritize developer experience by reducing boilerplate and providing intuitive APIs that feel natural to use.</p>
                    </div>
                    <div class="value-item">
                        <h4>⚡ Performance Matters</h4>
                        <p>Built with performance in mind, Redux Toolkit ensures your applications run smoothly at scale.</p>
                    </div>
                    <div class="value-item">
                        <h4>🛡️ Type Safety</h4>
                        <p>First-class TypeScript support provides confidence and catches errors before they reach production.</p>
                    </div>
                    <div class="value-item">
                        <h4>🌟 Best Practices</h4>
                        <p>We incorporate community-proven patterns and best practices directly into the toolkit.</p>
                    </div>
                    <div class="value-item">
                        <h4>🔧 Developer Tools</h4>
                        <p>Integrated DevTools and debugging capabilities make development and troubleshooting effortless.</p>
                    </div>
                    <div class="value-item">
                        <h4>📚 Education</h4>
                        <p>Comprehensive documentation and examples help developers learn and master state management.</p>
                    </div>
                </div>
            </div>

            <div class="stats-section">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number">1M+</div>
                        <div class="stat-label">Weekly Downloads</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">50K+</div>
                        <div class="stat-label">GitHub Stars</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">Open Source</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">Active</div>
                        <div class="stat-label">Community</div>
                    </div>
                </div>
            </div>

            <div class="team-section">
                <h2>Built by the Community</h2>
                <p>Redux Toolkit is maintained by dedicated contributors from around the world. Our diverse team of developers, designers, and advocates work together to create the best possible state management solution for React.</p>
                <p>We welcome contributions, feedback, and ideas from everyone. Whether you're reporting a bug, suggesting a feature, or contributing code, you're helping shape the future of Redux Toolkit.</p>
                <div class="cta-buttons" style="margin-top: 2rem;">
                    <a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank" class="btn btn-primary">Join Our Community</a>
                    <a href="contact.html" class="btn btn-secondary">Get in Touch</a>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <h3>Redux<span>Toolkit</span></h3>
                    <p>Modern state management for React applications</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Quick Links</h4>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                            <li><a href="download.html">Download</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Resources</h4>
                        <ul>
                            <li><a href="https://reduxtoolkit.com/" target="_blank">Official Site</a></li>
                            <li><a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank">GitHub</a></li>
                            <li><a href="https://reduxtoolkit.com/how-to-use-useselector-in-redux-toolkit/" target="_blank">useSelector Guide</a></li>
                            <li><a href="https://reduxtoolkit.com/how-to-use-redux-persist-with-redux-toolkit/" target="_blank">Redux Persist Guide</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Connect</h4>
                        <div class="social-links">
                            <a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank" aria-label="GitHub">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 ReduxToolkit. All rights reserved.</p>
                <p>Designed & Developed with ❤️ by Factory Droid</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>