Web3Camp-Labs · xrdavies · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
diff --git a/README.md b/README.md
@@ -79,20 +79,11 @@ With Quick DApp, you can just create a simple dapp in minutes and share it with
 - `src/hooks/` - Custom React hooks
   - `useTransactionTracker.js` - Hook for tracking transaction status
 
-## History
-
-In the past years, **Patrick Gallagher** created a tool named OneClick DApp for the community. However, this tool has not worked for a long time since mid-2023. So we created a new tool to replace it under the name of Web3Camp.
-
-## Technologies
-
-- React 17
-- ethers.js 5.5
-- Ant Design 4.18
-- Styled Components
-
 ## Special Thanks
 
-https://oneclickdapp.com
+https://oneclickdapp.com (Original inspiration)
+
+In the past years, **Patrick Gallagher** created a tool named OneClick DApp for the community. However, this tool has not worked for a long time since mid-2023. So we created Quick dApp as a new tool to replace it under the name of Web3Camp.
 
 ## License
 

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "oneclick-dapp",
+  "name": "quick-dapp",
   "version": "0.1.0",
   "private": true,
   "homepage": "./",

diff --git a/public/index.html b/public/index.html
@@ -7,11 +7,11 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="One Click dApp is a tool to instantly build a dApp with any smart contracts easily and quickly with one click!"
+      content="Quick dApp is a tool to instantly build a dApp with any smart contracts easily and quickly with one click!"
     />
     <meta
       name="keywords"
-      content="ethereum, solidity, evm, dapp, oneclick, web3camp.us, web3camp"
+      content="ethereum, solidity, evm, dapp, quick dapp, web3camp.us, web3camp, blockchain"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -28,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>One Click DApp ｜ a tool to instantly build a dApp</title>
+    <title>Quick dApp | a tool to instantly build a dApp</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/AppCreate.jsx b/src/components/AppCreate.jsx
@@ -10,10 +10,10 @@ const { Text, Title: AntTitle } = Typography;
 
 
 const WD = styled.div`
-    padding: 40px 5%;
+    padding: 2em;
     background-color: #ffffff;
+    width: 100vw;
     flex-grow: 1;
-    box-shadow: 0 0 5px #e5e5e5;
     border-radius: 10px;
     max-width: 800px;
     margin: 0 auto;

diff --git a/src/components/AppDetail.jsx b/src/components/AppDetail.jsx
@@ -58,9 +58,11 @@ const ContractInfo = styled.div`
 `
 
 const WD = styled.div`
-    padding: 20px 5%;
+    padding: 2em;
     background-color: #ffffff;
+    width: 100vw;
     flex-grow: 1;
+    border-radius: 10px;
 `;
 
 const Title = styled.h1`

diff --git a/src/components/AppHome.jsx b/src/components/AppHome.jsx
@@ -1,29 +1,119 @@
 import styled from 'styled-components';
-import { Button } from 'antd';
-
+import { Button, Row, Col, Card, Typography, Space } from 'antd';
+import { RocketOutlined, CodeOutlined, MobileOutlined, ApiOutlined, TeamOutlined, GlobalOutlined } from '@ant-design/icons';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import logo from '../res/logo.svg';
 
+const { Title: AntTitle, Paragraph, Text } = Typography;
 
 const WD = styled.div`
-    padding: 4em;
-background-color: #ffffff;
-  width: 100vw;
-    flex-grow:1;
+    padding: 0;
+    background-color: #ffffff;
+    width: 100vw;
+    flex-grow: 1;
     border-radius: 10px;
 `;
 
