first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,106 @@
+import React from "react";
+
+const BillingDetails = () => {
+  return (
+    <div className="user-profile-data">
+      <div className="row">
+        <div className="col-lg-6">
+          <input
+            type="text"
+            placeholder="First Name*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-6">
+          <input
+            type="text"
+            placeholder="Last Name*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-12">
+          <input
+            type="text"
+            placeholder="Company Name*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-12">
+          <select className="theme-select-menu">
+            <option defaultValue="">Country*</option>
+            <option defaultValue="AF">Afghanistan</option>
+            <option defaultValue="AX">&Aring;land Islands</option>
+            <option defaultValue="AL">Albania</option>
+            <option defaultValue="DZ">Algeria</option>
+            <option defaultValue="AS">American Samoa</option>
+            <option defaultValue="AD">Andorra</option>
+          </select>
+        </div>
+        <div className="col-12">
+          <input
+            type="text"
+            placeholder="Street Address*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-4">
+          <input
+            type="text"
+            placeholder="Town/City*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-4">
+          <input
+            type="text"
+            placeholder="State*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-4">
+          <input
+            type="text"
+            placeholder="Zip Code*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-6">
+          <input
+            type="email"
+            placeholder="Email Address*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-lg-6">
+          <input
+            type="number"
+            placeholder="Phone Number*"
+            className="single-input-wrapper"
+          />
+        </div>
+        <div className="col-12">
+          <ul className="checkbox-list style-none">
+            <li>
+              <input type="checkbox" id="new-account" />
+              <label htmlFor="new-account">Create Account?</label>
+            </li>
+            <li>
+              <input type="checkbox" id="shipping" />
+              <label htmlFor="shipping">Ship to Different Address?</label>
+            </li>
+          </ul>
+        </div>
+        <div className="col-12">
+          <div className="other-note-area">
+            <p>Order Note (Optional)</p>
+            <textarea></textarea>
+          </div>
+          {/* <!-- /.other-note-area --> */}
+        </div>
+      </div>
+      {/* <!-- /.row --> */}
+    </div>
+  );
+};
+
+export default BillingDetails;
@@ -0,0 +1,26 @@
+import React from "react";
+
+const CreditCard = () => {
+  return (
+    <div className="row">
+      <div className="col-12">
+        <h6>Card number</h6>
+        <input type="number" />
+      </div>
+      <div className="col-8">
+        <h6>Expiry date</h6>
+        <div className="d-flex align-items-center">
+          <input type="number" placeholder="MM" />
+          <span>/</span>
+          <input type="number" placeholder="YY" />
+        </div>
+      </div>
+      <div className="col-4 ms-auto">
+        <h6>CVV</h6>
+        <input type="number" />
+      </div>
+    </div>
+  );
+};
+
+export default CreditCard;
@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useState } from "react";
+
+const LogIn = () => {
+  const [click, setClick] = useState(false);
+  const handleClick = () => setClick(!click);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div className="card">
+      <p className="card-header">
+        Already have an account?{" "}
+        <button className="d-inline-block collapsed" onClick={handleClick}>
+          Click here to login.
+        </button>
+      </p>
+
+      <form
+        onClick={handleSubmit}
+        id="login-form"
+        className={click ? "collapse show" : "collapse"}
+      >
+        <p>Please enter your details below.</p>
+        <div className="row">
+          <div className="col-md-6">
+            <input type="text" placeholder="User name or email" required />
+          </div>
+          <div className="col-md-6">
+            <input type="password" placeholder="Password" required />
+          </div>
+        </div>
+
+        <button className="theme-btn-seven">Login</button>
+        <a href="#" className="lost-passw">
+          Lost your Password?
+        </a>
+      </form>
+    </div>
+  );
+};
+
+export default LogIn;
@@ -0,0 +1,46 @@
+import React from "react";
+
+const OrderDetails = () => {
+  return (
+    <table className="product-review">
+      <tbody>
+        <tr>
+          <th>
+            <span>Bluthooth Speaker</span>
+          </th>
+          <td>
+            <span>$123.78</span>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <span>Subtotal</span>
+          </th>
+          <td>
+            <span>$123.78</span>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <span>Shipping</span>
+          </th>
+          <td>
+            <span>$5.00</span>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>
+            <span>Total</span>
+          </th>
+          <td>
+            <span>$128.00</span>
+          </td>
+        </tr>
+      </tfoot>
+    </table>
+  );
+};
+
+export default OrderDetails;
@@ -0,0 +1,76 @@
+'use client'
+
+import React, { useState } from "react";
+import CreditCard from "./CreditCard";
+
+const Payment = () => {
+  const [click, setClick] = useState(false);
+  const handleClick = () => setClick(!click);
+
+  return (
+    <div className="order-review">
+      {/* <!-- /.product-review --> */}
+      <div className="payment-option">
+        <ul className="payment-list style-none">
+          <li>
+            <input
+              type="radio"
+              name="paymenttype"
+              defaultValue="directbank"
+              defaultChecked="checked"
+              className="payment-radio-button"
+              id="directbank"
+            />
+            <label htmlFor="directbank">Direct Bank Transfer</label>
+            <p>
+              Make your payment directly into our account. Plase use your Order
+              ID as payment reference.
+            </p>
+          </li>
+          <li>
+            <input
+              type="radio"
+              name="paymenttype"
+              defaultValue="paypal"
+              id="paypal"
+              className="payment-radio-button"
+            />
+            <label htmlFor="paypal">PayPal</label>
+          </li>
+          <li>
+            <input
+              type="radio"
+              name="paymenttype"
+              value="creditCard"
+              id="credit-card"
+              className="payment-radio-button"
+              onClick={handleClick}
+            />
+            <label>Credit Card</label>
+          </li>
+          <li className={click ? "credit-card-form show" : "credit-card-form"}>
+            <CreditCard />
+          </li>
+        </ul>
+        {/* <!-- /.payment-list --> */}
+      </div>
+      {/* <!-- /.payment-option --> */}
+
+      <p className="policy-text">
+        Your personal data will be use for your order, support your experience
+        through this website & for other purpose described in our privacy policy
+      </p>
+      <div className="agreement-checkbox">
+        <input type="checkbox" id="agreement" />
+        <label htmlFor="agreement">
+          I have read and agree to the website terms and conditions*
+        </label>
+      </div>
+      {/* <!-- /.agreement-checkbox --> */}
+
+      <button className="theme-btn-seven w-100">Place Order</button>
+    </div>
+  );
+};
+
+export default Payment;
@@ -0,0 +1,34 @@
+'use client'
+
+import React, { useState } from "react";
+
+const PromoCode = () => {
+  const [click, setClick] = useState(false);
+  const handleClick = () => setClick(!click);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <div className="card">
+      <p className="card-header">
+        Have a promo code?{" "}
+        <button className="d-inline-block collapsed" onClick={handleClick}>
+          Click to enter your code.
+        </button>
+      </p>
+      <form
+        onClick={handleSubmit}
+        id="promo-code"
+        className={click ? "collapse show" : "collapse"}
+      >
+        <p>Please enter your promo code below.</p>
+        <input type="text" placeholder="Coupon code" />
+        <button className="theme-btn-seven">Apply coupon</button>
+      </form>
+    </div>
+  );
+};
+
+export default PromoCode;