-const Title = styled.h1`
-font-size: 18px;
-  text-align: center;
-  font-weight: bold;
+const HeroSection = styled.div`
+    padding: 4em 2em;
+    text-align: center;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+    border-radius: 10px 10px 0 0;
+
+    @media (max-width: 768px) {
+        padding: 3em 1em;
+    }
+`;
+
+const HeroTitle = styled(AntTitle)`
+    margin-bottom: 16px !important;
+    font-size: 2.5rem !important;
+
+    @media (max-width: 768px) {
+        font-size: 2rem !important;
+    }
+`;
+
+const HeroSubtitle = styled(Paragraph)`
+    font-size: 1.2rem;
+    max-width: 700px;
+    margin: 0 auto 2rem auto !important;
+    color: #555;
+
+    @media (max-width: 768px) {
+        font-size: 1rem;
+    }
+`;
+
+const Logo = styled.img`
+    width: 120px;
+    margin-bottom: 20px;
+
+    @media (max-width: 768px) {
+        width: 100px;
+    }
 `;
 
-const BoxButton = styled.div`
-margin-top: 50px;
-    display: flex;
-    justify-content: center;
-`
+const FeaturesSection = styled.div`
+    padding: 4em 2em;
+    background-color: white;
+
+    @media (max-width: 768px) {
+        padding: 2em 1em;
+    }
+`;
+
+const ContentContainer = styled.div`
+    max-width: 1200px;
+    margin: 0 auto;
+`;
+
+
+const SectionTitle = styled(AntTitle)`
+    text-align: center;
+    margin-bottom: 2em !important;
+`;
+
+const FeatureCard = styled(Card)`
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    }
+
+    .ant-card-head-title {
+        font-weight: 600;
+    }
+
+    .ant-card-body {
+        padding: 24px;
+    }
+`;
+
+const IconWrapper = styled.div`
+    font-size: 36px;
+    margin-bottom: 16px;
+    color: #1890ff;
+`;
+
+const CTASection = styled.div`
+    padding: 3em 2em;
+    text-align: center;
+    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+    border-radius: 0 0 10px 10px;
+`;
+
+const CTAButton = styled(Button)`
+    height: 50px;
+    font-size: 16px;
+    padding: 0 32px;
+    border-radius: 25px;
+`;
 
 export default function AppHome() {
     const navigate = useNavigate();
@@ -35,8 +125,82 @@ export default function AppHome() {
         navigate(`/new`); // Navigate to App Create page
     }
 
-    return <WD>
-        <Title>Welcome to OneClickDapp!</Title>
-        <BoxButton><Button type='primary' onClick={() => onClickStart()}>Get Start</Button></BoxButton>
-    </WD>
+    const features = [
+        {
+            title: 'Instant dApp Creation',
+            description: 'Create a dApp interface for any smart contract in seconds with just the ABI and contract address.',
+            icon: <RocketOutlined />
+        },
+        {
+            title: 'Multi-Network Support',
+            description: 'Support for Ethereum, Polygon, Arbitrum, Optimism and other EVM-compatible networks.',
+            icon: <GlobalOutlined />
+        },
+        {
+            title: 'Mobile Compatible',
+            description: 'Access your dApp on any device using your favorite Ethereum wallet.',
+            icon: <MobileOutlined />
+        },
+        {
+            title: 'Developer Friendly',
+            description: 'Clear error messages and transaction status updates for a better development experience.',
+            icon: <CodeOutlined />
+        },
+        {
+            title: 'No Coding Required',
+            description: 'Generate a complete interface without writing a single line of code.',
+            icon: <ApiOutlined />
+        },
+        {
+            title: 'Open Source',
+            description: 'Built by the Web3Camp community, free to use and open for contributions.',
+            icon: <TeamOutlined />
+        }
+    ];
+
+    return (
+        <WD>
+            <HeroSection>
+                <ContentContainer>
+                    <Logo src={logo} alt="Quick dApp Logo" />
+                    <HeroTitle level={1}>Instantly Create dApps for Any Smart Contract</HeroTitle>
+                    <HeroSubtitle>
+                        Quick dApp is a tool that lets you create a simple dApp interface for any smart contract in seconds. 
+                        Just paste your contract's ABI and address to get started.
+                    </HeroSubtitle>
+                    <CTAButton type="primary" size="large" icon={<RocketOutlined />} onClick={onClickStart}>
+                        Create Your dApp
+                    </CTAButton>
+                </ContentContainer>
+            </HeroSection>
+
+            <FeaturesSection>
+                <ContentContainer>
+                    <SectionTitle level={2}>Features</SectionTitle>
+                    <Row gutter={[24, 24]}>
+                        {features.map((feature, index) => (
+                            <Col xs={24} sm={12} lg={8} key={index}>
+                                <FeatureCard>
+                                    <IconWrapper>{feature.icon}</IconWrapper>
+                                    <AntTitle level={4}>{feature.title}</AntTitle>
+                                    <Paragraph>{feature.description}</Paragraph>
+                                </FeatureCard>
+                            </Col>
+                        ))}
+                    </Row>
+                </ContentContainer>
+            </FeaturesSection>
+
+            <CTASection>
+                <ContentContainer>
+                    <Space direction="vertical" size="large">
+                        <AntTitle level={3}>Ready to build your dApp?</AntTitle>
+                        <CTAButton type="primary" size="large" onClick={onClickStart}>
+                            Get Started Now
+                        </CTAButton>
+                    </Space>
+                </ContentContainer>
+            </CTASection>
+        </WD>
+    );
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -4,37 +4,69 @@ import TwitterImg from "../res/Twitter.png";
 
 const Footer = styled.div`
   height: 80px;
-  width: 90%;
+  width: 100%;
   margin: 0 auto;
-  padding-top: 15px;
+  padding: 15px 5%;
   font-size: 14px;
+  background-color: #ffffff;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+
   .midBox{
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+
   img{
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
+    transition: opacity 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
+
   .lft{
     padding-left: 10px;
+    color: #666;
   }
+
   a{
     display: inline-block;
     margin-left: 20px;
+    text-decoration: none;
+    color: #1890ff;
+
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+
+  @media (max-width: 768px) {
+    height: 70px;
+    padding: 10px 3%;
+
+    img {
+      width: 28px;
+      height: 28px;
+    }
+
+    .lft {
+      font-size: 12px;
+    }
   }
 `
 export default function footerBox(){
     return  <Footer>
         <div>
             <div className="midBox">
                 <a href="https://web3camp.us" target="_blank" rel="noreferrer">
-                    <div className="lft">&copy; 2022 Web3camp.us</div>
+                    <div className="lft">&copy; 2022-2025 Web3Camp.us</div>
                 </a>
 
                 <div>
-                    <a href="https://github.com/Web3Camp-Labs/nft-checker" target="_blank" rel="noreferrer">
+                    <a href="https://github.com/Web3Camp-Labs/quick-dapp" target="_blank" rel="noreferrer">
                         <img src={GithubImg} alt=""/>
                     </a>
                     <a href="https://twitter.com/Web3Camp" target="_blank" rel="noreferrer">